Setting up Gatsby project

Readme.md

Setting up Gatsby project

Starter 📦

If you're new to Gatsby, it's the best to pick some already configured starter.

I personally have used this one: contentful/starter-gatsby-blog made by guys from contentful, includes contentful, react-helmet, sharp

But if I had to do this one more time I would try this one: watarouguchi/gatsby-starter-typescript-contentful because it includes much more things like:

• TypeScript
• Contentful
• Supports Contentful Rich Text
• Prettier & ESLint & StyleLint to format & check the code
• Husky & lint-staged to automate checking

Or try searching for some other starter: gatsby starters

Plugins / Libraries 🔌

After selecting your starter you should think about picking up some useful plugins. First check out gatsby-config.js and package.json what plugins you actually have to no install them twice. Gatsby made it very easy to extend your project with plugins, but some of them unfortunately requires a little bit more work or knowledge.

1. Pick a plugin: gatsby plugins
2. Read and follow plugin docs about installation in gatsby

In most situations it would be enough but sometimes there are plugins that have problems with each other, For example I have encountered problems with: SASS & Tailwind, PostCSS & Storybook, there are some articles how to configure them properly but those didn't work for me actually. Keep in mind that there were at least few versions of the plugin, few versions of the other plugin, few versions of gatsby... babel... webpack... npm... node... and probably few other things that have impact on this.

Here is the list of the gatsby plugins that might be useful in most projects:

• gatsby-plugin-react-helmet
• gatsby-plugin-robots-txt
• gatsby-plugin-sitemap
• gatsby-plugin-smoothscroll
• gatsby-plugin-sharp
• gatsby-plugin-image
• gatsby-plugin-manifest
• gatsby-plugin-offline
• gatsby-plugin-module-resolver
• gatsby-plugin-typegen

It depends on you if you want techs/libs like: Typescript, SASS, Storybook, Tailwind etc. so I didn't put those there.

Configure 🔧

After you've installed all the plugins and solved all problems, now it's time to configure properly.

• Fill in necessary .env values (most probably CMS keys)
• Fill site data in gatsby-config.js

siteMetadata: {
	title: 'YOUR-APP-TITLE', siteUrl: 'http://YOUR-SITE-URL.com',
},

• Configure app fonts, most probably in fonts.css file
• Add app favicon fav.ico / fav.png
• Set name and description in package.json
• Read through the configuration options of each plugin and configure accordingly (Tailwind, SASS, typescript, eslint, etc..)

Encountering problems 🧨

If your installation process doesn't go smooth as it should and you encounter some errors.

• Always do gatsby clean & gatsby develop first
• It's worth adding gatsby keyword when googling
• Changing plugin version helps a lot
• Order of plugins in gatsby-config.js matters
• Check your plugin config

I've encountered some problem with core-js changing initial "corejs": "^2.1.*" to "corejs": "^3.1.*" in .babelrc solved it for me.

Another problem was with building app on Netlify changing initial node version 13.13.0 to 12.18.3 in .nvmrc solved it.