Gatsby is quickly becoming the tool of choice for developers looking to get up and running with new React applications.
For a walkthrough of how to do this in just 56 seconds, check out the video here.
The combination of speed, smart default configuration, & ease of development that Gatsby delivers out of the box is a step forward from what we had before, similar to the jump that Create React App took us from manually configuring our webpack configurations in the early days.
In this post we'll learn how to deploy your next Gatsby site to AWS using the Amplify Console.
What is Amplify
Amplify started off as just a client framework but has progressed into much more. It now consists of a CLI, console, as well as the client framework.
The CLI allows you to create & configure new cloud services directly from your command line. The experience is similar to Rails in the sense that you can scaffold these services & are given an opinionated set of configuration that you can then update to fit your needs.
Once you've created your cloud services, you can use the Amplify client to connect to & interact with these services.
Finally, when you're ready to launch your application the Amplify console provides a suite of tools around hosting & continuous deployment to get you on your way.
Let's take a look at how to combine these two technologies.
Getting Started
To get started, we'll create a new Gatsby project using either the Gatsby CLI or npx & then change into the new directory:
npx gatsby new GatsbyAmplify
cd GatsbyAmplify
Once the application is created, we'll create a new GitHub repo & push the project to the repo:
git init
git remote add origin git@github.com:<username>/<projectname>.git
git add .
git commit -m 'initial commit'
git push origin master
Amplify Console
Now that the GitHub project has been created we can log into the Amplify Console.
From here, under Deploy we can click GET STARTED:
Next, we'll choose GitHub as our repository & click Next.
Then connect the mater branch of the new repo we just created & click Next:
In this view, we can review the default build settings & click Next to continue:
Finally, we can review the deployment & click Save & Deploy when we're ready to deploy our app:
Once the deployment is successful, you should see this:
To view details of the deployment, click on the name of the branch (in our case, master).
In this view, you can see details about the deployment including a link to view the app & screenshots of the app on different devices.
Kicking off a new build
Now that our app is deployed, let's take it one step further. The Amplify Console will automatically watch your master branch & kick off a new build whenever new code is merged. Let's test this out.
Open src/pages/index.js & replace the following line:
<h1>Hi people</h1>
with this:
<h1>Hello from Amplify</h1>
Save the file & push the changes to your master branch:
git add .
git commit -m 'updated heading'
git push origin master
Now, when we go back into the Amplify console we'll see that a new build has been started:
When the build is completed & we launch the app, we should now see our new heading:
Next Steps
Now that you've gotten the hang of working with the Amplify Console, what are some next steps?
If you're interested in adding authentication to your Gatsby app, check out this Gatsby Auth Starter I published.
If you're interested in adding new features to your Gatsby app (like authentication or a GraphQL API), check out the Amplify CLI & Amplify Client libraries.
You may also be interested in working with multiple environments or teams. If so, check out the documentation on how to get up & running with teams or have a look at this post that I wrote.
My Name is Nader Dabit. I am a Developer Advocate at Amazon Web Services working with projects like AWS AppSync and AWS Amplify. I specialize in cross-platform & cloud-enabled application development.
Top comments (0)