Documentation
Frameworks
Gatsby

Getting Started with Gatsby

Automatic Installation

Template

To generate the starter template for your Gatsby project, run the following command:

npx degit tonightpass/kitchn/examples/gatsby my-gatsby-kitchn-app
 
cd my-gatsby-kitchn-app
npm install
npm run dev
 
git init
git add .
git commit -m "initial commit"

What's Included

This template is similar to the default Gatsby template, but with Kitchn pre-installed.

Pre-install dependencies

  • kitchn
  • gatsby
  • react
  • react-dom

Manual Installation

Installation

In your Gatsby project, install Kitchn by running either of the following:

npm i kitchn gatsby-plugin-styled-components babel-plugin-styled-components --save

After installing Kitchn, you need to add the gatsby-plugin-styled-components plugin to your gatsby-config.js file.

// gatsby-config.js
module.exports = {
  plugins: [
    // ...
    "babel-plugin-styled-components",
    "gatsby-plugin-styled-components",
  ],
};

Provider Setup

After installing Kitchn, you need to set up the KitchnProvider at the root of your application. This can be either in your gatsby-browser.jsx or gatsby-browser.tsx file.

// gatsby-browser.jsx
import { KitchnProvider, StyleSheetManager } from "kitchn";
import React from "react";
 
import "kitchn/fonts.css";
 
export const wrapRootElement = ({ element }) => (
  <StyleSheetManager>
    <KitchnProvider>{element}</KitchnProvider>
  </StyleSheetManager>
);

And if you are using SSR, you can also set up the KitchnProvider in your gatsby-ssr.jsx or gatsby-ssr.tsx file.

// gatsby-ssr.jsx
import { KitchnProvider, ServerStyleSheet, StyleSheetManager } from "kitchn";
import React from "react";
 
import "kitchn/fonts.css";
 
const sheetByPathname = new Map();
 
export const wrapRootElement = ({ element, pathname }) => {
  const sheet = new ServerStyleSheet();
  sheetByPathname.set(pathname, sheet);
  return (
    <StyleSheetManager sheet={sheet.instance}>
      <KitchnProvider>{element}</KitchnProvider>
    </StyleSheetManager>
  );
};
 
export const onRenderBody = ({ setHeadComponents, pathname }) => {
  const sheet = sheetByPathname.get(pathname);
  if (sheet) {
    setHeadComponents([sheet.getStyleElement()]);
    sheetByPathname.delete(pathname);
  }
};

Deploy your own

Deploy the example using Vercel (opens in a new tab) or preview live with StackBlitz (opens in a new tab) or CodeSandbox (opens in a new tab).

Deploy with Vercel (opens in a new tab)

In addition, here is a complete project example (opens in a new tab) using Kitchn with Next.js.

Next.js (Pages Router)Components