> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# 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](/developer/docs/overview/sandboxes) (required to test app installation)
2. [Developer Portal Account](https://build.bigcommerce.com/) (required to register apps)
3. [BigCommerce partnership](https://www.bigcommerce.com/partners/) (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](/developer/docs/integrations/apps/quick-start).

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

* [Node / React / Next.js](https://github.com/bigcommerce-edu/starter-sc-app-next/)
* [Python / Flask](https://github.com/bigcommerce/hello-world-app-python-flask)
* [PHP / Silex](https://github.com/bigcommerce/hello-world-app-php-silex)
* [Ruby / Sinatra](https://github.com/bigcommerce/hello-world-app-ruby-sinatra)
* [Laravel / React](https://github.com/bigcommerce/laravel-react-sample-app)

## Testing locally with ngrok

You can use [ngrok](https://ngrok.com/) to test apps locally. It's easy to install and works well with [Express](https://expressjs.com/):

```shell showLineNumbers={false}
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](https://medium.com/bigcommerce-developer-blog/how-to-test-app-authentication-locally-with-ngrok-149150bfe4cf) on our [developer blog](https://medium.com/bigcommerce-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](https://build.bigcommerce.com/) using the app's callback URLs. Use the following steps to register:

1. [Sign in to the Developer Portal](https://build.bigcommerce.com/).
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](https://build.bigcommerce.com/apps) 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**](https://login.bigcommerce.com/deep-links/manage/marketplace/apps/my-apps/drafts).
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](https://medium.com/bigcommerce-developer-blog/how-to-test-app-authentication-locally-with-ngrok-149150bfe4cf)

## Resources

### Related articles

* [Building Apps Quick Start](/developer/docs/integrations/apps/quick-start)

### Sample apps

* [Node / React / Next.js](https://github.com/bigcommerce-edu/starter-sc-app-next)
* [Python / Flask](https://github.com/bigcommerce/hello-world-app-python-flask)
* [PHP / Silex](https://github.com/bigcommerce/hello-world-app-php-silex)
* [Ruby / Sinatra](https://github.com/bigcommerce/hello-world-app-ruby-sinatra)
* [Laravel / React](https://github.com/bigcommerce/laravel-react-sample-app)

### Tools

* [Node API Client](https://github.com/bigcommerce/node-bigcommerce/)
* [Python API Client](https://github.com/bigcommerce/bigcommerce-api-python)
* [PHP API Client](https://github.com/bigcommerce/bigcommerce-api-php)
* [Ruby API Client](https://github.com/bigcommerce/bigcommerce-api-ruby)
* [Ruby OmniAuth Gem](https://github.com/bigcommerce/omniauth-bigcommerce)
* [BigDesign Developer Playground](https://developer.bigcommerce.com/big-design)
* [Figma Component Library](https://www.figma.com/community/file/1359989842592268260/bigdesign-component-library)

### Blog posts

* [How to Test App Authentication Locally with ngrok](https://medium.com/bigcommerce-developer-blog/how-to-test-app-authentication-locally-with-ngrok-149150bfe4cf)
* [Building a BigCommerce App Using Laravel and React](https://medium.com/bigcommerce-developer-blog/building-a-bigcommerce-app-using-laravel-and-react-711ceceb5006)
* [BigDesign Tutorial](https://medium.com/bigcommerce-developer-blog/bigdesign-build-native-looking-uis-with-the-bigcommerce-design-system-fb06a01a24f2)