Docs
Integrations
Apps
Tutorial: Next.js starter app
Quick start: Deploy to Heroku install flow

Quick Start: Deploy to Heroku Install Flow

If you want to skip the tutorial and get the app running quickly, you can use this install flow to deploy the sample app to Heroku (opens in a new tab). To create a Heroku account, visit the Heroku signup page (opens in a new tab).

Fork the repo

Fork the BigCommerce's sample-app-nodejs (opens in a new tab) repository.

Click deploy

In your fork, locate the README.md file. Click Deploy to Heroku. This will open Heroku's Create New App (opens in a new tab) page in your browser.

Deploy to Heroku

Heroku: add app details

When prompted, fill out your app details including giving your app a name.

Scroll down to Config Vars and replace the <APP NAME> placeholder inside AUTH_CALLBACK with your app's name.

BC DevTools: Create an app profile

To obtain the client ID and client secret, sign in to the Developer Portal (opens in a new tab) and click Create an app. Name the app and click Create. For now, click Close to continue without entering information.

Create an App

Add the app API account to Heroku

On the My Apps page of the BC Developer Portal, locate your newly created app and click View Client ID. This will open a new window displaying your client ID and client secret.

Copy and paste your app's client ID and client secret into your Heroku app.

Heroku: Deploy app server

Click Deploy app at the bottom of Heroku's Create New App page. Wait for the deploy script to finish running.

Deploy app

BC DevTools: Add Heroku callback URLs

  1. In the Developer Portal, click Edit App.
  2. Open the Technical tab. Select STORE OWNER for Multiple Users and SINGLE-CLICK for App Type.
  3. Scroll down to Callback URLs and update Auth, Load, and Uninstall URLs, replacing placeholders with your Heroku app URL. For example, your Auth Callback should look similar to the following: https://heroku-sample-app.herokuapp.com/api/auth.
  4. Scroll down to OAuth scopes and set the Products access to MODIFY.
  5. Click Update & Close.

Install the app on your sandbox

In your sandbox store control panel, go to Apps > My Apps > My Draft Apps. Open your app and press Install. Click Confirm. This will install the app on your store. The installed app should look similar to the following:

Home page

Home page

Products page

Products page

Product page

Product page

Did you find what you were looking for?