Deploy Gatsby with AWS Amplify Console, CLI and AWS Cognito, AWS AppSync

Image for post
Image for post

Modern web applications are constructed as single page web applications that package all application components into static files. Modern web apps offer a native app-like user experience by serving the app front end, or user interface, efficiently to browsers as prebuilt HTML/JavaScript files that can then invoke backend functionality without reloading the page. Modern web applications functionality is often spread across multiple places — such as databases, authentication services, front end code running in the browser, and backend business logic, or functions, running in the cloud.

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:

cd my-gatsby-site

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:

amplify configure

There is a walkthrough to configure the AWS Amplify CLI.

Create a new Amplify project in the root of Gatsby project:

amplify init
  • Choose your default editor: (e.g Visual Studio Code)
  • Please choose the type of app that you’re building: javascript
  • What JavaScript framework are you using: react
  • 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:

amplify

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:

amplify publish

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 :

  1. Amplify runs npm run build to build a new distribution of app
  2. A new S3 bucket is created in AWS account
  3. 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:

amplify status

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 
cd my-aws-project
npm install
amplify auth add

Push the updated project configuration to AWS

amplify push

Then you can run it by:

gatsby develop

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.
Click Start.
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.

Run Gatsby

gatsby new my-aws-project https://github.com/aws-samples/aws-appsync-gatsby-sample 
cd my-aws-project
npm install
AWS_APPSYNC_API_URL="<API url from Settings>" AWS_APPSYNC_API_KEY="<API key from settings>"
gatsby develop

For detailed information https://www.gatsbyjs.org/docs/third-party-graphql/, https://www.gatsbyjs.org/blog/2018-09-25-announcing-graphql-stitching-support/

  1. To learn more about AWS Amplify, check Getting Started
  2. To learn more about Gatsby, check Gatsby Docs
  3. To see How Gatsby work with AWS and Stripe check Gatsby E-Commerce Tutorial

How does Gatsby work with Stripe and AWS?

Originally published at https://www.linkedin.com.

Written by

I am passionate about Technology, Cloud Computing, Machine Learning and Blockchain

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store