DEV Community

Cover image for Initial setup and configuration
Jamie Barton
Jamie Barton

Posted on • Updated on

Initial setup and configuration

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 📺

TLDR;


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
Enter fullscreen mode Exit fullscreen mode

Then add some scripts to package.json:

"scripts": {
  "build": "gatsby build",
  "clean": "gatsby clean",
  "dev": "gatsby develop"
}
Enter fullscreen mode Exit fullscreen mode

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

CHEC_PUBLIC_KEY=...
Enter fullscreen mode Exit fullscreen mode

Next create the file gatsby-config.js.

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

require("dotenv").config();
Enter fullscreen mode Exit fullscreen mode

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,
      },
    },
  ],
};
Enter fullscreen mode Exit fullscreen mode

Discussion (0)