How to host a Vue app in a AWS S3 storage

Amazon Simple Storage Service (S3) is probably the cheapest service in AWS, so it’s a really good idea to think about using this service as website static hosting.


Part 1: VueJS Application Creation

For this example we’ll use a simple VueJS application with NuxtJS
Let’s start by creating the application with the command

$ npx create-nuxt-app s3-host-app

During the application creation, you’ll be prompted to choose some configurations for your app such as UI framework, Test Framework, Lint and so on
As the focus of this post isn’t the application it self, I’ll not get deeper here, but there are two main configurations that we need to pay attention: Rendering Mode and Deployment Target
These configs will define the deployment model as static and not Server Side Rendering
So, for this example, let’s use the following configuration:

  • Project Name: the value it’s already proposed (the app name)
  • Programming Language: JavaScript
  • Package Manager: Npm
  • UI Framwork: Vuetify.js
  • Nuxt.js Modules: None
  • Linting Tools: None
  • Test Framwork: None
  • Rendering Mode: Single Page App
  • Deployment Target: Static/Jamstack hosting
  • Deployment Tools: None
  • What is your Github username: the value it’s already proposed (it will load from your git config)
  • Version control system: Git

Now that we’ve created our app, we may enter in app’s folder and initialize it in development mode, only to check if it’s everything working fine
We can achieve this by running the following commands:

$ cd s3-host-app
$ npm run dev

Now we can check http://localhost:3000 to see if it’s running

And voilá: it’s running!

Now, to make it ready for deployment, we need to ask Nuxt to build and generate the files for deployment.
To do this is quite simple:

$ npm run build
$ npm run generate
npm run build
npm run generate

After running these commands we may notice the dist folder created on our project.
The content of this folder are the files we’ll upload to S3.


Part 2: Configuring the S3 Bucket

disclaimer

We are going to work with public S3 bucket. This is not the best approach.
The best/right approach is to work with private bucket and let CloudFront do the public job.
Also, we are not going to work with SSL configuration.
Probably I'll make posts about these configurations in the future, but for now, let's go with public bucket without SSL

Let’s create our bucket. Nothing special here despite the public configuration. We need to uncheck the option Block all public access, leaving all others checkboxes unchecked and check the knowledge checkbox about leaving the bucket with read public access:

After this, we may leave all other settings the way it is and create the bucket

Now with the bucket created, we need to tell AWS that we want to use this bucket as Static Hosting. To do this we need to go to the Properties tab and scroll down to Static website hosting and hit the Edit button:

Now it’s very simple, we only need to enable the static hosting and inform what is the index file. In our case, index.html:

Now we may save the changes we made and then go back to Objects tab and hit the Upload button.
Attention: we want to upload the content of the dist folder and not the folder itself.

Now we can upload the files by clicking on Add Files button:

Notice that the folders are not selected. After uploading the files, we need to click on Upload Folder to upload the folders (one at a time).

Now we need to go Permissions section and let the files with public read access and, again, check the knowledge checkbox:

After that we can hit the Upload button, wait for the upload to finish and then, click on Close button, get back to Properties tab, scroll down to Static website hosting and we’ll notice the site URL:

So now it’s the test moment! Let’s click on the link and…

It works!