Building Websites with React and GatsbyJs

Creating a gatsby project is easy since you can use their wonderful CLI.

Gatsby CLI

In order to install the CLI you will need nodejs and npm/yarn on your computer. If you are a npm person you will need to type the following in your terminal

npm install -g gatsby-cli

And if you like yarn instead type this:

yarn add global gatsby-cli

Once the installation has finished you can check if the gatsby cli is working ok with the following command

gatsby --version
Gatsby CLI version: 2.7.7

Creating a new Gatsby Project

Now you can create a new gatsby project using the new command, this command takes 2 parameters, the first one is the name of your project and the second one is the template that will used as a base for the initial files.

gatsby new learning-gatsby https://github.com/gatsbyjs/gatsby-starter-hello-world

with the above command you are telling gatsby: "Hey, please create a new project that I would love to call "learning-gatsby" and please use the hello-world template". According the documentation it is a good template if you are just starting with gatsbyjs.

This step can take a longer time since it will clone the project and install automatically all the project's dependencies.

Once the whole process is done you can enter to the project folder and start the development server to see how the website looks.

Starting the Development Server

The hello-world template already comes with a script to start the development server, the name of the script is develop.
That means you can start a gatsby development server typing in the terminal

npm run develop

and if you are using yarn

yarn develop

This is going to do a lot of work but once you see in your terminal a message like this

You can now view gatsby-starter-hello-world in the browser.
http://localhost:8000/

you can open your browser and go to http://localhost:8000/ and you will see the hello world.

Also you can see the graphiql UI in http://localhost:8000/___graphql.

Oh yeah one of the reasons gatsby is so cool is graphql, but that's information for the next post.