Skip to content
No description, website, or topics provided.
TypeScript HTML Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
instructions
packages
.env-sample
.gitignore
.nvmrc chore: migrating and cleaning code Aug 12, 2019
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE.md
README.md
lerna.json
netlify.toml chore: migrating and cleaning code Aug 12, 2019
ngrok-sample.yml chore: cleanup and refactor to enable easier setup and local dev sett… Sep 6, 2019
package-lock.json chore: removed faunadb from root Aug 30, 2019
package.json chore: updating package.json license Sep 16, 2019
yarn.lock

README.md

Overview

The Channels App serves two main purposes, as:

  • A reference implementation for:
    • Channel, Sites, and Routes APIs
    • BigDesign React Components
  • A way to manage the channels connected to a BC storefront and their corresponding sites and routes

App Installation

It can be installed on a BC storefront here.

Local Development & Testing

To get the app running locally, you'll need the following dependencies:

  • A BigCommerce Store: you can sign up for a trial here or use an existing store / sandbox store
  • Create API credentials: you can find instructions here
  • A Netlify account: Sign Up for netlify here
  • ngrok: You can install using homebrew brew cask install ngrok

Setup Project

Run the following commands:

  1. npm install netlify-cli -g

  2. netlify init

    Notes:

    • You can use most of the specified defaults when prompted
    • Build command should be yarn build
    • Directory should be packages/app-react/build
  3. netlify addons:create fauna

  4. netlify addons:auth fauna

    Notes:

    • You need to agree to import the database

Setup FaunaDB DB and Index

  1. Log into FaunaDB and go to the db that was created from netlify
  2. Create a collection named bigcommerce_stores using defaults. To create a collection, click on the name of the database

Create Collection Image

  1. Create Index store_hash in bigcommerce_stores

Create Index Image

 Notes:

  - Make sure to add data.store_hash to both terms and values
  - Select the unique checkbox

Setup ngrok tunnel for app

  1. cp ngrok-sample.yml ngrok.yml

  2. Retrieve and replace the auth token in the ngrok.yml file

  3. Set authtoken in ngrok.yml file with value from https://dashboard.ngrok.com/get-started

  4. Set hostname to <username>channelsdevapp.ngrok.io in the ngrok.yml file.

    Notes:

    • The username can be whatever you like

Setup BC App

  1. Log into your store's dev tools

  2. Create an app and in the "Technical" section, set the following URLs:

    • Auth Callback URL: https://<username>channelsdevapp.ngrok.io/.netlify/functions/bigcommerce_auth
    • Load Callback URL: https://<username>channelsdevapp.ngrok.io/.netlify/functions/bigcommerce_load
    • Uninstall Callback URL: https://<username>channelsdevapp.ngrok.io/.netlify/functions/bigcommerce_uninstall
  3. Select "modify" permissions for the following scopes:

    • Channel Settings
    • Sites & Routes

Setup .env

  1. cp .env-sample .env

  2. Update and replace the following in .env:

    • BC_CLIENT_ID: BigCommerce App Client Id

    • BC_CLIENT_SECRET: BigCommerce App Secret

    • BC_AUTH_CALLBACK: Replace with Auth Callback URL from above

    • APP_URL= Replace with ngrok hostname from above https://<username>_channelsappdev.ngrok.io/

Note: The environment variables in .env will also need to be set in Netlify in order for the deployed version to work. [TODO]

Start Service

In a terminal, execute the following in the root of the project directory to start ngrok:

ngrok start --config ngrok.yml site

Note: if you stop and restart this process, it will give you a new host domain that you will need to update for each of the 3 Callback URLs in your app's dev tools section

In another terminal execute in the root of the project directory to start the service:

yarn netlify:dev

The service will live reload on saved changes. If you want to restart simply stop the yarn netlify:dev process and restart it, there should be no need to restart ngrok.

Reference:

You can’t perform that action at this time.