Gatsby E-Commerce Recipe: Integrate a Cart in a Few Steps

No tool in the Jamstack ecosystem has made more steps towards an optimal developer experience than Gatsby.

What started as a simple, albeit performant, static site generator is today so much more than that.

One recent example of this ongoing progress was the release of Gatsby Recipes, which allows even more automation in the site-building process.

When we stumbled upon this, we automatically thought: “Here’s the perfect occasion to ease up an e-commerce integration for Gatsby projects!”

So today, we’re glad to present to you our new Gatsby e-commerce recipe.

This post will explain how we’ve built it and how you can use it for your own Gatsby e-commerce site.

Let’s start by clearing up what are Gatsby recipes exactly.

What are Gatsby recipes?

A Gatsby recipe is scripted as a series of steps taken to configure your site to the desired state, or to quickly add new things to your site.

It enables the automation of multiple tasks such as creating pages and layouts, setting up TypeScript, run npm installs, adding data to GraphQL, etc. Or, in our case, installing and setting up a plugin.

Oh, and Recipes are run directly from Gatsby’s CLI!

Under the hood, these “steps” are defined in a single MDX file—a combination of Markdown and React components. Using Markdown allows the steps to complete a task to be listed in a human-readable way. That will undoubtedly simplify the process for many users.

Out of the box, Gatsby offers many official recipes. Find out which tasks you can already use recipes for by running gatsby recipes in your terminal.

If you don’t find something you’d like to automate for your Gatsby projects, it’s quite easy to create your own recipe. The tutorial below will show you how to do so. Our example allows the installation of a Snipcart plugin that enables e-commerce on Gatsby websites quickly.

Why a Gatsby e-commerce recipe?

Despite the many existing e-commerce plugins for Gatsby JS, there wasn’t any official recipe of this kind yet. We wanted to remedy that by proposing our own to the Gatsby team.

Plus, as a team, we always want to ease the integration of Snipcart with a wide variety of tools. However, plugins and integrations are time-consuming when it comes to creating and maintaining them.

It looked like a great opportunity to quickly solidify our integration with one of the more popular website building tools out there using an existing (and solid) Snipcart plugin.

Plus, for users, there are many benefits for using Gatsby to craft a e-commerce site—some of them we already mentioned in our React e-commerce guide:

→ The use of components for flexibility

Component-based development enables easy code reuse through your app, but also the writing of small features. Or, in our case, small e-commerce functionalities. This comes in handy once you start scaling and expanding your shopping cart integration.

→ Virtual DOM for performance

React’s virtual DOM provides a more efficient way of updating the view in a web application. Performance is HUGE in e-commerce; every milli-seconds count.

Speed = Better UX/SEO = $$$.

→ Popularity & vast community for peace of mind

Just like the framework behind it, Gatsby has become highly popular. If you’re a merchant, it shouldn’t be too hard to find developers to maintain your Gatsby e-commerce app. If you’re a developer, any issue has probably already been documented.

→ Gatsby Cloud as a management option for scaling

If your editorial team or content scales, it’s a good sign that business is doing well, but it can become harder to manage. With Gatsby, you can use their cloud, and therefore unload hosting & maintenance to it. Gatsby Cloud now also features Incremental Builds, which you should take a look at if your project contains a high number of content nodes.

Okay, time to take a closer look at that Gatsby e-commerce recipe.

Creating a Gatsby recipe: e-commerce plugin install

Now, I’ll explain how I created the recipe to add Snipcart powered e-commerce capabilities to any Gatsby site.

The recipe actually guides developers through the installation of this neat Gatsby plugin for Snipcart created by Patrick Faramaz. Props to him for making it and letting us use it for this.

The first thing we want to do is to greet people and assist with some manual steps they have to take before diving in.

That will be plain Markdown:

-- snipcart.mdx
    
# Add ecommerce powered by Snipcart
    
Snipcart is a shopping cart platform for developers.
    
This recipe will guide you through enabling ecommerce on your Gatsby site.
    
## Create a Snipcart account
    
If you do not already have a Snipcart account, please register \[here\](https://app.snipcart.com/register).
    
You can use it for FREE to test things out as long as you like!
    
---

That’s the cool thing with Gatsby Recipes; since it is Markdown, the scripted steps are pretty much self-documented.

Our next step will be to install the plugin:

-- snipcart.mdx
    
## Install Gatsby plugin for Snipcart
    
<NPMPackage name="gatsby-plugin-snipcart-advanced" />
    
<GatsbyPlugin
  name="gatsby-plugin-snipcart-advanced"
  options={{
    publicApiKey:"[YOUR_PUBLIC_API_KEY]"
  }}
/>
    
---

Note that with the Recipes API, commands are expressed as React components. Here, the first command installs the plugin NPM package, and the second adds the plugin to your Gatsby config file.

Gatsby Recipes will always prompt for confirmation before applying changes to your codebase, showing a diff view of what will happen:

Noticed the YOUR_PUBLIC_API_KEY placeholder value we added to the config? A more efficient process would provide the API key interactively during recipe execution.

Unfortunately, at the moment, Gatsby Recipes can’t accept user input and forward values to plugin configuration (but that is definitely coming!).

That is why we’ll add a small setup script that asks for configuration values to set up the plugin to our liking:

-- snipcart.mdx
    
## Pull Snipcart setup script
    
<Directory path="bin" />
    
<File
  path="./bin/snipcart-setup.js" 
 content="https://gist.githubusercontent.com/thatfrankdev/4544e73bce47d90d0b1db1c8305198a6/raw/c2827fb8bf34d123d754ccf48e44912766cbe4d1/snipcart-setup.js" />
    
<NPMScript
  name="snipcart-setup"
  command="node ./bin/snipcart-setup.js"
/>
    
<NPMPackage
  name="abstract-syntax-tree"
  dependencyType="development" />
    
---

See how the File component pulls a remote file and adds it to your Gatsby project folder. NPMScript then adds an entry in your npm scripts to help run the setup script.

That’s about it for the crunchy part, let’s finish this up with some guidance on what’s next:

-- snipcart.mdx
    
Snipcart has been installed to your Gatsby site!
    
The documentation of the plugin can be found \[here\](https://github.com/ipatate/gatsby-plugin-snipcart-advanced/blob/master/readme.md).
    
Please set your account's public API key in the plugin config to get started.
    
OPTIONAL: To automate the plugin configuration, you can run this command in your terminal: `npm run snipcart-setup`.
    
Here's how to add your first Snipcart buy button: https://docs.snipcart.com/v3/setup/products.
    
Happy selling!

There we are, we now have a neat little Gatsby recipe.

Any dev can now run it to add Snipcart to their site. It skips all the assumptions of a Gatsby Starter or having to pick and choose the right plugin and learn how to get started with it.

How to use the recipe & Github gist

Note that this recipe will soon be available as an official Gatsby recipe.

You can still try it yourself using these steps (make sure to have Gatsby CLI installed globally):

gatsby new ./my-fresh-new-store
cd my-fresh-new-store
gatsby recipes https://gist.githubusercontent.com/thatfrankdev/4544e73bce47d90d0b1db1c8305198a6/raw/141b14ac2809d04081715cd72c7cf5598813c85c/snipcart.mdx

Closing thoughts

The feature is obviously in an early stage of its development, but after talking to Gatsby founder Kyle Matthews, we have an idea of where it’s going. As well as streamlining repetitive tasks, config and installs, the goal is to centralize and increase discoverability for all specific how-to tutorials for Gatsby.

It’s been quite a bit of digging to know exactly what was possible and what wasn’t. Plus, I faced the usual fiddling with npm dependency issues. If you don’t mind scrolling through GitHub issues for documentation or guidance, it’s worth giving it a try!

It sure is a promising feature, though, and I’m excited to see where it can go. It has the potential to truly enhance the developer experience with Gatsby.

At the moment, recipes are a good way to automate basic, repetitive tasks. It’s really where the feature shines and where I would recommend it.

All in all, I spent around a day and a half building this. The hope is that it can now save a lot of time for other devs when kickstarting new e-commerce projects with Gatsby.

I hope you’ll find this helpful! 🙂

If you've enjoyed this post, please take a second to share it on Twitter. Got comments, questions? Hit the section below!