Deploying React With AWS Amplify Console

TLDR:

• Setting up AWS Amplify Console/Deploy is really familiar if you've used other CI/CD tools
• It doesn't just build your application but also deploys to a managed CloudFront distribution
• The build config might confuse you slightly if you're coming from something like CircleCI Intro: AWS Amplify is a new offering from AWS. It consists of two parts, a framework for creating applications that connects your app with AWS services and a CI/CD tool for deploying any application.

Today we will be talking about the deployment service of AWS Amplify.

I stumbled upon AWS Amplify when researching the best way to do cache invalidation on CloudFront distributions.

It turns out that AWS Amplify does instant invalidations on every deploy! (Click here to read more about it)

I'm going to walk you through setting up AWS Amplify with Github and deploying a Client Side Rendered React App.

Let's go 🚀

Breakdown of Steps:

1. Integrate Github 😸
2. Connect Repo 🔌
3. Setup Build Config 🔨
4. Build Config Gotchas ⚠️
5. URL Redirects ↩️ Done! ✨ 🎉

Integrate Github 😸

Time Taken: 3 Minutes

Like a lot of CI/CD tools, you connect AWS Amplify with Github (or other version control tools) and on each commit to the repo causes the build process to start.

Connect Repo 🔌

Time Taken: 1 minute

Once you've set up your version control with AWS Amplify, you need to pick your repo and select a branch.

Setup Build Config 🔨

Time Taken: 5 - 10 minutes

This is where the magic begins. If you've used other CI/CD tools than you are familiar with this process.

AWS Amplify will attempt to create a build config automatically, which you can download and place into your repo or edit on the console.

If you have config files for other CI tools, AWS Amplify can also copy these automatically (This is a good and a bad thing)

Build Config Gotchas ⚠️

There are a few gotchas that caused my initial builds to fail. I've gone through the pain, so you don't have to:

• sudo Does not work - This is similar to other CI/CD tools
• The automatic config might pull things from configs from other CI tools like I said earlier this is a good and a bad thing. I had a lot of commands that were needed for CircleCI to build and deploy but not needed for AWS Amplify - Double check the automatic config.
• Build output directory - The warning is there and yet I ignored it. - -Make sure to change baseDirectory to your build processes output folder (Probably /build)

URL Redirects ↩️

If you're running a SPA (Create React App etc), then you will need to set up URL redirects.

In the app project within the console, there will be settings in the left-hand side one of them will be for "Redirects and rewrites"

Here's the basic one for SPA's:

Done! ✨ 🎉

You should be done!

AWS Amplify will deploy your app to CloudFront and give you a URL as well.

Need to do more or having issues? Check out the links below

More Reading:

Welcome Guide

URL Redirects

Custom Domains

---

This post was originally posted on https://blog.dannyaziz.com

Comments

[Brown]

Hi Danny,

Thanks for the article. I have tried to do deploy my react app to aws amplify server. Do you why the process stop/ took longer time at Deploy stage?
Is there any other setting related to deployment stage?
it is still running when I posted this message