Creating Static React application with Gatsby

Hello folks, In this article let us discuss how to create an amazingly fast static web site using React with Gatsby. Before diving into the topic, let us have a quick lookup on what is Gatsby and what it does.

Gatsby is an open source static website generator used to build static sites which come with amazingly fast page loads and lot of optimizations like data prefetching, code splitting, asset optimization, intelligent image loading etc. performed over the generated site by its internal code. Gatsby is React-based framework and uses webpack and GraphQL technologies behind the screen.

gatsbyjs.com

Setting up the environment

npm install -g gatsby-cli

Creating our First React application with Gatsby

The command for creating the new site from the starter :

gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]

Example:

gatsby new my-first-static-site https://github.com/gatsbyjs/gatsby-starter-hello-world

The above command will generate a Gatsby site built over React that displays “hello-world” message. To view the application, change the working directory and do

gatsby develop

this command will start a development server and we can view the site at http://localhost:8000/ in the browser.

Now let us look at the code generated for the starter command.

Generated Files
package.json

We can find the React component which renders the default message “Hello world!” in src/pages/index.js.

You can find gatsby-config.js file generated in our root folder. This gatsby-config.js file is a configuration file that holds the metadata information and the details of the plugins which are added to the project. There are thousands of built-in plugins available for the Gatsby and we can find the plugin list at https://www.gatsbyjs.com/plugins. Assume that we need to add a gatsby plugin to handle SASS files. We can achieve that by using the following command

npm install sass gatsby-plugin-sass

and also we need to update the plugin details in gatsby-config.js.

Once the site is developed, we can easily deploy the site by using the command

gatsby build

This command generates production-ready code with lot of optimizations and minification performed over the project. We can view the production site locally by running the command

gatsby serve

once the command got executed, we can view our production site at http://localhost:9000.

In this article, we have discussed how to generate static sites out of the simple React application using Gatsby and also discussed about the files generated by the Gatsby starters. Not only in React, static site generators are being seen as a way to build the web of the future. Gatsby is one among them which is evolving continuously and will definitely play a major role in front end development in near future.

References :

Developer, Anime Freak and a Tech Enthusiast.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store