Skip to navigation
DocsIntegrationsAppsGuide

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. This article introduces those tools and explains how to begin app development by registering and installing a draft app.

Start with the sample app

The fastest way to begin app development is to start with our sample app, the BigCommerce starter single-click app. BigCommerce maintains this sample app, so it stays current with the platform. It’s a Next.js starter, and it gives you the layers every single-click app needs:

  • The OAuth install and launch flow
  • Session management and per-request authorization
  • Per-store credential storage
  • BigCommerce REST and GraphQL API clients with rate-limit and timeout handling
  • Caching and error handling

It also includes a working example feature, a gift certificates manager, that shows those layers in a complete app. The sample app has a guide for each of the following ways to use it:

  • Run the example app. Clone the app and run it in a few steps, starting with mock data and ending with a working app connected to your own store. For steps, see the Apps quick start.
  • Use it as a tutorial. Build the app step by step, adding a BigDesign UI, REST API calls, and authentication and session management. See the tutorial in the repository.
  • Use it as a starter. Keep the core libraries and replace the example feature with your own. See Using as a starter in the repository.

If you prefer a different stack, these sample apps are also available:

Before you begin

Before you register and install a draft app, you need the following:

  1. A BigCommerce store to test app installation. You can use any store you own. Partners can also create a sandbox store.
  2. A Developer Portal account (required to register apps).
  3. A BigCommerce partnership (required to publish apps to the App Marketplace). To apply, see Becoming a partner.

Testing locally

BigCommerce calls your app’s callback URLs over the internet and renders the app in an iframe in the store control panel, so your local app needs a public HTTPS URL. To expose your local dev server using VS Code port forwarding, GitHub Codespaces, or ngrok, see Remote tunnels.

Register a draft app

After you expose your app to the internet, register it as a draft app in the Developer Portal using the app’s callback URLs. To register:

  1. Sign in to the Developer Portal.

  2. Click Create app.

  3. Give your app a name in the Set up your app dialog, then click Generate Credentials. This name is only visible to you.

  4. Click Finish. The app editor opens on the App information tab.

  5. Under Callback URLs, enter your app’s callback URLs using your tunnel URL. For example, with a tunnel at https://{app_origin}, enter the following:

    • Auth: https://{app_origin}/auth
    • Load: https://{app_origin}/load
    • Uninstall (optional): https://{app_origin}/uninstall

  6. Click the Scopes tab and select the OAuth scopes your app needs. For more information, see OAuth scopes.

  7. Click Save changes. If you changed scopes, click Confirm new scopes in the dialog that opens.

Your app’s client ID and client secret appear under Client credentials on the App information tab. You can also view them any time from the Developer Portal Apps overview. For more information, see Managing apps in the Developer Portal.

Install a draft app

A draft app can be installed by the store owner or by a user with the Install Applications permission, in a store where the app owner’s email address is registered. To install:

  1. Sign in to the store and go to Apps > Develop.
  2. Select the draft app.
  3. Click Install.

After you click Install, BigCommerce begins the OAuth flow by making a GET request to the app’s Auth callback URL. If the app handles all of the requests successfully, the app is installed and you can begin feature development. For more detail on installing and troubleshooting, see Testing your app.

Next steps

Resources

Tools

Blog posts