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.
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
- 1000 build minutes per month (Pay as you go model — $0.01 per build minute)
- 5 GB stored per month (Pay as you go model — $0.023 per GB stored per month)
- 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