BigCommerce Apps Quick Start Tutorial

In this quick start tutorial, you’ll create a single-click app using CodeSandbox, Node.JS, and Express.

Get started

You’ll need a DevTools account to register the draft app and a BigCommerce store to test the installation. If you don’t already have both, get them now:

  1. Start a free trial
  2. Create a DevTools Account

Fork the sandbox

Once you have a DevTools account and a store, fork our express-hello-world-app. To do so:

  1. Open the Express Hello World App in CodeSandbox.
  2. Click Fork in the top right.

Register a draft app

Next, register a draft app in DevTools using the sandbox’s app URL. To do so:

  1. Login to DevTools
  2. Click Create an App
  3. Give the app a name
  4. Click Technical
  5. Enter Auth Callback URL. Ex: https://{{YOUR_FORK}}.sse.codesandbox.io/auth
  6. Enter Load Callback URL. Ex: https://{{YOUR_FORK}}.sse.codesandbox.io/load
  7. Enter Uninstall Callback URL. Ex: https://{{YOUR_FORK}}.sse.codesandbox.io/uninstall
  8. Click Update & Close
  9. Click View Client ID – this is the app’s client_id and client_secret

Keep this tab open for the next step.

Configure sandbox environment

After registering the app, enter the app’s credential’s and auth callback into your sandbox’s environment variables (codesandbox.io):

  • callback => https://{{YOUR_FORK}}.sse.codesandbox.io/auth
  • client_id => the app’s client ID from DevTools
  • client_secret => the app’s client secret from DevTools

Install the app

  1. Log in to your store and navigate to Apps > My Apps > My Draft Apps and install the app.
  2. If everything is configured correctly, you should get an Authorization Successful message.
  3. Navigate back to My Apps to see the list of installed apps.
  4. Click Launch on the draft app to test the /load callback.
  5. Navigate back to My Apps and click Uninstall to test the /uninstall callback.

Congrats! You’ve created and installed your first BigCommerce app.

Next steps

Resources