Building serverless web apps with Gatsby and Amplify

@VladimirNovick

Independent consultant

Web / Mobile / VR / AR / IoT / AI

vnovick.com

GDE, author, software architect

atsby

Static site generator

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

Static site generator

What is GraphQL

GraphQL

A query language for your API

What's wrong with REST

Restful API

The core idea in REST is to have a URL for every resource

RESTfull API problems

Description of resource is coupled to implementation

https://swapi.co/

Overfetching

Underfetching

chaining requests to server to get needed data

So how does GraphQL solve it

Avoid over-fetching

Prevent multipe API calls

Lesser communication with API developers

Self-documenting

How it looks like

GraphQL SDL

https://graphql.org/learn/schema/

type Post {

   title: String!

   content: String!

   user: User!

}

type Person {

    name: String!

    address: String

    posts: [Post!]!

}

GraphQL SDL

GraphQL Resolvers

https://graphql.org/learn/execution/#root-fields-resolvers

Getting started

npm install -g gatsby-cli
gatsby new gatsby-site

Install Gatsby CLI

Generate a new site

Getting started

npm install -g gatsby-cli
gatsby new gatsby-site

Install Gatsby CLI

Generate a new site

Getting started

npm install -g gatsby-cli
gatsby new gatsby-site

Install Gatsby CLI

Generate a new site

gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]

Folder structure

  • /src/pages every component here will be treated as a page and will be accessible via route
  • gatsby-node.js - implement various APIs
  • gatsby-browser.js - implement various browser APIs
  • gatsby-ssr.js - implement server side rendering APIs
  • gatsby-config.js - configuration file for all plugins

Styling

  • import styles using traditional css and imports in gatsby-browser.js
  • create component.module.css file next to every component for scoped css with css modules
  • CSS-in-JS

Data

Page queries

  • Can be defined only on page level
  • injects result as data prop inside the page

Static query

  • Can be defined using useStaticQuery hook
  • injects result as data prop inside the component
  • cannot use variables

Plugins

plugins are installed and configured in gatsby-config.js

Plugins

Time for a demo

npm install --save gatsby-source-filesystem
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `posts`,
    path: `${__dirname}/content`,
  },
},

configure plugin to pull content

transform markdown

npm install --save gatsby-transformer-remark

Plugins

AWS Amplify

Plugins

AWS Amplify CLI

The Amplify Command Line Interface (CLI) is a unified toolchain to create, integrate, and manage the AWS cloud services for your app.

npm install -g @aws-amplify/cli
amplify configure
amplify init

Plugins

JavaScript library

Connects your app to the cloud

import Amplify from 'aws-amplify';
import config from './src/aws-exports'

Amplify.configure(config)

Plugins

Plugins

Demo time

Let's create and deploy Gatsby site with CI/CD pipeline

create github repo and connect to branch using AWS Amplify console

Plugins

Configure Amplify

import Amplify from 'aws-amplify';
import config from './src/aws-exports'

Amplify.configure(config)

Plugins

Authentication

Amazon Cognito

Create, configure new Amazon Congito for signup & signin

Use Auth class from aws-amplify

Use preconfigured components

import { withAuthenticator } from 'aws-amplify-react'

export default withAuthenticator(SecondPage)
amplify add auth
npm install --save aws-amplify aws-amplify-react

Plugins

REST API

Amazon Lambda + AWS API Gateway

Create new Lambda Functions

Scaffold basic Lambda code

Configure API Gateway

Interact with Lambda function with client library

Plugins

GraphQL API

AWS AppSync

Create new AWS AppSync GraphQL API

Configure AppSync

Perform queries, mutations, subscriptions from your app

Plugins

Hosting

Amazon S3

Creates & configures S3 bucket for hosting

Configure CloudFront

Publish assets to S3, push updates from CLI

Storage.put(this.state.filename, this.state.file)
amplify add storage

Plugins

Analytics

Amazon Pinpoint

Record events from the client app

Automatically records session and auth data

Analytics.record({ name: 'pageVisit' });
amplify add analytics

Plugins

Demo

Plugins

Adding dynamic content

Using componentDidMount

Using subscriptions, using ApolloClient

https://github.com/awslabs/aws-mobile-appsync-sdk-js

Thank You

  @VladimirNovick

Made with Slides.com