DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
jmau111⭐
jmau111⭐

Posted on • Updated on • Originally published at blog.julien-maury.dev

Another Gatsby cheat sheet

Concepts

Gatsby is a phenomenal framework that abstracts cutting edge technologies.

React hydration
Gatsby uses React DOM server-side APIs to generate static HTML contents and those pages eventually get rehydrated into a React application. Some of the same JavaScript code used to generate Gatsby pages is reused in the browser where DOM APIs like window are available.

GraphQL
Gatsby uses this query language to make data available in the browser when needed by your components.

Webpack
Gatsby uses this JavaScript module bundler.

Routing
The mechanism for loading the correct content in a website or app based on a network request - usually a URL. Gatsby creates paths to access content and handles dynamic routing with content prefetching under the hood.

Plugins
Node.js packages that implement Gatsby APIs to add extra functionality to a Gatsby site.

Themes
Themes are a particular type of plugins with their own gatsby-config.js.

Theme shadowing
You can override components, objects, and anything else in any theme’s src directory. You'll find more details here.

v2 to v3

V3 is a major version that comes with breaking changes.

Update Gatsby
yarn add gatsby@latest

Update all other dependencies
yarn upgrade-interactive --latest

The official guide
The Gatsby community is crazy good at writing documentation. You can read the migration guide

Core files

gatsby-config.js
The main configuration file that contains:
  • the list of plugins and themes (NPM packages, local plugins, etc)
  • the siteMetadata object
  • some mappings

gatsby-node.js
Gatsby loads that file after the plugins, the cache, the bootstrap, and the GraphQL scheme. You get access to the CreatePages API to add your custom nodes (~ URLs).

gatsby-ssr.js
That file controls a special step, when Gatsby handles by itself the equivalent of a node server (~ compilation) to transform React code into static HTML assets. You get access to SSR APIs.

gatsby-browser.js
Browser APIs let you respond to Gatsby-specific events within the browser. This is where you can interact with the client side.

Plugins

Gatsby has a strong ecosystem with helpful plugins.

Adding a plugin
Install the node package and open the gatsby-config.js file:
module.exports = {
  siteMetadata: {},
  plugins: ["gatsby-plugin-image"],
}
Enter fullscreen mode Exit fullscreen mode

Note that you can have additional lines for the plugin configuration


Must-have plugins

There's a plugin for Google Analytics if you need too.


Best plugins for alternative approaches
Use this list with caution and check the compatibility with the v3 before.

CLI

Create the next big thing with Gatsby
Start with gatsby new the-next-big-thing

Start a new dev server
Run gatsby develop -o, the -o option opens the site in the browser as a new tab.

Delete the cache and the public folder
Run gatsby clean.

Build the site
Run gatsby build.

Serve the build
Run gatsby serve -o, the -o option opens the site in the browser as a new tab.

Test the site locally on a real mobile phone
Run gatsby develop -H 0.0.0.0 -p 8000

Flags

You can add flags in your config to customize your dev experience:

// In your gatsby-config.js
module.exports = {
  flags: {
    FAST_DEV: true,
  },
}
Enter fullscreen mode Exit fullscreen mode

PRESERVE_WEBPACK_CACHE
to keep webpack’s cache when changing gatsby-node.js & gatsby-config.js files because you rarely need to delete it

FAST_DEV
to improve dev server start time

DEV_SSR
to detect SSR bugs and fix them without having to build

QUERY_ON_DEMAND
to only run queries when needed instead of running all queries upfront

LAZY_IMAGES
to skip process images during development until there’s an explicit request for them from the browser

PRESERVE_FILE_DOWNLOAD_CACHE
to keep the downloaded files cache when changing gatsby-node.js & gatsby-config.js files because, again, you rarely need to re-download them

FAST_REFRESH
to use React Fast Refresh instead of the legacy react-hot-loader for instantaneous feedback

PARALLEL_SOURCING
to run all source plugins at the same time instead of serially

FUNCTIONS
Serverless functions for Gatsby cloud

Source from CMS

Gastby can source from various CMS and APIs.

WordPress

Gatsby can connect to WordPress through GraphQL to query contents.

See Gatsby demo v3 - WordPress. Read the installation guide carefully.

Top comments (3)

Collapse
 
grahamthedev profile image
GrahamTheDev

Loads of useful information here!

May I make a suggestion? Use the <dl>, <dt> and <dd> elements to create lists like this instead of spoilers.

They auto format nicely, are easier to read and are semantically correct!

Example

React hydration

Gatsby uses React DOM server-side APIs to generate static HTML contents and those pages eventually get rehydrated into a React application.

Some of the same JavaScript code used to generate Gatsby pages is reused in the browser where DOM APIs like window are available.

GraphQL
Gatsby uses this query language to make data available in the browser when needed by your components.

It looks way better! Other than that, great article as I said! ❀

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
grahamthedev profile image
GrahamTheDev

It isn't bad, just <dl> is better. Plus it makes the article easier to scan read without having to keep clicking to view terms etc.

Enjoying the series! 🀎

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›