Installation

This guide explains how to install and configure the Front-Commerce BigCommerce module to start interacting with an existing BigCommerce instance from your application.

Configure Front-Commerce to use BigCommerce module

To do so, update your .front-commerce.js file as below:

.front-commerce.js

module.exports = {
  name: "Front-Commerce Skeleton",
  url: "http://localhost:4000",
  modules: [
    "./node_modules/front-commerce/theme-chocolatine",
    "./node_modules/front-commerce/modules/big-commerce",
    "./node_modules/front-commerce/modules/big-commerce-web",
    "./src",
  ],
  serverModules: [
    { name: "FrontCommerce", path: "server/modules/front-commerce" },
    { name: "BigCommerce", path: "big-commerce/server/modules" },
  ],
  webModules: [
    { name: "FrontCommerce", path: "front-commerce/src/web" },
    { name: "ThemeChocolatine", path: "front-commerce/theme-chocolatine/web" },
    {
      name: "BigCommerce",
      path: "front-commerce/modules/big-commerce/web",
    },
    {
      name: "BigCommerceWeb",
      path: "front-commerce/modules/big-commerce-web/web",
    },
    { name: "Skeleton", path: "./src/web" },
  ],
};

Associate each store with a channel

Each store in src/config/stores.js must be associated with a BigCommerce channel. For that each entry should have a channelName field containing the name of an existing channel. It's also mandatory to properly set the currency field so that it is consistent with the channel configuration.

For instance, if in BigCommerce you have defined two channels called French and British to sell products in Euros and in British Pounds, your stores.js should contain something like:

module.exports = {
  fr: {
    url: `${process.env.FRONT_COMMERCE_URL}/fr`,
    channelName: "French", // must match a channel name
    currency: "EUR", // must be consistent with the channel settings
    locale: "fr-FR",
    default_country_id: "FR",
    countries: (IsoCountries) =>
      IsoCountries.registerLocale(require("i18n-iso-countries/langs/fr.json")),
  },
  en: {
    url: `${process.env.FRONT_COMMERCE_URL}/en`,
    channelName: "British", // must match a channel name
    currency: "GBP", // must be consistent when the channel settings
    locale: "en-GB",
    default_country_id: "GB",
    countries: (IsoCountries) =>
      IsoCountries.registerLocale(require("i18n-iso-countries/langs/en.json")),
  },
};

Configure the environment

note

Those environment variables are described in detail on the Environments variables page.

Access to Management API

• In the control panel, browse to: Advanced Settings > API Accounts > Create an API Account
• Choose V2/V3 API Token
• Choose OAuth Scopes on the right
• Save and keep the BigCommerceAPI-credentials*.txt file

In your .env file, define:

• FRONT_COMMERCE_BIG_COMMERCE_ENDPOINT with API PATH value in the text file (without the /v3/ suffix)
• FRONT_COMMERCE_BIG_COMMERCE_AUTH_TOKEN with ACCESS TOKEN value in the text file

From that .txt file, also fill:

• FRONT_COMMERCE_BIG_COMMERCE_CLIENT_ID with CLIENT ID
• FRONT_COMMERCE_BIG_COMMERCE_CLIENT_SECRET with CLIENT SECRET
• FRONT_COMMERCE_BIG_COMMERCE_STORE_HASH with the store hash

Example:

.env

FRONT_COMMERCE_BIG_COMMERCE_ENDPOINT=https://api.bigcommerce.com/stores/yhowbpps2e
FRONT_COMMERCE_BIG_COMMERCE_AUTH_TOKEN=ab9cd9x75abc1tumu0wce8yxedu3ue3
FRONT_COMMERCE_BIG_COMMERCE_CLIENT_ID=aclientid
FRONT_COMMERCE_BIG_COMMERCE_CLIENT_SECRET=aclientsecret
FRONT_COMMERCE_BIG_COMMERCE_STORE_HASH=yhowbpps4e

Misc env. variables

FRONT_COMMERCE_BIG_COMMERCE_WEBHOOK_SECRET needs to be filled. To quickly run Front-Commerce with BigCommerce, it can be defined to any string.

FRONT_COMMERCE_BIG_COMMERCE_RESET_PASSWORD_SMTP_CONNECTION_STRING and FRONT_COMMERCE_BIG_COMMERCE_RESET_PASSWORD_SENDER_EMAIL_ADDRESS have to be filled for the Password reset feature.

Let's test it

• Restart Front-Commerce

tip

You can enable from debug flags to see what is going on. Run Front-Commerce with:

DEBUG=axios,front-commerce:big-commerce:* npm run start

• Use the Playground to load a product from its SKU:

  query productBySku {
    product(sku: "OTS") {
      sku
      name
      path
      description
      imageUrl
    }
  }
• Go to the path to view the product

Congratulations!

To go further, see how to configure BigCommerce to allow users to reset their password.