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.
The answers to create a project
Let's describe the information that we provided to the creation script:
- we provided folder and project name,
- we selected the TypeScript template,
- we skipped the CMS usage - you may select something if you want,
- we selected styling engine as PostCSS - it will be required later for Tailwind setup,
- we selected the Google Analytics setup, the MD | MDX files support to create pages, the automatic creation of site map files, the automatic creation of manifest file and support for responsive images in Gatsby.
After these changes you should have following folders/files structure in IDE.
Folders and files structure
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:
The project is flat now!
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:
We are ready to go!
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:
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.
- 1. Introduction
- 2. Creating project