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
          • Types of apps
          • Building Catalyst-compatible apps and integrations
          • Beginning development
          • Managing apps in Dev Portal
          • Locating app IDs
          • Implementing OAuth
          • Handling callbacks
          • Supporting multiple users
          • Listening for events
          • Designing the UI
          • Creating install buttons
          • Following best practices
          • Approval requirements
          • Publishing apps
        • Optimizing multi-storefront apps
        • Building for Catalyst
      • Metafields
      • Scripts
      • Shipping Providers
      • Tax Providers
    • Archive
    • Closed Beta Programs
Dev Portal
LogoLogo
On this page
  • Getting started
  • Beginning quickly
  • Testing locally with ngrok
  • Registering a draft app
  • Installing a draft app
  • Next steps
  • Resources
  • Related articles
  • Sample apps
  • Tools
  • Blog posts
DocsIntegrationsAppsGuide

Beginning App Development

Was this page helpful?
Previous

Building Catalyst-compatible apps and integrations

Next

Managing apps in Dev Portal

Built with

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 (required to register apps)
  3. BigCommerce partnership (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 that runs our Node / React / Next.js sample app.

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

  • Node / React / Next.js
  • Python / Flask
  • PHP / Silex
  • Ruby / Sinatra
  • Laravel / React

Testing locally with ngrok

You can use ngrok to test apps locally. It’s easy to install and works well with Express:

npm install express-generator -g # install express generate
express myapp # generate new express app
cd myapp # move into app dir
brew install ngrok/ngrok/ngrok # install ngrok using homebrew
ngrok config add-authtoken <TOKEN> # Obtain your authtoken by going to https://dashboard.ngrok.com/get-started/your-authtoken
npm install # install dependencies
ngrok http http://localhost:8080 # start app

For step-by-step instructions, see How to Test App Authentication Locally with ngrok on our developer blog.

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 using the app’s callback URLs. Use the following steps to register:

  1. Sign in to the Developer Portal.
  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 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.
  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

  • Learn How Test App Authentication Locally with ngrok

Resources

Related articles

  • Building Apps Quick Start

Sample apps

  • Node / React / Next.js
  • Python / Flask
  • PHP / Silex
  • Ruby / Sinatra
  • Laravel / React

Tools

  • Node API Client
  • Python API Client
  • PHP API Client
  • Ruby API Client
  • Ruby OmniAuth Gem
  • BigDesign Developer Playground
  • Figma Component Library

Blog posts

  • How to Test App Authentication Locally with ngrok
  • Building a BigCommerce App Using Laravel and React
  • BigDesign Tutorial