Member preview

Host a Vue.js static site on Amazon S3

Vue.js is awesome. AWS is beyond awesome. Let’s use them together.

S3

Amazon Simple Storage Solution is for hosting files. It is object based storage so you cannot run a database or operating system on it. It is great for hosting assets on it. In this tutorial we’re going to host a static site on it. By static site I mean a collection of HTML, CSS and Javascript files.

Before we dive too deep there are other solutions out there like Github Pages and Forge. Those sites are cool because you can straight up git push to deployment. They’re all free or basically free. S3 is a legit solution though because it is has unlimited scalability and it gets us started with Amazon Web Services. You can enable versioning on the S3 buckets that will show a history of your deployments.

They use S3 static sites for major motion picture movie sites that get battered by bajillions of pageviews. Amazon S3 is Internet Scale™️ so it won’t crap out when your first website is featured by the New York Times.

Vue.js

Vue.js has a command line tool for generating static sites. This is officially maintained by the Vue.js github account and not some random third party. These generators take care of the webpack setup which, well, thank god for that.

We’re going to use the webpack-simple because… it’s the simplest and provides the least amount of headache. When using generators or starter kits be careful of how heavy they are because you WILL find yourself fighting with that code later and the features might not even be necessary for your use case.

Use these commands to install the generator and create a new project. I recommend using the webpack-simple instead of the webpack template.

Okay now we have our site. Next up we need to configure our hosting environment.

Log into the AWS console:

Find the S3 section and create a new bucket. Buckets are collections where we store files. There is a 5TB limit to file size for uploading. The bucket can store an unlimited amount of data. When you create the bucket, there is a section in the 2) Set properties step about visibility for the files. Select the Grant public read access to this bucket setting. Bucket contents are private by default and we want our site to be accessible by the entire internets.

Bucket names are globally unique, so no one else can take the name I wrote above. If you try something like “mybucket” or “testbucket” it’s already in use. You could prefix your username or site url to ensure name uniqueness. That’s a common convention, I think..

Okay so we created the bucket and created our Vue project. Here’s the console output for generating the Vue.js website.. just in case

So to view our site in the web browser run the npm run dev command. The site will open your browser to http://localhost:8080/ and show the default page. Hot module reloading is enabled. If you have not heard of hot module reloading, welcome to 2017! This is dope. You make changes to your html, css, js or vue files and it will automatically show up in the browser after you save the file in the text editor.

The dev command we run is defined in package.json. There is also a build command. Run that.

This command generates our dist directory that is to be uploaded to our S3 bucket

Go into your S3 bucket and enable static website hosting:

Upload the index.html and dist directory that got created to the S3 bucket. Make sure you set permissions for the files so that they are globally read accessible. You have a website!

My static site is available here: http://mygloballyuniquebucketnameforthisexactvuejswebsite.s3-website-us-west-1.amazonaws.com/

If you have questions leave a comment or reach on via twitter. Thanks for reading