Streamline Your Development Workflow with Automated Gatsby Recipes

What Are Gatsby Recipes?

Gatsby recipes are a game-changer for developers, offering a middle ground between watching lengthy tutorials and digging through dense documentation. They provide a straightforward way to accomplish specific tasks, such as adding a package or plugin to your Gatsby project, without requiring a full tutorial.

The Power of Automation

With recent advancements in Gatsby, including incremental builds available on Gatsby Cloud, the team has released a canary version of recipes built with MDX and React. This innovative approach turns a list of steps into executable files, enabling common actions like installing NPM packages, plugins, and creating pages. The best part? Recipes are designed to be extensible, allowing for automation of a wide range of tasks.

Getting Started with Gatsby Recipes

To utilize Gatsby recipes, you’ll need to upgrade your global Gatsby CLI package to the latest version by running:

npm install -g gatsby-cli@latest

Once confirmed, you’ll have access to the recipes command.

Creating Your Own Recipe

The beauty of Gatsby recipes lies in their customizability. With a few MDX components, you can create your own recipes, either locally or through a GitHub gist. Gatsby provides several components to aid in this process, including <GatsbyPlugin/>, <NPMPackage />, and <File />.

A Real-World Example

Let’s create a recipe to add Gatsby Image to a project. By following the official Gatsby documentation, we can break down the process into manageable steps. We’ll use the <GatsbyPlugin /> component to install the necessary plugins, and the <File/> component to add example files. The result is a streamlined, automated process that saves time and effort.

import { GatsbyPlugin, File } from '@gatsby-mdx/recipe';

const AddGatsbyImage = () => {
  return (
    <div>
      <GatsbyPlugin
        name="gatsby-plugin-sharp"
        options={{}}
      />
      <GatsbyPlugin
        name="gatsby-transformer-sharp"
        options={{}}
      />
      <File
        name="image.js"
        content={`
          import React from 'react';
          import { StaticImage } from 'gatsby-plugin-image';

          const Image = () => {
            return (
              <StaticImage
                src="undefinedexample.com/image.jpg"
                alt="Example Image"
              />
            );
          };

          export default Image;
        `}
      />
    </div>
  );
};

export default AddGatsbyImage;

Unlock the Full Potential of Gatsby

As this experimental feature continues to evolve, the possibilities for custom recipes will expand. With Gatsby recipes, you can automate tedious tasks, freeing up more time to focus on building exceptional digital experiences. Join the thousands of developers already leveraging Gatsby to take their projects to the next level.