How Gatsby works? Alternate to Gatsby …

Quick recap from the last post, I have mentioned about Whats is gatsby? and discussed gatsby features (For developers and organizations) I assume, that gave the good picture about gatsby to today's web development needs. Also, we have discussed React Vs Gatsby and the workflow of the page rendering process. At last, I started mentioning the coding aspects of styling components. In this post, we will look at the furthermore movement on coding and components as handier to the developer.

Pretty + Trendy ornament

I know the above picture is nowhere related to the Gatsby, But Pretty will become a more pretty when you start adding trendy Cosmetics(React) and Ornaments (Gatsby).

However, she is pretty :-)

Today I will walk you through the gatsby different layers and hybrid culture utilized by gatsby. As I mentioned in the previous post, if your react developer I would suggest them to dive into Gatsby at the earliest possible. Because it is a fantastic framework and provisioned hooks to build your application on top of react.

Gatsby's folder structure almost similar to react, and it introduces a few more value-added structures to the gatsby engine.

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

I have split the coding layers in the gatsby for 3 sections,

  1. Configurations (Core configuration and Plugin configurations)
  2. Components (Where it will represent the usage on react and gatsby integrated features)
  3. Data (How can we feed the data to the front end of the gatsby site?)

There are a couple of files that are present in the root directory of the gatsby, it will be automatically detected by gatsby engine.

Gatsby-config.js

It is the special file gatsby automatically detect for configurations. The configuration is the most important to any of the applications, that will help you to configure all the application related settings into a single place. In this file, most of the time we will be working around on the page for plugin configuration, plugin initiation, metadata information storage, and value-added styling options.

Gatsby-node.js

Gatsby will execute you each node of content by build and Webpack your content with the “Hot loading” feature. In between, what we see the sequence of execution and how it is being handled for any custom application will be mentioning in Gatsby-node.js. Moreover, it is a perfect place to create a page dynamically using data from the source.

From user experience, I have overhead around handling data and building pages in gatsby-node.js. One of the examples of a hook method can be used for page handling and creation. “createPages” is the hook method, where we will create the dynamic page using your feed data.

Gatsby-browser.js is another file, where you can keep all the configuration related to the browser information like scrolling functions, analytics data, and routes.

Routing is the most interesting area in any of the lightweight frameworks. The pages will be present in the src/pages folder, as soon as we create a page there gatsby has the in-built capability to create a route for us.

Components are mainly to reuse any of the functionality to certain places. It is a reputation of DRY (Don't Repeat Yourself), It is a common mistake of all the developer when they start as a fresher to write code, they will not realize they are repeating the code on many aspects. When they start refactoring the code, they will come to know about duplicate codes. That’s why we have handier the concept of components.

If you use the Gatsby, You will be happier than this lady…

Component-based approach, it is easy to maintain the components just using import and export keywords, even components all exist in react, but gatsby proxy the concept and introduced more even convenient to the developers

Each component can be easily called with an import statement as a simple way,

import Header from “../components/header”

<Header>You can embed the content here</Header>

If you see the above the line of code, I just created a folder in /src, which is called components where I have created the header component with banner and menu and sub-components. When you call the component, we kept the name as “Header”, that will be DOM object to call on the content. It will invoke the header component functionality.

Plugins

Plugins are more powerful and value-added to the development, they reduce a lot of efforts. Gatsby has thousands of plugins support for development. All the plugins are contributed by a large contribution community of gatsby. We can install the plugins using npm commands, all the plugins are stored under node packages.

When I developed the application, I experienced one of the powerful plugins to optimize the image based on the size and make it handier for the loading with lazy loading.

npm install --save gatsby-image

Gatsby Useful Resources

There are few resources are providing by Gatsby for application development, I hope that will make your life so easy on development and some part of marketing,

  1. Free templates from gatsby
  2. Gatsby Docker container for environments.
  3. Awesome starter templates
  4. You can submit your site for the showcase (Obviously you will get a free promotion)

It has 3 ways of data consumption to the platform. CMS, Markdown, and Data source formats like JSON, CSV, and YAML. CMS data consumption is the most prompted way of using when it is come to easy administration and real-time data push from the administrators. Because it has a controlled interface to feed the data to the front end. The most interesting fact about CMS integration, If you use gatsby cloud it will be provisioned auto integration facility of a couple of CMS (ContentFul, DatOCMS, SANITY, and Cosmic). Still, it has other CMS integration (Drupal, Agility, Contentstack, Kontent, and Strapi) facility, unfortunately, those are little manual intervention to integration (Note: It is very few steps to integrate)

Another data consumption method is the Markdown format. It is an easy representation of HTML, in the form of lightweight HTML format. Mostly markdown will be used to represent the documentation of source or installation. Recently I have noticed, most of the online tutorials also started adopting the HTML presentation in the form of Markdown. Markdown file will be denoted in the *.md extension.

The third data consumption format of content formats like JSON, YAML, and CSV.

Data Connector for Gatsby

GraphQL is the query language, it didn’t tie to any specific database or storage engine and instead backend by code and data. It is developed by Facebook and open-sourced. Now it is maintained by a large community.

Source from howtographql

GraphQL will be in-built with your gatsby application package of installation. After you created the new project in Gatsby, using the below command we need to run the application in development mode.

gatsby develop

This command will help you to get the default application hosted in the localhost port 8000, this port is default port for gatsby application. If you wish to change the port to run, you can change the port as below command.

gatsby develop -p 8082

As soon as application started in the localhost, it will provide you the hosted application URL and GraphQL interface URL as below,

http://localhost:8000/___graphql

In this interface, you can build our query to retrieve the data from the data source. Moreover, props will help you to pass the data to the pages. If you configure the entity structure properly gatsby-config.js. It will serve the data through GraphQL mechanism to get the data on the page using GraphQL query, which will be connected with other content providing medium like MarkDown, JSON, Headless CMS API.

Sample Query on GraphQL,

export const query = graphql`
query {
site {
siteMetadata {
title
}
}
}
`

In the above example, we are reinitiating the structure of graphQL content to retrieve it on a particular page. This property value can be feed on gatsby-config.js.

Gatsby has a couple of hosting providers tie-up. Netlify, AWS Amplify, GitHub Pages, Surge.sh, Aerobatic, Vercel.

Is that mean, we can host the Gatsby application only on those hosting providers? I believe I have answered this question in the previous post.

Other than these hosting providers, we have other free options are Firebase, nodechef, roast.io

I personally experienced on Firebase and Surge.sh. Firebase is one of the free hosting service provided by Google. It has many features in-built actually, it is free for initial hosting, it has bandwidth for each component usage when it exceeds the limit for a free subscription, will be charged for you (Pay-as you go model).

Surge.sh is one of the fastest hosting the world, not on the site performance (Unfortunately I didn’t use any realtime site on the surge.sh). When I am saying the fastest hosting, I mean about steps to host the site is very fast and handier within a couple of minutes.

There are 100’s of static site generators that are there in the market. The static site generator is the most powerful and providing the live experience to the end-user.

Here are other famous frameworks, of course, they are a competitor for the Gatsby,

Next.js

It is a javascript framework, almost all the functionality of the gatsby is similar to Next.js, only it differs on the page representation. Gatsby rendering the page on build time. But next.js will be incremental static generation, which will be value-added to the framework.

Hugo

It is built on the top of the Go Language. This language is designed by Google employee “Robert Griesemer”. It is there in the industry for more than 10 years. The baseline of this language is C++.

Jekyll

It is built on top of Ruby. Ruby has a special command-line interface called a gem. So Jekyll also adopts the same culture installing their plugins for use.

That’s it finally we come to the end, I hope everyone enjoyed the post. So gatsby is definitely an opted framework for the applications planned on React. Moreover, technology is pretty good, but we cannot take decisions only on technology, the main aspect is business needs. Thanks a lot for reading my post.

Please feel free to connect with me for further queries. I will catch you in another post soon.

Architect | Tech Blogger | Corporate Trainer | My own blog developersnacks.com | https://www.linkedin.com/in/gopinath-manimayan-5a2336a1/