Not so long time ago we started to work on a new frontend project and yes we decided to build it with Vue. At first we wanted to be like the cool kids and use React but it was the time of the React-Gate aftermath, so we chickened out and decided to give Vue a go.

This article is not about how cool Vue is, it’s more about how to deploy a static website build with Vue to an AWS S3 bucket. If you used vue-cli to scaffold your Vue based application, you probably saw an option to build a static web app by running npm run build .

If you use it as is, you’ll end up having to sync the contents of the dist folder to the S3 bucket. It is probably the easiest path to achieve the desired result, I would recommend you to enable compression and use compressed versions for deployment to your S3 bucket though.

In order to do that you have to:

install the compression-webpack-plugin — npm install --save-dev compression-webpack-plugin

enable the compression option inside of <you-app>/config/index.js — productionGzip: true

Now you’re good to go! If you run npm run build again you’ll gzip -ed versions of the files alongside with all the files you also saw previously. Let’s see which ones you need:

css folder > app.<hash>.css.gz

js folder > app.<hash>.js.gz , vendor.<hash>.js.gz , manifest.<hash>.js

plus all other folders and files that you use in your app 😀

The only thing you have to do now is to copy needed files to your S3 bucket, enable Static website hosting and inform your S3 bucket that you use compressed files to serve your app.

It can be done by changing the metadata on the compressed files — below is the example for a .css file. I think you can guess how you have to change the metadata for a .js file.

To not deal with all the copying manually, we threw together a simple bash script that leverages the aws-cli

You definitely can make this script better and create a ready-to-host-a-static-website-S3-bucket on the fly and we probably will do it but not now.

Yes, if you’re new to SPAs and Vue and S3 don’t forget to use the entry file into your app both as the Index and Error document like this:

my-truly-awesome-vue-app

If you guys are interested in more gotchas on either Vue or AWS related topics, let me know and I’ll try to write more articles on both topics.