Introduction

So what is GatsbyJS? Founded in 2015, GatsbyJS is a ReactJS based batteries included static site generator.

The first beta shipped in June 2017 and has been gaining traction since.

GatsbyJS supports CSS modules, multiple data sources, routing, hot module replacement, code and data splitting out of the box.

For the data layer, it leverages on GraphQL for query extraction and execution.

What is GraphQL?

GraphQL is a query language for APIs that was developed internally by Facebook in 2012.

One of the benefits of using GraphQL as compared to Rest APIs is performance. Whenever you send a GraphQL query, you get exactly what was requested. Minimal overheads. Nothing more, nothing less.

Unlike Rest APIs, you can request for all the application data in a single request instead of loading from multiple URLs.

There is a graphical interactive in-browser GraphQL IDE call GraphiQL that allows developers to explore and structure their queries effortlessly.

Why GatsbyJS?

It loads fast, like really fast. The authors termed it -- "Blazing Fast".

In GatsbyJS, code optimisation and performance are baked in. GatsbyJS prefetches webpage resources and loads critical files to improve load times.

A healthy community with regular contributors, GatsbyJS has 695 plugins and 120 starter templates available at the time of writing.

Developing on GatsbyJS is a truly enjoyable experience. Let's discover why this is the best all-around framework to build JAMstack applications, bar none.

Requirements

• A basic understanding of ReactJS and GraphQL
• NodeJS and npm

What we will be building

In this tutorial, we will

• build a simple random user profile listing by pulling data from the Random User Generator API.
• use GatsbyJS's routing feature to show details about a user.
• include a search function to filter user profiles.
• style the interface with CSS Modules.

Initial Setup

1. Install Node.js. Node.js comes with npm aka Node Package Manager and is required to install GatsbyJS packages

2. Install Git to download and install starter templates.

   • Install Git on Mac OS X
   • Install Git on Windows
   • Install Git on Linux
3. GatsbyJS removes the complexity of setting up projects with its huge library of starter templates. We will be using the Hello World starter template for this application. Run this command from the terminal.

$ npx gatsby new random-user https://github.com/gatsbyjs/gatsby-starter-hello-world

With this one-liner, GatsbyJS executed an npm package binary without installing it locally.

It then created a new folder and placed the codes for the Hello World starter template inside it. (We named the folder "random-user" for the purpose of this tutorial.)

The current directory structure will look similar to the following.

├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── src
├── static
└── yarn.lock

Let's preview our starter site.

$ cd random user
$ npm run develop

Visit http://localhost:8000 from your browser.

You may have noticed an additional URL http://localhost:8000/___graphql shown in the terminal window.

That is the URL to access the GraphiQL IDE. We will explore this feature in part 2 of the tutorial.