Gatsby is a free, open-source framework for building websites and applications. It’s extremely developer-friendly and streamlines the setup and configuration of your build. Gatsby can pull data into your UI from any and all of the sources you currently use; and exceptional performance, added security, and current web best practices are built into Gatsby.

Gatsby Starter (with Typescript)

yarn add typescript gatsby-plugin-typescript --save-dev

// tsconfig.json
{
  "compilerOptions": {
    "module": "es2015",
    "target": "es5",
    "lib": ["es5", "es6", "es7", "es2017", "dom"], // List of library files to be included in the compilation
    "sourceMap": true, // Generate corresponding .map file
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDirs": ["src"],
    "baseUrl": "src", // Base directory to resolve non-relative module names
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "types": ["react", "node"] // If "types" is specified, only packages listed will be included
  },
    "include": ["src/**/*"],
  "exclude": ["node_modules", ".storybook/**/*", "public", ".cache"]
}

Continuously Build and Deploy Site on Netlify

Trigger builds from changes in code base

After creating your gatsby site from either gatsby-cli(gatsby new gatsby-site) or one of the many flavored starters, create a Git repo and push all local changes to remote. Then follow the instructions to link your repo in Netlify Console after you have authorized Netlify through Github account (or other platform of your choosing). One thing worth noting is that Netlify allows you to deploy multiple branches. This comes useful when you have both production and staging environment.

Screenshot of Netlify Console

Trigger builds from changes in data source

Editing DatoCMS Webhook

Runtime vs. Build Time

Sourcing Data with plugins, Querying Data with GraphQL

BYOD (Bring-Your-Own-Data)

plugins: [
  {
    resolve: `gatsby-source-datocms`,
    options: {
      apiUrl: `DATOCMS_API_URL`
      apiToken: `DATOCMS_API_TOKEN`,

      //In development/staging environment,
      // preview the latest version of records instead of the published one:
      previewMode: process,env.ENVIRONMENT === 'production' ? false : true,
    },
  },
]

The really novel idea: GraphQL at build time

useStaticQuery(
    graphql`
      query {
        allDatoCmsGlobal {
          edges {
            node {
              metadata {
                id
                jsonMetadata
              }
              metaInfo {
                author
                copyrightyear
                description
                headline
                image {
                  url
                }
                pageurl
                publisher
              }
            }
          }
        }
      }
    `

Gatsby Is Not Just for Static Site

React Hydration makes "app-like" features possible

• Static pages
  • Automatically create pages throught src/pages
  • Programmatically with createPage API
• Hybrid app pages Statically created pages can make calls to external services and third party APIs for dynamic data-fetching. These pages are referred as hybrid app pages.
• Client only routes Using a client-side router such as react-router or @reach-router (@reach-router is what Gatsby uses behind the scene, so no need to install it), you can create page by exporting a component inside pages directory, or import a router and set up routes yourself.

Expand Site To Be Even More Dynamic

Add Netlify Functions to Gatsby

yarn add http-proxy-middleware netlify-lambda npm-run-all --save-dev

scripts: {
    "build": "run-s build:app build:lambda",
    "build:app": "gatsby build",
  "build:lambda": "netlify-lambda build src/functions",
  "start": "run-p start:**",
  "start:app": "yarn develop",
  "start:lambda": "netlify-lambda serve src/functions",
   "develop": "gatsby develop",

const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = {
    developMiddleware: app => {
        app.use('/.netlify/functions/', createProxyMiddleware({
            target: 'http://localhost:9000', // default port for lambda server
            pathRewrite: { 'src/functions/': '' },
    }))
    },
}

Add Authentication in Gatsby

• Gatsby statically renders all unprotected routes as usual
• Authenticated routes are whitelisted as client-only, wrapped in an authentication provider
• Logged out users are redirected to the login page when they attempt to visit a protected route
• Logged in users will see their private content

Use Netlify Identiy

    yarn add netlify-identity-widget gatsby-plugin-create-client-paths

 // gatsby-config.js

 plugins: [
     {
         resolve: `gatsby-plugin-create-client-paths`,
         options: { prefixes: [`/dashboard/*`] },
     }
 ]

// gatsby-node.js

exports.onCreatePage = async ({ page, actions}) => {
    //page.path matches with regex pattern: start with '/dashboard'
    if (page.path.match(/^\/dashboard/) {
        page.matchPath = '/dashboard/* // page.matchPath is used for matching pages only on client side
        createPage(page)
    }
}

import React, { useState, useEffect } from 'react'
import netlifyIdentity from 'netlify-identity-widget'

export const IdentityContext = React.createContext({})

export const IdentityProvider = ({ children }) => {
    const [user, setUser] = useState<object | null>()
    // useEffect() will not run at build time
    useEffect(() => {
        netlifyIdentity.init({})
        netlifyIdentity.on('login', user => {
            netlifyIdentity.close()
            setUser(user)
        })
        netlifyIdentity.on('logout', () => {
            setUser(null)
        })
    }, [])

    return (
        <IdentityContext.Provider value={{ identity: netlifyIdentity, user }}>
            {children}
        </IdentityContext.Provider>
    )
}

// gatsby-browser.js

import React from 'react'
import { ThemeProvider } from 'styled-components'
import { IdentityProvider } from './src/contexts/auth'
import theme from './src/constants/theme'

export const wrapRootElement = ({ element }) => (
    <ThemeProvider theme={theme}>
     <IdentityProvider>{element}</IdentityProvider>
    </ThemeProvider>
)

import React, { useContext, useEffect } from 'react'
import { Link, navigate } from 'gatsby'
import { Router } from '@reach/router' // included with gatsby v2
import styled from 'styled-components'
import { IdentityContext } from '../contexts/auth'

const PublicRoute = props => {
  const { identity: netlifyIdentity } = useContext<any>(IdentityContext)
  return <Button onClick={() => netlifyIdentity.open()}>Login</Button>
}

const Login = props => {
  const { identity: netlifyIdentity } = useContext<any>(IdentityContext)
  return <Button onClick={() => netlifyIdentity.open()}>Login</Button>
}

const Dashboard = () => {
  const { user, identity: netlifyIdentity } = useContext<any>(IdentityContext)

  return user ? (
    <Router>
      <PrivateRoute
        path="/dashboard"
        component={
          <Button onClick={() => netlifyIdentity.logout()}>
            Log Out {user.user_metadata.full_name}
          </Button>
        }
      />
    </Router>
  ) : (
    <Router>
      <PublicRoute path="/dashboard" />
    </Router>
  )
}

export default App

Use Authenticated Netlify Functions with Netlify Identity

fetch('/.netlify/functions/authenticatedFunc), {
    headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${localStorange.getItem('access_token'}`
    }
}

import fetch from 'isomorphic-unfetch' // switches between unfetch & node-fetch for client & server

export const handler = async (event, context) => {
  console.log('netlify function called')
  if (event.httpMethod !== 'GET') {
    return { statusCode: 405, body: 'Method Not Allowed' }
  }

  if (context.clientContext && !context.clientContext.identity) {
    return {
      statusCode: 500,
      body: JSON.stringify({
        message: 'No identity instance detected. Did you enable it?',
      }),
    }
  }
  const { identity, user } = context.clientContext

  try {
      // Call third-party APIs or ping your database. Example is using Medium API
    const resp = await fetch(
      'https://api.medium.com/v1/users/${userId}/publications'
    )
    if (!resp.ok) {
      return { statusCode: resp.status, body: resp.statusText }
    }
    const data = await resp.json()
    return {
      statusCode: 200,
      body: JSON.stringify({ identity, user, msg: data.value }),
    }
  } catch (err) {
    console.error(err)
    return { statusCode: 500, body: JSON.stringify({ msg: err.message }) }
  }

Further Reading