Gatsby CLI Recipes

• Gatsby
• Gatsby Recipes
• Storybook
• JavaScript
• TypeScript

I recently posted about two new Gatsby Recipes i was working on to help automate the sometimes quite tricky process of installing Storybook in your Gatsby project

If you haven’t heard about Gatsby Recipes you can read more about them here

I personally think Recipes are a really cool idea and wonder if something similar will work its way out of the Gatsby incubation lab and into a more general npm world 🤔

If you’re intrigued you can read about the two Storybook Recipes i created below

• JavaScript Recipe
• TypeScript Recipe

I’ve recently used both of these in a commercial project and they do indeed solve a problem and prevent a few headaches which got me thinking about adding these to the Gatsby CLI

So that’s what i did.

…and delight of delights once they were merged i upgraded to the latest version of the Gatsby CLI and boom! 💥 both recipes are now available from the list of “official” Recipes.

I’m not actually sure if it’s fully “official” since Recipes are still experimental but i’m pretty happy they’re both available and hope they’ll help someone, somewhere, sometime.

To give them a whirl make sure you upgrade to the latest version of the Gatsby CLI

npm install -g gatsby-cli@latest

Now you can run the below and choose either the JavaScript or TypeScript variant from the list.

gatsby recipes

There is one small snag and that’s the Storybook config files will always be installed at the root of your project. This will likely be fine in most cases but if you’re using yarn workspaces you may need to move the Webpack config files to the desired directory.

Perhaps in time the Gatsby CLI will introduce arg flags so that destination directories can be passed in before a Recipe is run… only time will tell.