How To Host Your NuxtJs SPA on S3 with Cloudfront.
Tags: vue, aws, s3, nuxt
Published: 2020-04-12 17:07:41

---
title: How To Host Your NuxtJs SPA on S3 with Cloudfront.
tags: vuejs,aws,s3,nuxtjs
cover_image: https://miro.medium.com/max/824/1*C1rcqGPCgGKwfo4B9lb17Q.png
published: true
---

You are trying to get your new shiny app deployed to the fancy AWS service either to save cost, try out a new option or any other reason you have in mind. You figure it’s not as straight forward as you think, this tutorial will try and lend a helping hand.

This tutorial assumes knowledge of these services and won’t be explaining some terms.

## Create and Configure S3

* Navigate to your AWS console, create an S3 bucket.
> This guide will help with that [https://docs.aws.amazon.com/AmazonS3/latest/gsg/CreatingABucket.html](https://docs.aws.amazon.com/AmazonS3/latest/gsg/CreatingABucket.html)

It’s important that you uncheck the *Block all public access* box while creating your bucket.

![Uncheck the *Block all public access* option.](https://cdn-images-1.medium.com/max/2000/1*bPhcpwSuTAJrwciCk_5v8w.png)*Uncheck the **Block all public access** option.*

* Next, we configure our bucket for static website hosting.

![Configure Bucket.](https://cdn-images-1.medium.com/max/2000/1*DlP6s_0Sz6CHCGkAoABxpQ.png)*Configure Bucket.*

As shown above;

1. Select your created bucket from your list that would be displayed at [https://s3.console.aws.amazon.com/s3/home](https://s3.console.aws.amazon.com/s3/home)

1. Navigate to the properties tab and select the Static website hosting from the list of options.

1. Check the ***Use this bucket to host a website*** option

1. Change the *Error Document* to ***index.html*** (This is because our application is a SPA, and the index page does all the error handling).*

1. Save

We are done with S3.

## Create and Configure Cloudfront (Optional)

This is an optional step but is highly recommended.

This tutorial will help with setting up CloudFront and configuring it for our S3 bucket above [https://aws.amazon.com/premiumsupport/knowledge-center/cloudfront-serve-static-website/](https://aws.amazon.com/premiumsupport/knowledge-center/cloudfront-serve-static-website/).

## Setup Project Scripts

Create a new *deploy.sh* file in your project directory, and copy the contents below into it.

<iframe src="https://medium.com/media/e4225a0ecc93c457bcc2cdf93b6c7395" frameborder=0></iframe>

* Your *AWS_ACCESS_KEY_ID* and *AWS_SECRET_ACCESS_KEY* can be gotten from the AWS console, this guide will show you how if you don’t already know or have them [https://docs.aws.amazon.com/general/latest/gr/aws-sec-cred-types.html](https://docs.aws.amazon.com/general/latest/gr/aws-sec-cred-types.html).

* *AWS_BUCKET_NAME* is the S3 bucket name we created above e.g mine is *test-bucket-damiloju* as shown in picture 2.

* *AWS_CLOUDFRONT* is our CloudFront distribution ID. It can be found here [https://console.aws.amazon.com/cloudfront/home](https://console.aws.amazon.com/cloudfront/home)

![CloudFront distribution ID](https://cdn-images-1.medium.com/max/2000/1*YPvIV9A2kZOfU417umD_FQ.png)*CloudFront distribution ID*

* Important that you change the mode of your project in your ***nuxt.config.js*** to ***spa***

Make deploy.sh executable and not check into gitignore.

<iframe src="https://medium.com/media/9426df1f2e47ab4e1a9c0e0ecd08fe0f" frameborder=0></iframe>

If you are on Mac or Linux, you can copy the above and paste it in your terminal to make deploy.sh executable.

Next, we add gulp to our project and install it globally. Run the commands below.
> npm install — save-dev gulp gulp-awspublish gulp-cloudfront-invalidate-aws-publish concurrent-transform
> npm install -g gulp

Now create a ***gulpfile.js*** file in your project directory and add the contents from the script below to it.

<iframe src="https://medium.com/media/1cf96c2a6f983680ce6461c066523bcb" frameborder=0></iframe>

Now we are done.

All you need to do now is execute your deploy script.

Go to your terminal and type ***./deploy.sh***

You should get something similar to the pictures below as output.

![Terminal Output](https://cdn-images-1.medium.com/max/2000/1*SVo-S_wFgiIXJOLb1-sOKA.png)*Terminal Output*

![Terminal Output 2](https://cdn-images-1.medium.com/max/2000/1*S-Ggh-A0M2oc4hTRehmpnw.png)*Terminal Output 2*

We are good to go :).
> This takes parts from the official Nuxt Js article (which didn’t work for me) so the solution here provides a somewhat working solution with some differences from it. You can find the full article [here](https://nuxtjs.org/faq/deployment-aws-s3-cloudfront)