For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Dev Portal
DocsAPI ReferenceLearnCommunityChangelog
DocsAPI ReferenceLearnCommunityChangelog
  • Overview
    • Quick Start
    • Sandboxes
    • Tools & SDKs
    • Support
  • Docs
      • Getting Started
      • Becoming a Partner
        • Introduction
        • Quick start
          • Introduction
          • Quick start: Deploy to Heroku install flow
          • Step 1: Set up your local environment
          • Step 2: Connect your app to BigCommerce
          • Step 3: Integrate BigCommerce APIs and add a database
          • Step 4: Enhance the user experience with BigDesign
        • Optimizing multi-storefront apps
        • Building for Catalyst
      • Metafields
      • Scripts
      • Shipping Providers
      • Tax Providers
    • Archive
    • Closed Beta Programs
Dev Portal
LogoLogo
DocsIntegrationsAppsTutorial: Next.js starter app

Quick Start: Deploy to Heroku Install Flow

Was this page helpful?
Previous

Introduction

Next

Set up Your Local Environment

Built with

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. To create a Heroku account, visit the Heroku signup page.

1

Fork the repo

Fork BigCommerce’s sample-app-nodejs repository.

2

Click deploy

In your fork, locate the README.md file. Click Deploy to Heroku. This will open Heroku’s Create New App page in your browser.

Deploy to Heroku

3

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.

4

BC DevTools: Create an app profile

To obtain the client ID and client secret, sign in to the Developer Portal and click Create app. Name the app and click Create.

Create App

5

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.

6

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

7

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.
8

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