cft
Become a CreatorSign inGet Started

How Gatsby works?

In this post, we’ll explain how Gatsby’s lifecycle works and what the Gatsby particular files are for.


user

Mansoor Ahmed

3 months ago | 3 min read
Follow

gatsby-works-m7fjm

Introduction

Gatsby is a static site generator and web apps. It is a react-based open-source framework. As we must know about how Gatsby Works? It is quite appropriate if;

  • We are building portfolio sites
  • Blogs
  • Company home pages.

Below are two modes in Gatsby which are being used for compiling a site.

  1. Develop: In develop mode, we run with the gatsby develop command
  2. Build: In build mode, we run with gatsby build

Gatsby enables developers to speedy fetch and renders content from nearly any content or data source. We can build sites with Gatsby;

  • A single stack
  • No matter where our content lives.
  • This allows us to take advantage of the rich content workflows of our CMS.
  • Therefore, it would not be locked into a CMS-specific development ecosystem.
  • Fail to remember code freezes
  • Gatsby decouples content and data alteration from the development workflow.

In this post, we’ll explain how Gatsby’s lifecycle works and what the Gatsby particular files are for.

Description

Gatsby pulls data from sources we give and generates a website or app for us. It needs Node to be installed to run the Bootstrap and Build sequences. Gatsby utilizes Webpack to build and start a development server amongst other things under the hood. Gatsby has three phases

  1. Gathering data sources
  2. Building
  3. Deploying

Gathering phase

Building phase

  • Once data is gathered then we may access it from source code with the help of graphql.
  • We  may not mutate the existing data

Deploying phase

  • We can build the app after the development.
  • We may host that build files in any static web host sites like;
  • Amazon S3
  • Netlify
  • Github pages
  • now. sh and many more.

Gatsby’s lifecycle

The below three sequences make up the Gatsby lifecycle.

  1. Bootstrap
  2. Build
  3. Browser

Main features

  • Supports Reactjs: Gatsby supports Reactjs the would help us to build reusable components and make things easier to control.
  • Webpack: This will help to create minified and optimized bundles.
  • SCSS and CSS-in-JS:  Gatsby has support for SCSS, CSS-in-JavaScript libraries, allowing us to manage styles better.
  • Responsive images: Resizing images consisted of devices.
  • More than 600 Gatsby plugins: There are many gatsby plugins available for data sources/responsive-images/offline support/Mdx and analytics etc.
  • Supports react and npm packages: We may install any npm package and can use it in the app.
  • GraphQL: Gatsby gathers data from data sources and makes it available through GraphQL. The data sources could be anything databases/json/XML/wordpress or text files etc.
  • Gives a Smoother experience to the user:  It would add smoothness to the app with its features and aims at full app-like experience borrowing from PWA.

Gatsby specific files

gatsby-config.js

  • A place to put all the site configurations, for example, plugins, metadata, and polyfills.
  • This file is the blueprint of our application.
  •  gatsby-config.js is the initial file to be read and validated when we run $ gatsby develop or $ gatsby build

gatsby-node.js

  • Gatsby runs a Node process when we develop or build the website
  • It uses Webpack under the hood to spin up a development server with hot reloading.
  • Gatsby would load plugins during the Node process.
  • It will analyze the cache, bootstrap the website, and build the data schema.
  • It would similarly, create pages, and deal with different configurations and data management.
  • Everything that happens during the Bootstrap and Builds sequences observes in the gatsby-node.js.
  • It’s the right place to create pages dynamically consisting of data from a source plugin.

gatsby-ssr.js

  • Thinking about Server Side Rendering means we think of a server that takes in requests.
  • That dynamically builds pages and sends them to the client.
  • Gatsby doesn’t execute that. Though it performs on server-side render.
  • It creates all the pages during build time.
  • Gatsby-ssr.js enables developers to hook into that lifecycle.
  • Most use cases belong to injecting CSS, HTML, or Redux state information into the created output.

gatsby-browser.js

  • Gatsbybeing a static site, loads a dynamic application after the first load.
  • That means we get the advantages of a static site in a web application.
  • gatsby-browser.js gives convenient hooks to deal with app loading.
  • It also provides route updates, service worker updates, scroll positioning, and many more.
  • Each thing, which happens after the static site has loaded may be hooked in gatsby-browser.js.

Getting started with gatsby

Pre-requisites

Installing gatsby cli

npm i -g gatsby-cli

  • We should understand about Gatsby starters before creating a site.
  • Starters are just boilerplates.
  • There are hundreds of boilerplates or starters available from gatsby’s official site.
  • We can select Gatsby starter as;

Creating a new gatsby site from starter

gatsby new {name_of_your_site} {starter-repo-link}

  • When gatsby new is completed then run the below commands

cd {name_of_your_site}

gatsby develop

  • The project structure would be like this:

/

|-- /.cache

|-- /plugins

|-- /public

|-- /src

|-- /pages

|-- /static

|-- gatsby-config.js

|-- gatsby-node.js

|-- gatsby-browser.js

  • At last, now we may check our site at localhost:8000.

For more details visit:  https://www.technologiesinindustry4.com



Upvote


user
Created by

Mansoor Ahmed

Follow

Technologies in industry 4.0

Chemical Engineer, web developer and Tech writer


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles