# gatsby-recipes > Core functionality for Gatsby Recipes Latest version **1.4.0** (published 2021-12-14) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install gatsby-recipes pnpm add gatsby-recipes yarn add gatsby-recipes bun add gatsby-recipes ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 1.4.0 | | Published | 2021-12-14 | | First published | 2020-04-14 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 59 | | Unpacked size | 5.1 MB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 55941 | | Author | Kyle Mathews | | Maintainers | kgarbaya, marvinjudehk, dschau, kylemathews, pieh, wardpeet, tylerbarnes, fk, smthomas, lekoarts, rachelbahl, daniellewgatsby, veryspry, abhiaiyer, johno | | Keywords | gatsby, gatsby-recipes, mdx | ## Links - npm: https://www.npmjs.com/package/gatsby-recipes - Repository: https://github.com/gatsbyjs/gatsby - Homepage: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-recipes#readme - Issues: https://github.com/gatsbyjs/gatsby/issues - npm.io page: https://npm.io/package/gatsby-recipes ## Dependencies (59) - [ws](https://npm.io/package/ws.md) ^7.3.0 - [cors](https://npm.io/package/cors.md) ^2.8.5 - [glob](https://npm.io/package/glob.md) ^7.1.6 - [lock](https://npm.io/package/lock.md) ^1.0.0 - [mitt](https://npm.io/package/mitt.md) ^1.2.0 - [uuid](https://npm.io/package/uuid.md) 3.4.0 - [debug](https://npm.io/package/debug.md) ^4.3.1 - [execa](https://npm.io/package/execa.md) ^5.1.1 - [hicat](https://npm.io/package/hicat.md) ^0.8.0 - [dotenv](https://npm.io/package/dotenv.md) ^8.2.0 - [is-url](https://npm.io/package/is-url.md) ^1.2.4 - [lodash](https://npm.io/package/lodash.md) ^4.17.21 - [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1 - [semver](https://npm.io/package/semver.md) ^7.3.5 - [xstate](https://npm.io/package/xstate.md) ^4.9.1 - [express](https://npm.io/package/express.md) ^4.17.1 - [graphql](https://npm.io/package/graphql.md) ^15.4.0 - [pkg-dir](https://npm.io/package/pkg-dir.md) ^4.2.0 - [unified](https://npm.io/package/unified.md) ^8.4.2 - [chokidar](https://npm.io/package/chokidar.md) ^3.5.2 - [fs-extra](https://npm.io/package/fs-extra.md) ^10.0.0 - [prettier](https://npm.io/package/prettier.md) ^2.5.1 - [@hapi/joi](https://npm.io/package/@hapi/joi.md) ^15.1.1 - [jest-diff](https://npm.io/package/jest-diff.md) ^25.5.0 - [@hapi/hoek](https://npm.io/package/@hapi/hoek.md) 8.x.x - [node-fetch](https://npm.io/package/node-fetch.md) ^2.5.0 - [prop-types](https://npm.io/package/prop-types.md) ^15.6.1 - [remark-mdx](https://npm.io/package/remark-mdx.md) 2.0.0-next.7 - [strip-ansi](https://npm.io/package/strip-ansi.md) ^6.0.0 - [@babel/core](https://npm.io/package/@babel/core.md) ^7.15.5 - [detect-port](https://npm.io/package/detect-port.md) ^1.3.0 - [@babel/types](https://npm.io/package/@babel/types.md) ^7.15.4 - [better-queue](https://npm.io/package/better-queue.md) ^3.8.10 - [remark-mdxjs](https://npm.io/package/remark-mdxjs.md) ^2.0.0-next.4 - [remark-parse](https://npm.io/package/remark-parse.md) ^6.0.3 - [resolve-from](https://npm.io/package/resolve-from.md) ^5.0.0 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.15.4 - [is-binary-path](https://npm.io/package/is-binary-path.md) ^2.1.0 - [@babel/template](https://npm.io/package/@babel/template.md) ^7.15.4 - [express-graphql](https://npm.io/package/express-graphql.md) ^0.12.0 - [graphql-compose](https://npm.io/package/graphql-compose.md) ~7.25.0 - [style-to-object](https://npm.io/package/style-to-object.md) ^0.3.0 - [@babel/generator](https://npm.io/package/@babel/generator.md) ^7.15.4 - [gatsby-telemetry](https://npm.io/package/gatsby-telemetry.md) ^3.4.0 - [remark-stringify](https://npm.io/package/remark-stringify.md) ^8.1.0 - [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^2.0.2 - [@babel/standalone](https://npm.io/package/@babel/standalone.md) ^7.15.5 - [gatsby-core-utils](https://npm.io/package/gatsby-core-utils.md) ^3.4.0 - [graphql-type-json](https://npm.io/package/graphql-type-json.md) ^0.3.2 - [unist-util-remove](https://npm.io/package/unist-util-remove.md) ^2.0.0 - [@graphql-tools/utils](https://npm.io/package/@graphql-tools/utils.md) ^7.0.2 - [yoga-layout-prebuilt](https://npm.io/package/yoga-layout-prebuilt.md) ^1.9.6 - [@graphql-tools/schema](https://npm.io/package/@graphql-tools/schema.md) ^7.0.0 - [contentful-management](https://npm.io/package/contentful-management.md) ^7.5.1 - [graphql-subscriptions](https://npm.io/package/graphql-subscriptions.md) ^1.1.0 - [single-trailing-newline](https://npm.io/package/single-trailing-newline.md) ^1.0.0 - [@babel/helper-plugin-utils](https://npm.io/package/@babel/helper-plugin-utils.md) ^7.14.0 - [@babel/plugin-transform-react-jsx](https://npm.io/package/@babel/plugin-transform-react-jsx.md) ^7.14.9 - [@babel/plugin-proposal-optional-chaining](https://npm.io/package/@babel/plugin-proposal-optional-chaining.md) ^7.14.5 ## Alternatives - [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads - [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads - [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads - [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads - [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads ## Recent versions - 1.4.0 (latest) — 2021-12-14 - 0.26.0 (latest-v3) — 2022-12-07 - 1.5.0-next.0 (next) — 2021-12-09 - 0.25.0-drupal-next.94 (drupal-next) — 2021-10-26 - 1.0.0-alpha-9689ff.13 (alpha-9689ff) — 2021-09-13 - 0.25.0-alpha-qe-sm.46 (alpha-qe-sm) — 2021-09-13 - 0.25.0-alpha-remote-fetch.79 (alpha-remote-fetch) — 2021-09-03 - 0.23.0-coreutils.29 (coreutils) — 2021-08-23 - 0.21.0-alpha-remote-file.48 (alpha-remote-file) — 2021-07-22 - 0.17.0-alpha-ssr.263 (alpha-ssr) — 2021-07-01 - 0.16.0-telemetry-test.296 (telemetry-test) — 2021-06-22 - 0.9.3 (latest-v2) — 2021-05-04 - 0.15.0-functions-next.18 (functions-next) — 2021-04-20 - 0.11.0-v3rc.0 (v3rc) — 2021-02-26 - 0.4.0-telemetry-test2.327 (telemetry-test2) — 2020-12-30 - … 341 more at https://npm.io/package/gatsby-recipes/versions ## README # Gatsby Recipes Recipes is an “infrastructure as code” system that lets users automatically manage and provision the technology stack for their Gatsby site/app through code rather than manual processes. It’s powered by React & MDX and a useful analogy is “React Native for Infrastructure”. Recipes also provides a read/write API for Desktop/Admin to build lowcode tooling on top of Gatsby & integrated services. It's designed to be extensible so new capabilities can be added which allow Recipes to automate more things. We chose [MDX](https://mdxjs.com/) to allow for a literate programming style of writing recipes which enables us to port our dozens of recipes from https://www.gatsbyjs.org/docs/recipes/ as well as in the future, entire tutorials. [Read more about Recipes on the launch blog post](https://www.gatsbyjs.org/blog/2020-04-15-announcing-gatsby-recipes/) There's an umbrella issue for testing / using Recipes during its incubation stage. Follow the issue for updates! https://github.com/gatsbyjs/gatsby/issues/22991 ## Get set up for running Recipes Recipes is a new rapidly developing feature. To use it, upgrade your global gatsby-cli package to the latest. ```shell npm install -g gatsby-cli@latest ``` To confirm that this worked, run `gatsby --help` in your terminal. The output should show the recipes command. ### Running an example recipe Now you can test out recipes! Start with a recipe for installing [Emotion](https://emotion.sh/docs/introduction) by following these steps: 1. Create a new Hello World Gatsby site: ```shell gatsby new try-emotion https://github.com/gatsbyjs/gatsby-starter-hello-world ``` 1. Go to the project directory you created: ```shell cd try-emotion ``` 1. Now you can run the `emotion` recipe with this command: ```shell gatsby recipes emotion ``` ![Terminal showing "gatsby recipes emotion" output](https://user-images.githubusercontent.com/1424573/79452177-f3362f00-7fa4-11ea-903a-e28472bf95b6.png) You can see a list of other recipes to run by running `gatsby recipes` ![Terminal showing recipes list](https://user-images.githubusercontent.com/1424573/79452254-14971b00-7fa5-11ea-9bdf-021c341afb10.png) ## Developing Recipes ### An example MDX recipe Here's how you would write the `gatsby recipes emotion` recipe you just ran: ```mdx # Setup Gatsby with Emotion [Emotion](https://emotion.sh/) is a powerful CSS-in-JS library that supports both inline CSS styles and styled components. You can use each styling feature individually or together in the same file. --- Install necessary NPM packages --- Install the Emotion plugin in gatsby-config.js --- Sweet, now it's ready to go. Let's also write out an example page you can use to play with Emotion. --- Read more about Emotion on the official Emotion docs site: https://emotion.sh/docs/introduction ``` You can browse the [source of the official recipes](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-recipes/recipes). The [recipes umbrella issue](https://github.com/gatsbyjs/gatsby/issues/22991) also has a number of recipes posted by community members. ### How to run recipes You can run built-in recipes, ones you write locally, and ones people have posted online. To run a local recipe, make sure to start the path to the recipe with a period like: ```shell gatsby recipes ./my-cool-recipe.mdx ``` To run a remote recipe, copy the path to the recipe and run it e.g. ```shell gatsby recipes https://example.com/sweet-recipe.mdx ``` ## External learning resources - A free 6 min eggheadio [collection](https://egghead.io/playlists/getting-started-with-gatsbyjs-recipes-c79a) by [Khaled Garbaya](https://twitter.com/khaled_garbaya) ## Recipe API ### `` Installs a Gatsby Plugin in the site's `gatsby-config.js`. ```jsx ``` #### props - **name**: name of the plugin - **options**: object with options to be added to the plugin declaration in `gatsby-config.js`. JavaScript code is not _yet_ supported in options e.g. `process.env.API_TOKEN`. This is being worked on. For now only simple values like strings and numbers are supported. - **key**: string used to distinguish between multiple plugin instances - **isLocal**: boolean that indicates this is a local plugin. This lets recipes know it shouldn't require an NPMPackage with the plugin name to be installed as well. ### `` ```jsx ``` #### props - **theme**: the name of the theme (or plugin) which provides the file you'd like to shadow - **path**: the path to the file within the theme. E.g. the example file above lives at `node_modules/gatsby-theme-blog/src/components/seo.js` ### `` ```jsx ``` #### props - **name**: name of the package to install - **version**: defaults to latest - **dependencyType**: defaults to `production`. Other options include `development` ### `` ```jsx ``` #### props - **name**: name of the property to add to the package.json - **value**: the value assigned to the property. can be an object or a string. ### `` ```jsx ``` #### props - **name**: name of the command - **command**: the command that's run when the script is called ### `` ```jsx ``` #### props - **path**: path to the file that should be created. The path is local to the root of the Node.js project (where the `package.json` is) - **content**: URL to the content that should be written to the path. Eventually we'll support directly putting content here after some fixes to MDX. > Note that this content is stored in a [GitHub gist](https://gist.github.com/). When linking to a gist you'll want to click on the "Raw" button and copy the URL from that page. ### `` ```jsx ``` #### props - **path**: path to the directory that should be created. The path is local to the root of the Node.js project (where the `package.json` is) ## How to set up your development environment to work on Gatsby Recipes core The Gatsby recipes codebase consists of the core framework, code for each resource, and the MDX source. ### Official recipes MDX source for the official recipes lives at [https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-recipes/recipes](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-recipes/recipes). We welcome PRs for new recipes and fixes/improvements to existing recipes. When you add a new recipe, please also add it to the recipes list at [https://github.com/gatsbyjs/gatsby/blob/05151c006974b7636b00f0cd608fac89ddaa1c08/packages/gatsby-recipes/src/cli.js#L60](https://github.com/gatsbyjs/gatsby/blob/05151c006974b7636b00f0cd608fac89ddaa1c08/packages/gatsby-recipes/src/cli.js#L60). ## FAQ / common issues ### Q) My recipe is combining steps instead of running them separately! We use the `---` break syntax from Markdown to separate steps. One quirk with it is for it to work, it must have an empty line above it. So this will work: ```mdx # Recipes --- a step ``` But this won't ```mdx # Recipes --- a step ``` ### Q) What kind of recipe should I write? If you’d like to write a recipe, there are a few great places to get an idea: - Think of a task that took you more time than other tasks in the last Gatsby site you built. Is there a way to automate any part of that task? - Look at this list of recipes in the Gatsby docs. Many of these can be partially or fully automated through creating a recipe `mdx` file. https://www.gatsbyjs.org/docs/recipes/ - community members have posted a number of recipes in the [recipes umbrella issue](https://github.com/gatsbyjs/gatsby/issues/22991). You can browse their ideas to find inspiration for new recipes to write. --- _Source: https://npm.io/package/gatsby-recipes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._