I just finished building a Full Stack tutorial course project using Create React App with an Amplify backend. Amplify is an AWS product. It's an opinionated client framework used for building scalable mobile and web apps.
Gatsby walks through the deployment process quite well on their blog here. I figured I would do the same while highlighting a few pain points I experienced along the way.
First thing's first - let's start with a good Gatsby Amplify Auth Starter! Nader Dabit has a great open source repo to get started with:
gatsby new gatsby-amplify-auth https://github.com/dabit3/gatsby-auth-starter-aws-amplify
cd gatsby-amplify-auth
Once you have CD'd into your new project, configure your new amplify project backend with Amplify Init. I should mention this assumes you've already installed Amplify's CLI and have configured with an IAM user. If you get tripped up at all during this process, it's outlined quite well here.
Once you finish initializing your app, make sure to push those updates with Amplify Push.
Next, let's go ahead and create a new Git Repo - you can choose from Gitlab, Github, BitBucket and AWS's CodeCommit.
Once you've set up your repo, let's head over to https://aws.amazon.com/amplify/ and create our new Amplify App. Click the 'get started' button under Deploy.
Your next screen should be the below - select your repo service and then search for your new Gatsby Amplify repo.
Once you've selected your repo, you then need to pick the user you created at Amplify Init as well as the backend you pushed. So now that you have the backend selection, click the 'Save and Deploy' button. This process takes a few minutes, so be patient.
If you had a build error like I did the first time running through this tutorial, it's likely because you need a Limit Increase on your CloudFront Distributions (check the error logs though in case it's a different error). If so, you can file a case to increase your limit here. Here are a few screengrabs to hopefully help:
This process typically takes an hour or so for approval. Follow the same steps we went through the first time and you should be greeted with the following:
Success! Hope you enjoyed this as much as I do. One of my goals in 2020 is to build a Full Stack Application with Gatsby and AWS Amplify + Appsync.