Skip to content
No description, website, or topics provided.
TypeScript HTML Other
Branch: master
Clone or download
Latest commit da500a2 Sep 25, 2019

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.