A Few Things I Do Every Time I Start A New Gatsby Site

#gatsby #javascript #react #npm

I'm a big fan of Gatsby.js. It powers my blog and a my other random sites. I've been trying our some starters recently -- trying out TinaCMS and to display my dev.to posts on my own domain.

I started keeping a list of what I do every time I start a Gatsby site, so I'll remember next time, and thought I would share.

Upgrade All Of The Dependencies

There are so many cool Gatsby starters out there. It makes starting up a site fairly painless and saves a ton of time. Before I start working with a starter, I like to set all of the dependencies to the latest versions. I use my favorite yarn command for this:

yarn upgrade-interactive --latest

This might break everything. I'd like to know early on if using a starter is going to force me to stick with an out of date version of Gatsby, React, etc or take work to update.

Use Yarn

I prefer yarn to npm. I run a find and replace in package.json for "npm run" and replace it with "yarn". I also delete package.lock.

Add A Language Attribute

When I look at a demo of a Gatsby starter, I always use the aXe accessibility tester Chrome extension to make sure I'm not going to end up with a ton of bugs to fix in the generated HTML. Almost all the time, I see this violation:

<html> element must have a lang attribute

This issue is considered serious and is explained in depth here. It has a simple fix in most Gatsby starters and themes.

Presuming that Helmet is being used, you can use an htmlAttributes prop to set an attribute on the <html> element:

<Helmet title={config.siteMetadata.title} htmlAttributes={{ lang: 'en' }} />

Add Some Plugins

Gatsby plugins are super helpful. I always want to try and get the benefits of offline caching of a PWA and the security of implimenting CSP headers, so I add these two plugins:

Here is a good article on PWAs and Gatsby.

What Else Do You Do?

That's my list, for now.

What did I miss? Let me know on Twitter @Josh412 or leave a comment 👇

Top comments (9)

Alex Gabites • Jan 17 '20

I got so sick of doing the same motions every time I set up a new Gastby site that I made a template for myself 😅

Thanks for the CSP plugin, didn't know about that one!

Josh Pollock • Jan 18 '20

Thanks for sharing the template. I'll star it and try it out.

Alex Gabites • Jan 19 '20

Great! If you think there are improvements or plugins that would make it even better to include please do create a PR and I'd be more than happy to look at it :)

Waylon Walker • Jan 18 '20

Thanks for sharing! I have four Gatsby sites in production and have started countless others to play with. Great tips to always update packages before starting.

I always add styled components right away.

npm i styled-components

Wez Pyke • Jan 18 '20

Is there any reason why you prefer Yarn over NPM?

Josh Pollock • Jan 18 '20

This is a great question, I wrote a post beacuse my answer was going long. tl;dr - yarn test is less keys to press than npm run test also monorepos and npm inc. worries me.

dev.to/shelob9/why-i-use-yarn-not-...