Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

There are 1000s of plugins and themes in the Gatsby eco system, which is amazing but introduces the problem of deciding which to use to accomplish the feature you *actually* want to build. 

Analysis paralysis is real.

Enter: Gatsbyjs Recipes 

Gatsbyjs Recipes are run from the CLI and automate common tasks like creating pages and layouts, installing and setting up plugins, adding a blog to a site, setting up Typescript, and many more.

With the release of this new feature, Gatsby has created 11 official recipes that you can explore including: ThemeUI, Sass, Cypress, animated page transitions, and persistent layout components.

In this collection, you will learn how to:

- Set up Gatsby to use Recipes
- Create a multi-step Recipe
- Install NPM packages
- Configure Gatsby Plugins
- Create Custom files with Recipes

Gatsby Recipes are a new tool of the gatsby-cli which require the latest install of the package. You will need to install the cli with `npm install -g gatsby-cli@latest`

Gatsby Recipes allow you to add common functionality to your Gatsby site with none of the headache of dealing with all the various plugins that would are required.  

In this lesson, you will see how easy it is to install and run `Jest` with an official Gatsby recipe. What used to be a multiple step process (including modifying babel configs) is now a simple install command away.

Setup a Gatsby Project to Use Recipes

Gatsby Recipes use MDX files to specify what steps are taken, files are downloaded and plugins installed. 

In this lesson we will set up a `tailwindcss.mdx` file that specifies what tailwind is and installs the package using the `NPMPackage` component through Gatsby Recipe cli.

Create a Custom Gatsbyjs Recipe for Installing NPM Packages

In [Create a Custom Gatsbyjs Recipe for Installing NPM Packages](https://egghead.io/lessons/gatsby-install-an-npm-package-using-a-gatsbyjs-recipe?pl=getting-started-with-gatsbyjs-recipes-c79a) you learned how to write a Gatsby Recipe to install an NPM Package. For gatsby plugins and themes, there is a config step as well.

In this lesson we will create a new step within a recipe that will install the `gatsby-plugin-postcss` package and configure it within `gatsby-config.js` using the `GatsbyPlugin` component. NOTE: Options support for [configuring plugins](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-recipes/README.md#recipe-api) coming soon.

Add a Gatsby Plugin using a Gatsbyjs Recipe

Often times packages will require their own bespoke configuration files apart from NPM installing and configuring in gatsby-config.js or you may want additional files present for doing things like setting global styles. We can handle this by creating files within a Gatsby Recipe.

In this lesson, we will create a handful of Files within a Gatsby Recipe to configure tailwindcss and postcss. We will also see how we can create an example usage of tailwind within gatsby as part of the recipe.

Getting Started with Gatsbyjs recipes

Khaled Garbaya

Course Content