Getting Started with Gatsby

#gatsby #javascript #typescript #webdev

Gatsby is react-based open source framework and fast static websites generator. It allows to create static HTML at build time and gives the browser a complete page.
Gatsby uses preload to speed up loading of resources required by the page: all the necessary CSS , data and its core JavaScript needed to run the page and starts prefetching all links on the page. Also uses code splitting during compilation in a way that WEBPACK imports the dependencies on separate bundles.

Gatsby vs NextJs vs create-react-app

The choice of the framework depends on the project itself.

Gatsby: Static HTML and can be used when you need good SEO and you don't have frequent data updates
NextJs: Server Side rendering if you need good SEO and data is updating frequently exp: facebook
CRA: Client side rendering when you don't need good SEO exp: private dashboards

Getting Started on Gatsby:

Install Global CLI:

npm install -g gatsby-cli

Create new Site:

gatsby new my-gatsby-app

Start development server:

gatsby develop

Gatsby project Structure

Once you create you Gatsby application you will find this structure of the project:

|-- /.cache
|-- /plugins
|-- /public
|-- /src
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js

src folder: This directory will contain all of the code related to what you will see on the frontend of your site (what you see in the browser), like your site header, or a page template. “Src” is a convention for “source code”.
- pages: become pages automatically with paths based on their file name
- templates: Contains templates for programmatically creating pages.
- html: need to be modified if you want to insert custom HTML into the or of each page on your site
static: it will not be processed by webpack.
gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc.
gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
gatsby-ssr.js: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.
gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.