Experiences with deploying React app to AWS with AWS Amplify.

Yasser Shaikh
Aug 11 · 3 min read

I have been experimenting with different cloud hosting recently — Azure, DigitalOcean and now AWS, of the 3 I am very impressed with how simple & convenient it was with AWS.

AWS Amplify

There are two parts to AWS Amplify, Amplify Framework & Amplify Console. I used Amplify Console, which is an AWS solution to build, deploy, and host modern web apps.

Step 1: Login to your AWS Console and search for “Amplify”, select “AWS Amplify” and select the “Connect app” option.

Step 2: Select your git provider, for me it was Github.

Step 3: Next, it will authenticate your Github/BitBucket/Other providers credentials and ask you to select your repository & branch.

Step 4: (Nothing to do here), it will automatically try to analyze your repository to determine what kind of tech stack you have used and configure some default build settings. In our case it was a react app to the build settings include yarn install and yarn run build.

Step 5: And that's it! Review your setting and hit the deploy button.

On clicking the “Save and deploy” button it would build the first time using the branch you have selected before and deploy your application. All subsequent merges/commits to the master would trigger a build and deploy. You can also test your application using the link provided on this screen.

PRICING — FREE TIER

All of this was for FREE. In the free tier, you can do

  1. 1000 build minutes per month (Pay as you go model — $0.01 per build minute)
  2. 5 GB stored per month (Pay as you go model — $0.023 per GB stored per month)
  3. 15 GB served per month (Pay as you go model — $0.15 per GB served)

I also installed the AWS Console Mobile Application, which again is included in the free tier plan. Impressive!

A tiny problem with react-router:

I used react-router in my application, and I was able to navigate the application using the menu bar, but when I tried to access a child page using the URL directly it gave me 404 error. On googling I found few GitHub issues, where people had raised similar problems. The solution was to set up a rewrite/redirect rule and everything worked fine after that. (I also posted a question with answer on StackOverflow for people to easily find it ;))

Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address: /index.html
Type: 200

Cheers!

Yasser Shaikh's blog

It's supposed to be automatic, but actually you have to push this button.

Yasser Shaikh

Written by

Yasser Shaikh's blog

It's supposed to be automatic, but actually you have to push this button.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade