Deploy Gatsby with AWS Amplify Console, CLI and AWS Cognito, AWS AppSync
AWS Amplify enables developers to develop and deploy cloud-powered mobile and web apps. The Amplify Framework is a comprehensive set of SDKs, libraries, tools, and documentation for client app development. The Amplify Console provides a continuous delivery and hosting service for web applications.
Gatsby is a React-based, GraphQL powered, progressive web app static site generator. Gatsby uses GraphQL to build it’s data layer. Gatsby collect your data from wherever Markdown, JSON, your favorite CMS, third party APIs, anywhere! And at build time, it creates an internal GraphQL server of all of this data. So in your react components, all of your data is queried at build time from that same place, in the same way through GraphQL.
AWS Amplify Console
Modern web apps include Single Page App (SPA) frameworks (for example, React, Angular, or Vue) and static-site generators (SSGs) (for example, Hugo, Jekyll, or Gatsby). You can use AWS Amplify Console to continuously build, deploy, and host a modern web app.
- In the AWS Amplify Console just connect your repository and authorise amplify so it’s able to read from your repository.
- After authorisation, select your branch and you will see build config yml. Amplify recognises it’s a Static Site Generator (Hugo, Jekyll, or Gatsby) site and has a template ready to go, if required you can edit this within the browser.
- After you hit Save & Deploy on the final screen, your app will be built and deployed on AWS. Your Webapp has, free https is included and your site is distributed by default through Amplify’s CDN. Every subsequent push to the Master branch will trigger another build, meaning the process of deployment is completely automated so you can focus more on your site.
Lets Start CLI — First Gatsby
First, we’ll want to create a new Gatsby project. Lets install Gatsby:
npm install - global gatsby-cli
Next, create a new Gatsby site:
gatsby new my-gatsby-site
Then, change into the new site directory:
Host it with — AWS Amplify CLI
Now that we have our Gatsby site. Let’s add hosting & deploy the site on AWS.
First, install the AWS Amplify CLI:
AWS Amplify CLI installed, now lets configure it with an IAM User:
Create a new Amplify project in the root of Gatsby project:
- Choose your default editor: (e.g Visual Studio Code)
- Source Directory Path: src
- Distribution Directory Path: public
- Build Command: npm run-script build
- Start Command: npm run-script develop
- Do you want to use an AWS profile? Y
- Please choose the profile you want to use: default
Amplify project has been created. There is a new amplify folder in your project directory and an .amplifyrc file. They contain your AWS Amplify project configuration.
Next, we can type amplify into our command line & see all of the options:
We can see the categories available to us. Hosting is the category to enable, so let’s do so now:
amplify add hosting
Here, we’ll be prompted:
- Select the environment setup: DEV
- hosting bucket name: gatsbyproj-20181219112129-hosting-bucket (or type the bucket name)
This will set up local project with everything, now we can publish the app to AWS. Run the following command:
Here, we’ll be prompted:
Now, resources will be pushed up to AWS account and site will be published.
Here are the things happened under-hood :
- Amplify runs npm run build to build a new distribution of app
- A new S3 bucket is created in AWS account
- All code in the public directory is uploaded to the S3 bucket
A URL have also be given that the site is hosted on. At any time that you can get the url for the site, just run:
This command should give all of the info about the app including the url.
To configure the hosting setup, including adding Cloudfront, run:
amplify configure hosting
Here, there will be a prompt about the things to change in the project configuration.
Video walkthrough gatsby-publish-a-gatsby-site-to-aws-with-aws-amplify
Gatsby with user authentication using Amazon Cognito.
Also if you want to use AWS Cognito just add authentication to your Gatsby and AWS Amplify project
gatsby new my-aws-project https://github.com/dabit3/gatsby-auth-starter-aws-amplify
amplify auth add
Push the updated project configuration to AWS
Then you can run it by:
How Gatsby can call AWS AppSync GraphQL APIs
You can call AWS AppSync APIs( AppSync is serverless backend for web and mobile apps powered by GraphQL that also provides real-time and offline capabilities to apps) from your Gatsby check https://github.com/aws-samples/aws-appsync-gatsby-sample.
Set up the AWS AppSync Events backend
Login to the AWS AppSync console.
Click Create API.
Select the Event App sample project.
Enter a friendly name or keep the default ("My AppSync API").
Click Create. The API and resources will be created in a few seconds and the console will take you to the Queries pane with a pre-filled query and mutation.
Run the CreateEvent mutation a few times with different names and details for events.
Run the ListEvents query to view the events that were created.
Go to the Settings pane and copy the API URL and the API Key.
gatsby new my-aws-project https://github.com/aws-samples/aws-appsync-gatsby-sample
AWS_APPSYNC_API_URL="<API url from Settings>" AWS_APPSYNC_API_KEY="<API key from settings>"
- To learn more about AWS Amplify, check Getting Started
- To learn more about Gatsby, check Gatsby Docs
- To see How Gatsby work with AWS and Stripe check Gatsby E-Commerce Tutorial
Originally published at https://www.linkedin.com.