(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.js
module.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.yml
backend:
  name: git-gateway
  branch: master
media_folder: static/img
public_folder: /img
collections:
  - 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.js
module.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.js
module.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.js
module.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