Serving Up a Single Page Web App Demo Must Be Easy By Now, Right?

Let’s review how I deployed “for release” the single-page live demo site accompanying my recent “Foreign Langauge Support in JavaScript” article as seen here: http://www.tstringjs.com

Basically it’s a bucket of Amazon S3 files with some DNS book-keeping through my hosting service, BlueHost.

Amazon S3 is Cheap and Fast

The awesome thing is storing all the interactive bits: JavaScript, CSS, HTML, PNGs hosted out of a Amazon S3 bucket. Seems like S3 isn’t even a web server, but it works that way. S3 buckets are fast and cheap and meant to be banged on by tons of people all day long. The single-page site serves up as if from a dedicated web server,  is interactive to user input, and even goes out to a public RESTful API displaying its service responses. Great stuff, right?

Putting my single page demo site up on S3 feels professionally roped off my “real important” web server stuff such as WordPress, email, ftp, PHP/Rails/MySQL R&D.That’s all up on my BlueHost site and I keep that dedicated to just those functions. As a coder I think that decoupling feels like a win. If you don’t want to do it that way no problem – thanks for stopping by.

BlueHost is Leveraged Greatly

Using Amazon S3 to serve up the files, because it’s super cheap, I’m also leaning on my hosting company, BlueHost, for internet book-keeping. The DNS book-keeping is uber nerdy, only done once per site, so keep with me as I lay it out step by step below. Believe me that the results are worth the trouble. All of this info I’m writing down is hard-fought knowledge I want to share while recording for future Ken’s sanity.

Not only do I show using Bluehost for the book-keeping bits, I always suggest them for hosting for dev and corp stuff such as: official web site, ftp, email, domain name purchasing, SQL, WordPress hosting, PHP and Rails dev. Whatever feature I want they seem to have it positioned where I need it. It’s awesome in fact.

If BlueHost is so great why am I pushing off this demo site to AWS S3? AWS for me is an app production/release resource. Just separating concerns as any wise coder tries. Eventually you might appreciate AWS EC2 and RDS as well for prod.

Steps for the Awesome

I admit this instruction is rather terse, but I believe in you and your mad dev skills. Once you dig in to this I fully expect you’ll successfully parse the bullet-points while connecting the dots. Questions? Hit me up on Twitter and I’ll refine the doc over time.

• Make a genius single-page web-app that runs perfectly on your localhost laptop

• Sign up with BlueHost
• Control Panel Login
• Domains -> Register Domain 
  • Go through their flow choosing whatever domain name you want for your demo website (for example newsite.com)

• Sign up with Amazon Web Services
• AWS Account Login
• Choose “S3” seeing the S3 dashboard
  • Press “Create a Bucket”
  • Bucket Name: www.newsite.com (this is an important naming scheme in the AWS world)
• Select the newly created bucket
• Properties -> Static Website Hosting
  • Click “enable website hosting” (a crucial step as you can guess)
  • Index Document: index.html (my assumption but probably correct for yours)
  • Endpoint: Make a note of this assigned value, it’s a URL and anyone can get to it from a browser, but it looks sketchy as all get out (www.newsite.com.s3-website-us-west-2.amazonaws.com)  and not at all what we finally want
• Fill up your S3 bucket with subdirs and files
  • Match what you have on your localhost development environment
  • Assure every file has the additional “Permission” -> Grantee: Everyone, Open/Download (not default and incredibly important)

• Back to BlueHost.com => Control Panel Login
• Domains -> Parked Domains
  • Step 1: Enter Domain select the domain from drop-down list (newsite.com)
  • Step 2: Verify Ownership is N/A
  • Step 3: Choose “Parked Domain”
  • Press “Add Domain” button
  • Now web browsing to your new domain URL (www.newsite.com) redirects to your current host, which is not at all what you want, but we’re at an important step
• Domains -> DNS Zone Editor
  • Select a Domain from the drop-down (newsite.com)
  • CNAME Alias “www” points to the AWS bucket (www.newsite.com.s3-website-us-west-2.amazonaws.com)
  • You’ll read that changing the DNS like this might take several hours to seep through the Internet. It’s true, I’ve seen it.
  • Once percolated you’ll find that browsing www.newsite.com will redirect to your new Amazon bucket website. Perfect! Now we’re talking!
  • You’ll  also see that newsite.com (so-called bare URL) will not – boo! It continues navigating to your base hosted website from the original parking. No problem – we can fix that with a redirect.
• Domains -> Redirect
  • Type = Permanent (301)
  • http://(www.) select your domain from drop-down (newsite.com)
  • redirects to -> http://www.newsite.com
  • www. redirection: click “Do not redirect www.” (endless loop if done BTW)
  • Press “Add” button
  • What does this do? The GUI form writes a change to your BlueHost Apache .htaccess file redirecting bare url newsite.com to www.newsite.com. Of course we previously made that an alias for your AWS S3 bucket URL. Sweet!

Wow that’s a bunch of crazy talk I just wrote down, but it’s truly useful stuff to know and experiment with. Hopefully this makes it easier for you considering all the junk I had to learn.

Have a Think on This

Writing this now I can see this is a tougher task to document than I thought. Surely it gives you a jumping off point and my expectation is that the breadcrumb-like notes I bullet-point guide you to success. I have a lot of faith in you since you’ve gotten this far!

Get a web site going today and build something awesome. I’ve used BlueHost for years and honestly think they have everything I need at the price I want. Choosing them has made my development life easier.

Now that this is finished I can go enjoy a cup of coffee!