Edgio
Edgio Console

BigCommerce

This guide shows you how to deploy a BigCommerce backed application on Edgio.

What is BigCommerce?

BigCommerce is an API driven ecommerce platform. Used by some of the biggest brands on the planet, BigCommerce provides solutions for B2B, wholesale, omnichannel, offline to online, international and multi-storefront. They provide deep integrations to social media platforms and have a robust partner network of technology and integration partners.

Example

This example is a Next.js app powered by a BigCommerce backend.
Try the BigCommerce Site Example
View the Code

Prerequisites

Setup requires:

Install the Edgio CLI

If you have not already done so, install the Edgio CLI.
Bash
1npm i -g @edgio/cli@^6.0.0

Setting up a BigCommerce Headless Example

We will go through how to set-up your BigCommerce Storefront and the configuration it requires. There are two paths we can take here to generate a project to start:
  1. Use our existing example
  2. Generate a Next.js Commerce project from scratch
If you go with option 1, continue to the Storefront setup section.

Generate a Next.js Commerce Project

  1. Clone the official Next.js Commerce repository and install the dependencies.
Bash
1git clone git@github.com:vercel/commerce.git
2cd commerce
3yarn
4cd site
  1. Run Edgio init in the project directory:
Bash
1edgio init --edgioVersion ^6.0.0

Update the Example or Generated Project for use with BigCommerce

Skip to the Storefront Setup section for a detailed explanation on how to setup a BigCommerce site. After that, return to this section to enter values as needed.
  1. Duplicate .env.template and name it .env.local in the project directory. Add your BigCommerce API keys to it. See Storefront setup for how to set these items up.
.env
1COMMERCE_PROVIDER=@vercel/commerce-bigcommerce
2BIGCOMMERCE_STOREFRONT_API_URL=https://store-${STORE_HASH}-${CHANNEL_ID}.mybigcommerce.com/graphql
3BIGCOMMERCE_STOREFRONT_API_TOKEN=${STOREFRONT_API_TOKEN}
4BIGCOMMERCE_STORE_API_URL=https://api.bigcommerce.com/stores/${STORE_HASH}
5BIGCOMMERCE_STORE_API_TOKEN=${STORE_TOKEN}
6BIGCOMMERCE_STORE_API_CLIENT_ID=${STORE_CLIENT}
7BIGCOMMERCE_CHANNEL_ID=${CHANNEL_ID}
8BIGCOMMERCE_STORE_URL=https://store-${STORE_HASH}.mybigcommerce.com
9BIGCOMMERCE_STORE_API_STORE_HASH=${STORE_HASH}
10BIGCOMMERCE_STORE_API_CLIENT_SECRET=${CLIENT_SECRET}
  • STORE_HASH - Available in the URL bar of your BigCommerce site.
  • CHANNEL_ID - Available in the Channel Manager > Channel / Advanced Settings > Channel Details
  • STOREFRONT_API_TOKEN - The token result from the API call to create a token. This should be a long token.
  • STORE_TOKEN - The API token generated via the BigCommerce API KEY UI. This should be a short token.
  • STORE_CLIENT - The Client ID generated via the BigCommerce API KEY UI.
  • STORE_SECRET - The Client Secret generated via the BigCommerce API KEY UI.
The BIGCOMMERCE_STORE_API_URL should not have the version at the end. The API KEY UI will show it this way, but do not include it in your environment variable.
  1. From root of the project, run the command to start the project:
Bash
1npm run dev

Deploy the project

From within the site directory, run
Bash
1edgio deploy

BigCommerce Storefront Setup

  1. Login or Signup for an account with BigCommerce.
Login
Signup
  1. After you have logged in or signed up, we need to generate an API key in order to continue creating the necessary elements to work with BigCommerce.
    1. Visit Advanced Settings > API Accounts and click “Create API Account > Create V2/V3 API Token”.
    2. Give the token a name and enable all scopes for now.
    3. Make note of the “API path” and save this somewhere, as we will need this later. It has a pattern of https://api.bigcommerce.com/stores/{STORE_HASH}/v3/.
    4. Click “Save”.
    5. A dialog will appear with the generated API keys. Copy each item for later use. The credentials also get downloaded as a text file.
  2. Now that we have API credentials, we will be able to interact with the BigCommerce API in order to finish setting up necessary elements.
As of the time of writing this guide, they only support setup via API.
For this next step you will need the store hash (available in the URL bar) and the API token you just created.
  1. To create a channel we need to issue a curl request to the BigCommerce API. Learn more at the BigCommerce Developer Portal. Use the curl below, substituting values where needed.
Bash
1curl --request POST \
2     --url https://api.bigcommerce.com/stores/{STORE_HASH}/v3/channels \
3     --header 'Content-Type: application/json' \
4     --header 'X-Auth-Token: {API_ACCESS_TOKEN}' \
5     --data '{
6       "name": "Edgio",
7       "platform": "custom",
8       "type": "storefront",
9       "status": "connected",
10       "config_meta": {}
11     }'
  1. Visit the “Channel Manager” to view your newly created Channel. Click the triple dot menu and select “Advanced settings”. Make note of the Channel ID for later use in generating a GraphQL API token.
  1. Click “Create Route” and create routes to match the below routes.
  1. With a channel and routes created, the last item to use the BigCommerce API for is generating an Auth token for use with the GraphQL API. You will have to revisit this once you have deployed your application for the first time to add the allowed domain. Learn more at the BigCommerce Developer Portal.
Bash
1curl --request POST \
2   --url https://api.bigcommerce.com/stores/{STORE_HASH}/v3/storefront/api-token \
3   --header 'Content-Type: application/json' \
4   --header 'X-Auth-Token: {API_ACCESS_TOKEN}' \
5   --data '{
6   "channel_id": {CHANNEL_ID},
7   "expires_at": 1620766652, // change this to a time in the future. To generate in Javascript: new Date("2022-12-31").getTime()
8   "allowed_cors_origins":
9     ["https://www.yourstorefront.com"]
10 }'
Save the token response for use in your environment variables.