Deploy a Nuxt SPA App to Amazon’s AWS Amplify ☁

This will be a very short guide on how to deploy your Nuxt SPA app on Amazon (AWS) Amplify development platform in a way dynamic routes work properly.

Let’s get started! <:o)

1) Create a Nuxt App

Follow the instructions on the link below to create a basic nuxt app:

https://github.com/nuxt/create-nuxt-app

npx create-nuxt-app <my-project>

❗️️ Make sure to replace “<project-name>” with your project-name!

You can choose which options you like yourself, but make sure to have rendering mode “SPA” applied so it’s a Single-Page-Application.

2) Setting Up the app in AWS Amplify

❗️️If you haven’t set up an AWS account and a project yet, please do so now on http://www.aws.com.

Now visit https://us-west-2.console.aws.amazon.com/amplify and click on “Connect app”. You’ll go through a very short setup deployment process that is well documented, either by connecting a git repo or by other means.

Just follow the instructions and you should end up here:

Amplify Console

Your app is already deployed and all we need to do now is to configure it so dynamic routes will work properly.

3) Fix the app to work with dynamic routes

Your application should already work, but when visiting dynamic routes you will notice that something behaves weirdly —you get 404’s, or end up getting index.html as a route parameter.

BUT — luckily, this can be fixed easily with these simple steps:

1. Go to App Settings -> Rewrites and redirects
2. Click on Edit and remove the existing rule
3. Add the following new rule:

Source Address:

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

Target Address:

/index.html

Type:

200 (Rewrite)

This rules use a regular expression to catch every route EXCEPT the ones with the defined file extensions, and 200 rewrites them to index.html.

If you want to read more about that, AWS describes this in further detail here.

4) That’s it! 🥳

Your Nuxt SPA app is deployed on AWS Amplify and should work like a charm!

Let me know in the comments below if something did not work out for you, and make sure to leave some claps if this helped you.

DID YOU KNOW?
You can clap as much as 50 times for one medium article!
Feel free to give it a go 😉