BigCommerce App Development: How to Build One

If you are the BigCommerce merchants who show lots of interest about building your own application, this article will give you a closer look at BigCommerce App Development, from beginning to advanced knowledge.

What is BigCommerce app development?

“BigCommerce app development” refers to creating custom applications or integrating existing software tools to extend and enhance the functionality of BigCommerce stores. 

The development phase is aimed at improving various aspects of an e-commerce operation, including but not limited to marketing efforts, analytics, inventory management, and the overall customer experience.

Requirements before beginning BigCommerce app development

Before diving into creating your BigCommerce app, there are a few things you need to have in place:

1. BigCommerce Sandbox Store: This is essential for testing your app installation. Think of it like a playground where you can try out your app without positively affecting actual BigCommerce store owners. It’s like practicing before the big game.
2. Developer Portal Account: You must sign up for a BigCommerce developer account in the Developer Portal. This account allows you to register your submit apps. It’s like having a ticket to the developer’s backstage area.
3. BigCommerce Partnership: To publish your app to the BigCommerce marketplace, you need to be one of the BigCommerce partners. It’s like being on the guest list to showcase your app to the world.

How to start building BigCommerce Apps

1. Test former apps

Install with npm:

First things first, ensure you have Node.js installed on your computer. Confirm node is installed and check its version by running this terminal command: node -v 

Now, let’s install ngrok globally using npm. This command will make ngrok accessible from any directory: npm install -g ngrok 

Starting ngrok:

Open up a terminal window and navigate to the location where you unzipped ngrok. You’re good to go from any directory if you installed it globally or added it to your $PATH.

Now, let’s fire it up! Run the following command to start ngrok and create a tunnel to localhost port 3000: ngrok http 3000 

To stop ngrok, simply press Ctrl + C in the terminal window where it’s running.

Creating an Express App:

Install the Express Generator: This command line tool helps generate an Express app skeleton effortlessly. Install it globally using npm: npm install express-generator -g

Generate the App: Specify the view engine (we’ll use handlebars) and create a folder named “myapp”: express –view=hbs myapp

Navigate to App Directory: Move into the “myapp” folder: cd myapp

Install Dependencies: Install all the necessary dependencies for your app: npm install

Tunneling ngrok to localhost:

Start ngrok: Now, let’s tunnel your local server with ngrok. Open a terminal window, navigate to your “myapp” directory, and run your app: npm start 

Access the app Locally: Open a browser window and go to LocalHost3000. You should see your Express app’s homepage.

Tunnel with ngrok: Open another terminal window (keep the first one running) and start ngrok on port 3000: ngrok http 3000

Access the Tunnel URL: Copy the HTTPS forwarding URL from the terminal and paste it into a new browser tab. You should see the same Express app homepage as before.

2. Registering a draft app

Sign up for a BigCommerce Store: 

You’ll need a store before anything else. Sign up for a free trial at their company website here

Create a Dev Tools Account: 

Head to the developer area and click “Create Account” in the top right corner. Use the same email address you used for your trial store. This ensures that your trial store and Dev Tools accounts are linked, making any apps you create in Dev Tools available for installation in your store’s control panel.

Login and Create an App:

• Log in to Dev center –> Dev Tools and hit the orange “Create an app” button.

• Give your app a name. It can be anything you like, such as “My Test App” or “Node App“.

• Click “Create App“.
• Once created, click the “Edit App” icon on your newly created app.

Setup App Details:

Step 1: You can skip filling out the profile form if you’re not planning to submit your app to the App Marketplace. However, uploading an image to the App summary area is nice for a better visual representation.

Step 2: Skip this step; it’s only required for BigCommerce developers submitting apps to the Marketplace.

Step 3: Here, fill in the Callback URL fields. Replace “example.com” with the HTTPS forwarding URL from ngrok. 

For example:

• Auth: https://4022ffe4111.ngrok.io/auth
• Load: https://4022ffe4111.ngrok.io/load
• Uninstall: https://4022ffe4111.ngrok.io/uninstall

Step 4: Click “Next” until you reach Step 6, then hit “Update and Close“.

3. Installing a draft app

Installing a draft app is a straightforward process. Here’s how you can do it:

Step 1: Sign in to your store account and go to Apps > My Apps > My Draft Apps.

Step 2: Locate the draft app thumbnail you want to install and click on it.

Step 3: BigCommerce will initiate the OAuth flow after clicking Install by sending a GET request to the app’s/auth callback URL.

Step 4: If the app handles all the requests successfully, it will be installed, and you can start developing its key features immediately.

Tools for BigCommerce App Development

When it comes to building BigCommerce agency apps, you’ve got some handy tools with similar functions to BigCommerce API at your disposal:

1. Node API Client: This tool helps you interact with BigCommerce experts using Node.js, a popular BigCommerce partner programming language. It’s like having a special translator to talk to BigCommerce.
2. Python API Client: Similar to the Node API Client id, but tailored for those who prefer working with Python. It’s like having a different kind of translator, but still just as useful.
3. PHP API Client: If PHP is your language of choice, this tool helps you work smoothly with BigCommerce. It’s like having a guidebook specifically written in PHP.
4. Ruby API Client: Like the others, but for Ruby developers. It’s like having a personal assistant who speaks Ruby and knows everything about BigCommerce.
5. Ruby OmniAuth Gem: This is a special tool for authentication in Ruby apps. It’s like having a key to access BigCommerce features securely.
6. Big Design Developer Playground: You can experiment with design ideas for your BigCommerce app. It’s like a sandbox for creativity.
7. Figma UI Kit: Figma is a tool for designing user interfaces, and this kit provides theme resources specifically for BigCommerce apps. It’s like having a set of blueprints to build your app’s look and feel.
8. Adobe Illustrator UI Kit: Similar to the Figma App’s UI Kit, but designed for use with Adobe Illustrator. It’s like having a different set of blueprints, but still just as helpful.

Sample apps from the BigCommerce app development

Here are some example BigCommerce apps that you can make using BigCommerce app development:

1. Node / React / Next.js: This app uses Node.js for the backend, React for the front end, and Next.js BigCommerce for server-side rendering. It’s like building a sturdy house with a modern design.
2. Python / Flask: If you prefer Python, you can create an app using Flask, a lightweight web framework. It’s like cooking up a delicious dish using a simple recipe.
3. PHP / Silex: You can craft a straightforward app with PHP and Silex, a micro-framework. It’s like building a basic but functional tool using familiar materials.
4. Ruby / Sinatra: Ruby developers can use Sinatra, a domain-specific language, to create a lightweight web app. It’s like assembling a small but effective toolkit for a specific task.
5. Laravel / React: Combining Laravel, a PHP framework, with React for the front end, you can build a robust and interactive app. It’s like constructing a sophisticated building with traditional and modern architecture.

Final words

BigCommerce app development encompasses creating and optimizing e-commerce applications on the BigCommerce platform, focusing on assisting your online store with customization, scalability, and integration with third-party services.