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.
Setting up the environment
Gatsby is built with Node Js and also uses Git behind the scenes to download and install the required files for the starter site. We need to have Node.js version 12.13.0 or higher in order to run the Gatsby and need to install Git as a prerequisite. We also need Gatsby CLI in order to create new Gatsby-powered sites quickly and to run the commands for developing Gatsby sites. To install Gatsby CLI globally run the following command
npm install -g gatsby-cli
Creating our First React application with Gatsby
Once the Gatsby CLI is installed, we can easily create Gatsby site by downloading the starters available in the Git.
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.
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.
