BigCommerce
Integrations
Apps
Guide
Beginning development

Beginning App Development

The BigCommerce team has developed an array of sample apps and tools to assist developers in the initial phase of app development. In this article, we'll introduce those tools and go over how to begin app development by installing and registering a draft app.

Getting started

Here's a few things you'll need before beginning app development:

  1. BigCommerce sandbox store (required to test app installation)
  2. Developer Portal Account (opens in a new tab) (required to register apps)
  3. BigCommerce partnership (opens in a new tab) (required to publish apps to marketplace)

Beginning quickly

The fastest way to begin app development is by starting with one of our sample apps. You can follow our Building Apps Quick Start Tutorial, either alone or in conjunction with spinning up a Heroku instance (opens in a new tab) that runs our Node / React / Next.js sample app (opens in a new tab).

Alternatively, you can clone the GitHub repo for your preferred stack:

Testing locally with ngrok

You can use ngrok (opens in a new tab) to test apps locally. It's easy to install and works well with Express (opens in a new tab):

npm install express-generator -g # install express generate
 
express myapp                    # generate new express app
 
cd myapp                         # move into app dir
 
npm install ngrok                # install ngrok
 
npm install                      # install dependencies
 
npm start                        # start app
 
ngrok http 3000                  # start ngrok

For step-by-step instructions, see How to Test App Authentication Locally with ngrok (opens in a new tab) on our developer blog (opens in a new tab).

Registering a draft app

Once you've exposed your app to the internet, you can register it as a draft app in the Developer Portal (opens in a new tab) using the app's callback URLs. Use the following steps to register:

  1. Sign in to the Developer Portal (opens in a new tab).
  2. Click Create an App.
  3. Name your app.
  4. Click Technical.
  5. Enter your app's callback URLs. If you're using ngrok, they'll look like this:
    • Auth: https://4022ffe4.ngrok.io/auth
    • Load: https://4022ffe4.ngrok.io/load
    • Uninstall: https://4022ffe4.ngrok.io/uninstall
  6. Click Update & Close.
  7. Click View Client ID to view the app's client_id and client_secret.

Installing a draft app

Any store registered to the same email as your Developer Portal (opens in a new tab) account can install your draft apps. Use the following steps to install:

  1. Sign in to the store and navigate to Apps > My Apps > My Draft Apps (opens in a new tab).
  2. Click the draft app thumbnail to install the draft.
  3. Once you click Install, BigCommerce will begin the OAuth flow by making a GET request to the app's /auth callback URL. If the app handles all the requests successfully, the app has been installed and you can begin feature development.

Next steps

Resources

Related articles

Sample apps

Tools

Blog posts

Did you find what you were looking for?
Types of appsManaging apps in Dev Portal