(React) Manually Setting up a Gatsby Project with Typescript and Netlify CMS
In this article, I will show you how to manually set up a Gatsby project with Typescript and Netlifyy CMS without the gatsby-starter-netlify-cms starter.
Prerequisites
- You have already installed
gatsby-cli
1. Setting up a Gatsby project
First, generate a brand new gatsby project with the following command.
gatsby new project-name
2. Add Typescript stuff
Next, add gatsby’s typescript plugin and linting stuff into the gatsby project.
// Move into the project directory
cd project-name// Add typescript plugin
yarn add gatsby-plugin-typescript// Add typescript itself and linting stuff
yarn add -D typescript gatsby-plugin-tslint tslint-loader tslint
After installing the dependencies, you need to specify the plugins in the gatsby-config.js
file.
// gatsby-config.jsmodule.exports = {
...,
plugins: [
...,
`gatsby-plugin-typescript`,
`gatsby-plugin-tslint`
]
}
Also, initialize the project as a tslint project to activate tslint for the project.
// Initialize tslint
node_modules/tslint/bin/tslint --init
3. Add Netlify CMS
Now, add the Netlify CMS stuff with the following command.
// Add netlify cms stuff
yarn add netlify-cms-app gatsby-plugin-netlify-cms
Create the file named config.yml
to specify the configurations for Netlify CMS. This file should be located in the static/admin
directory. If it does not exist, just manually create the directory inside the project.
Although I don’t explain the configuration for config.yml
in detail, it will look something like below. Go to check the official documentation from Netlify CMS for more details.
// config.ymlbackend:
name: git-gateway
branch: mastermedia_folder: static/img
public_folder: /imgcollections:
- name: "blog"
label: "Blog"
folder: "content/blog"
create: true
slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
editor:
preview: false
fields:
- { label: "Title", name: "title", widget: "string" }
- { label: "Publish Date", name: "date", widget: "datetime" }
- { label: "Description", name: "description", widget: "string" }
- { label: "Body", name: "body", widget: "markdown" }
Also, don’t forget to add the plugin to your gatsby-config.js
.
// gatsby-config.jsmodule.exports = {
plugins: [
...,
`gatsby-plugin-netlify-cms`,
],
}
4. Add necessary type definition files for typescript
In order to avoid typescript warnings, we need to add type definition files. If you are following the steps in this article, adding the following files should be enough for now.
yarn add -D @types/react-dom @types/react-helmet
5. Change the file extensions
Finally, change the file extensions from .js
to .ts
or .tsx
and you should be good to go.
6. (Optional) Add styled-components support
Additionally, you can add styled-components support to the project if you like.
yarn add gatsby-plugin-styled-components styled-components babel-plugin-styled-components @types/styled-components
After installing the dependencies, add the plugin to your gatsby-config.js
.
// gatsby-config.jsmodule.exports = {
plugins: [
...,
`gatsby-plugin-styled-components`,
],
}
6.5. (Optional) Add sass support
If you prefer classic Sass over styled-components, you can add the following dependencies.
yarn add node-sass gatsby-plugin-sass
Then, add the plugin to your gatsby-config.js
.
// gatsby-config.jsmodule.exports = {
plugins: [
...,
`gatsby-plugin-sass`,
],
}
That’s everything for this article. Happy coding!
References:
- Gatsby official documentation: gatsby-plugin-typescript
https://www.gatsbyjs.org/packages/gatsby-plugin-typescript/?=typesc - Gatsby official documentation: gatsby-plugin-netlify-cms
https://www.gatsbyjs.org/packages/gatsby-plugin-netlify-cms/ - Gatsby official documentation: Using Sass in Gatsby
https://www.gatsbyjs.org/docs/sass/ - Gatsby official documentation: Styled Components
https://www.gatsbyjs.org/docs/styled-components/ - Netlify CMS official documentation: Gatsby:
https://www.netlifycms.org/docs/gatsby/ - How to lint Typescript in a Gatsby project
https://medium.com/@thetrevorharmon/how-to-lint-typescript-with-gatsby-1e2cbd08b73