DEV Community

Cover image for Initial setup and configuration

Initial setup and configuration

notrab profile image Jamie Barton Updated on ・2 min read

Before you start, you'll want to create an account at Chec or use the CLI.

You'll also need to create a few categories, that have products to get the most out of this tutorial. Once you've done that, grab a copy of your public API key. You can find this at Chec Dashboard > Developer Settings.

If you don't want to create an account with Commerce.js to follow along with this tutorial, you can use the demo store public key pk_184625ed86f36703d7d233bcf6d519a4f9398f20048ec.

You can follow along with this tutorial on YouTube 📺


1. Initial setup

In this tutorial we'll be using Gatsby. Gatsby ships with a CLI to make it easier to bootstrap applications, but we'll do things manually.

To begin, inside a new directory, do the following:

npm init -y
npm install react react-dom gatsby @chec/gatsby-source-chec
npm install -D dotenv

Then add some scripts to package.json:

"scripts": {
  "build": "gatsby build",
  "clean": "gatsby clean",
  "dev": "gatsby develop"

Now create a new file .env and add your public API key here.


Next create the file gatsby-config.js.

We'll first import the dotenv package at the top.


Then we will export by default an array of plugins. Inside this array, we'll configure @chec/gatsby-source-chec with our publicKey from .env.

module.exports = {
  plugins: [
      resolve: "@chec/gatsby-source-chec",
      options: {
        publicKey: process.env.CHEC_PUBLIC_KEY,

Discussion (0)

Editor guide