The Ultimate Guide to Gatsby.js

The rate at which new JavaScript frameworks appear is a running joke with web developers. Odds are you’ve heard of Gatsby.js. You’ve probably heard of at least a dozen other frameworks that were born in the past decade. All in the never-ending race for faster, prettier, and more secure websites and web apps.

Gatsby.js is a fairly new player in the arena, promising to let you create lightning-fast web experiences that integrate your favorite services and content. Can it really live up to the promise?

In this article, we’ll try and answer that question. We’ll review the components and benefits of Gatsby.js, and go over the steps of installing Gatsby.js and using it to create, develop, and deploy a Gatsby.js web application.

What is Gatsby.js?

Gatsby is a React-based framework for static site generation built on top of JAMStack and powered by GraphQL. It was born in May 2015 as a simple way to build a website or an app with React. 

In early 2018, Gatsby core contributors (including creator & lead maintainer Kyle Mathews) formed Gatsby Inc to help website development teams build CMS-powered websites and apps with the framework.

Gatsby aims to make development easy even for those not familiar with React or GraphQL. It does so by having robust documentation and a plethora of detailed tutorials. Any experienced developer should have an easy time picking up Gatsby and learning how all the components work through it. This makes Gatsby.js a great entry point to static web development.

(Source: What is Gatsby and why it’s time to get on the hype train) 

JAMStack

JAM stands for JavaScript, APIs, and Markup. It is a combination of preexisting technologies brought together by the needs of modern web development.

JAMStack is the core architecture used by many static site developers. The principles of pre-rendering and decoupling are core and are meant to free developers from the likes of traditional CMS. 

JavaScript enables fetching frontend data using external APIs. The APIs are also used during website generation to build the static website using content served by cloud services. Markup is the HTML, the static part of the website, which allows it to load much faster than dynamic websites.

ReactJS

React is a JavaScript library designed to enable component-based UI development. It is all about reusable code and ready-made UI elements. React is what makes Gatsby’s UX feel dynamic, while the site remains static.

GraphQL

A syntax for querying data from databases, cloud services, or files. The power in GraphQL comes from its granularity. When making the request you define only and exactly what you need. This is done by having a smart endpoint to query using GraphQL, rather than several dump endpoints that always return the same structure of data.

Before we dive into the ins and outs of Gatsby.js, it’s worth understanding what a static site generator is, and what benefits it can bring.

Static vs Dynamic

What are static websites?

A static website is one that simply serves plain text files, without any calculation as soon as the user makes a request.

When you make a “Hello World” static website, it would simply be an HTML file with the words “Hello World” inside some HTML tags. Back in the early days of the Internet, each page on a static site had its own HTML file, and you would link between them with hyperlinks. 

Sites can still be built this way, but a more modern approach uses JavaScript components as menus to transition between pages. 

Static sites built manually are fine for websites that don’t change much over time, but even then – any changes would need to be made manually in HTML files.

What are dynamic websites?

A dynamic website is one backed by server logic that produces the website on demand based on user actions.

A “Hello World” of a dynamic website would be a servlet or PHP file that would return the equivalent of a static “Hello World” when called upon. 

The HTML file that is produced will be created by the server every time a user makes a request to view the page. In the case of a “Hello World” site, this is not a big resource drain. And yet, it is easy to see that producing this file every time it is called is wasteful. 

Dynamic sites are best employed when the pages are highly dynamic and built around logic or data that changes frequently. A cryptocurrency marketplace is a good example of a site that has to be dynamic.

What are static website generators?

Static website generators are midway between completely static websites and dynamic ones. They allow sites to be updated more frequently and easily than static websites by querying APIs for the dynamic data and building static websites from it. 

A common dynamic website framework is WordPress. Each site is backed by a dynamic server querying a database hooked into a CMS. Every time a user wishes to access a blog post, the server generates the page (with some caching) and serves it to the user. 

A static website would instead generate the page during build time and create a static version to be served. This means that every time the data changes in the CMS the site needs to be rebuilt and re-uploaded to the server, a process that can be made automatic with a CI/CD pipeline.

Dynamic vs static: which is right for you?

There are multiple variables to consider when choosing the architecture of a website or web application. While many of them are individual, some of the criteria for choice are common to most cases.

• Performance – Plain HTML pages, even with Javascript, load much faster than dynamic web pages
• Security – A static website generator compiles the data from a CMS (usually stored on a third-party service) into static files, which means that the server doesn’t have any write access to any data that can be lost. At worst, the static files may be overwritten or deleted, which could be easily fixed by re-running the site build process and uploading a fresh copy of the website.
• Cost – Hosting a static site is much cheaper than hosting a backed server. Dynamic sites require a backend server that can run a dynamic language such as PHP or Java and databases. Static sites only require serving text files, and any processing is done on the client’s machine.
• SEO – With faster loading times and static pages to index, statically generated pages get an edge over dynamic ones.

If static websites meet your needs then static website generators are the best way to maintain them. But with all the options out there, why should you pick Gatsby?

3 reasons to build your web app with Gatsby.js

If you have already decided that a static website generator is what you need, then Gatsby is worth checking out. While it may not be the most popular (yet), it is very much loved by those who use it. The advantages of Gatsby over other static website generators stems largely from its base in React and GraphQL, but not only.

• Gatsby creates Progressive Web Applications, mimicking native mobile applications easily with ReactJS. It can do more than just generate static sites, it can be used to make progressive web applications. Gatsby will make as much of the website as possible static, but it can leverage ReactJS to make dynamic web applications.
• A huge library of plugins supported by an active community with over 2600 plugins listed at the time of writing
• Native integration with GitHub and Netlify, allowing easy access to the benefits of CI/CD

(Source: Decoupled Drupal 8 and Gatsby.JS: the high-speed duet)

It is important to note that Gatsby is not the easiest platform on which to build a web application. Some programming knowledge is needed. To develop a webapp in Gatsby, you need to be prepared to learn as you go.

Getting started with Gatsby.js

Now that you have gotten to know Gatsby and its advantages, we can get started with setting it up and making it work.

Prerequisites

Knowledge-wise, it would be beneficial to be familiar with ReactJS, but if you have a knack for programming, it should not be complicated to pick up the syntax regardless of your knowledge base. As long as you’re willing to follow tutorials to pick up the nuances, you should be good.

Understanding version control systems and CI/CD workflows will also help you get your website up and running, although again, you could learn this as you go. Netlify has a resource for explaining Gatsby workflow.

To install GatsbyJS, you’re going to need a package manager. Luckily, NodeJS, another prerequisite comes with npm. While you can develop without Git, it is not recommended, as Git is a core part of the process of deploying your generated site. So best install Git as well.

You are also going to need a code editor. VSCode is what Gatsby themselves recommend. It integrates well into a unified development environment. You can also enhance your experience with some plugins.

Setting up Gatsby.js

Using Gatsby is all about CLI, so fire up your terminal (Git Bash would do) and start typing.

That’s it. Gatsby is ready to work for you.

How to create a new Gatsby.js site

Creating your boilerplate web application is as simple as installing gatsby:

You could also make an empty web application, which will run you through a setup:

This would be similar to creating a site in React:

This will set up a simple website as possible, but you can also use other templates to generate your site.

For example, if you wanted to make a blog, you could use the gatsby starter blog by typing:

Note that the name in square brackets is the local name of your project.

How to develop your website with Gatsby.js

To view your website you will want to use the command:

Once done, you will able to access your website locally by accessing:

This will be available as long as your server is running. If you wish to stop it, go back to the terminal and hit ctrl+c. You can always start it back up using gatsby develop.

Next, you will likely want to install VSCode so you can start editing your website.

How to build and deploy a Gastby.js webapp on a web server

Building your gatsby website is against as simple is entering the command into your terminal

This is fine for when you want to test your build and manually upload your generated site onto your server. But deploying Gatsby generated sites can be even easier than that. If you’re using a service like Netlify or Gatsby Cloud, the service can do a cloud build for you every time you push your changes to Git.

Get great with Gatsby

Gatsby.js is a great choice for a static website generator employing JAMstack. The simplicity and general accessibility of Gatsby.js, combined with rich documentation? Are probably the reason why it is one of the most loved web frameworks around, according to StackOverFlow, with over 60% of respondents proudly announcing their love for Gatsby.

From here, you can continue to play and test things with the website we created. Alternatively, you may want to look into more in-depth guides and tutorials to go beyond the basics we’ve covered in this post.