🔰 Using Gatsby CLI to setup project

Intro

Use Gatsby5 CLI for TypeScript project with MD|MDX syntax, Google Analytics, auto sitemap, manifest file, and GatsbyImage support.

Gatsby CLI setup

If you want to know the all course concepts, technologies and understand what kind of Node and npm versions you need, check the initial lesson - Course overview.

If you already read this article - jump into Gatsby5 | Tailwind | TypeScript | Cypress | jest and RTL template and check commits to understand the progress.

First of all we need to install Gatsby CLI globally. To achieve that just type in your IDE terminal following command: npm install -g gatsby-cli.

Creating a boilerplate project

If you'll be inside your empty Git repository, be sure that you are in root directory. Then you need to type: npm init gatsby -ts. It will start creation process and you need to answer some questions. Watch the GIF below to check what I've picked.

Let's describe the information that we provided to the creation script:

After these changes you should have following folders/files structure in IDE.

Removing the wrapping folder

As you probably noticed the application has been added inside the wrapping folder - in my case, it's called blog - the name that I typed during the script. This is frustrating to work with if you don't want to implement the monorepo. It's because providing support for additional tools like husky, Storybook, and many others will require from us additional work.

To check and understand what the hell monorepo is, check following 🌟 Dream stack for React dev article.

To avoid that we need to make our project structure flat. Just copy the content from blog directory (in your case it will be a different name) to root directory as I did in the GIF below:

Remember to close the IDE window before you do that. In addition, to make it faster, you may remove node_modules folder, and later when the project structure is flat - just open the project in IDE again and type npm i.

Really important! The Gatsby CLI created for us additional .git folder. So, before you make a copy to the root directory, make sure that you removed this additional folder.

The result of this small improvement will be a flat folders/files structure as in the image below:

Running the project

Now, we are able to run the project. To achieve that just type in your IDE terminal the following command: npm start. Application should be displayed with dummy Gatsby content on localhost:8000 URL. For me, it's looking like this:

The result

To get current result jump into Gatsby5 | Tailwind | TypeScript | Cypress | jest and RTL template and check commits to understand the progress.

Conclusions and next steps

We created a dummy Gatsby5 project with TypeScript configured. However, it's just the first step to something big! We still need to do a lot of stuff to make our project robust and to be prepared for future development challenges 👌!

In the next lesson, we'll add eslint, prettier, and husky to our project to achieve great developer experience in IDE. Go to 🌟 Adding Eslint with Prettier and Husky to project lesson to check.