Install with npm

1. Be sure you have Node.js installed on your computer. Run the following terminal command to confirm Node is installed and check your version:
   node -v
2. Run npm install -g ngrok to install ngrok globally. You can now run ngrok commands from any directory.

Install manually

1. Head to https://ngrok.com/download and download the package that corresponds to your operating system.
2. Unzip the file somewhere easy to access, like the root folder.
3. You can either navigate to the folder where you unzipped ngrok to run it, or if you want to run ngrok from any location, you can move it to a directory which is in your $PATH, usually /usr/local/bin.

Start ngrok

1. Open a terminal window and navigate to the location where you unzipped ngrok. If you’ve installed ngrok globally or moved it to your $PATH, you can go ahead and run ngrok from any directory.
2. Run the following command to start ngrok and create a tunnel to localhost port 3000:
   ngrok http 3000
3. Press Ctrl + C to stop ngrok.

Create an Express App

Express is a framework for creating skeleton Node.js apps. It’s a great way to quickly create the file structure for your app.

1. Install the express generator command line tool with the following terminal command:
   npm install express-generator -g
2. Create the app. We’re specifying that the app should use the handlebars view engine and be created in a folder called myapp:
   express --view=hbs myapp
3. Navigate into the myapp folder:
   cd myapp
4. Install the dependencies:
   npm install
5. Start the app with the following command:
   npm start

Tunnel ngrok to localhost

Time to put the pieces together. We’ve installed ngrok and created a skeleton app using Express. Now, we’ll start the application and ngrok to see the tunnel URL in action.

1. Open a terminal window and navigate to your myapp directory. Run npm start to start the app. By default, Express generator apps start the server on localhost:3000. If you want to change the port, it’s defined in the app’s bin/www file on line 15, but we’ll leave it on port 3000 for now.
2. Open a browser window and navigate to http://localhost:3000. You should see the Express app home page:

3. Open a new terminal window (leave the first terminal window running) and start ngrok on port 3000:
ngrok http 3000

4. Copy the https forwarding URL from the terminal and paste it into a new browser tab. You should see the same Express app homepage that you saw on your localhost URL:

Register the App

To install an app in a BigCommerce store, you’ll need, not surprisingly….a store. Sign up for a free trial at https://www.bigcommerce.com/.

Then, sign up for a Dev Tools account at https://developer.bigcommerce.com/ by clicking Create Account in the top right corner. Be sure to use the same email address that you used to sign up for your trial store. Using the same email address links your trial store and your Dev Tools accounts, so any apps that you create in Dev Tools will be available for installation in the Draft Apps area of your store’s control panel.

Dev Tools is the workspace for creating BigCommerce apps. It’s where you go to register a new app and manage app listing details if you’re a vendor in the App Marketplace. For now, we’ll just do the minimum steps to register a new app and get a Client Id and Client Secret.

1. Log in to Dev Tools and click the orange Create an app button.
2. Enter a name for your app. This could be anything — My Test App, Node App, whatever you’d like.
3. Click Create App.
4. Click the Edit App icon on the app you created.
5. On Step 1, you can skip filling out the profile form. This just collects information that BigCommerce needs for developers who want to submit their app to the App Marketplace. It’s not required, but I do like to go ahead and upload an image to the App summary area at the bottom. The image will show on the card for your draft app in the control panel. Again, not required, but it does look nicer.
6. Skip Step 2: App Details and proceed to Step 3. App details are required only for developers who want to submit an app to the Marketplace.
7. On Step 3, fill in the Callback URL fields, replacing example.com with your https forwarding URL from ngrok. For example:
   Auth: https://4022ffe4.ngrok.io/auth
   Load: https://4022ffe4.ngrok.io/load
   Uninstall: https://4022ffe4.ngrok.io/uninstall
8. Click Next until you reach Step 6, then click Update and Close.

Create the Auth route:

1. Install the BigCommerce Node Client by running npm install node-bigcommerce in your myapp directory. This package was written by the developers at Conversio, and is used to authenticate with and call the BigCommerce API.
2. Create a new file in the routes directory called auth.js.
3. Paste the following into the file contents:

const express = require('express'),
router = express.Router(),
BigCommerce = require('node-bigcommerce');

const bigCommerce = new BigCommerce({
clientId: 'your Client Id from app registration',
secret: 'your Client Secret from app registration',
callback: 'https://your-ngrokURL/auth',
responseType: 'json'
});

router.get('/', (req, res, next) => {
bigCommerce.authorize(req.query)
.then(data => console.log(data))
.then(data => res.render('auth', { title: 'Authorized!' })
.catch(err));
});
module.exports = router;

4. Replace the values for your Client Id, your Client Secret, and your ngrok tunnel URL.
5. Create the ‘auth’ view by creating a new file in your Views folder called auth.hbs.
6. Paste the following into the file contents:
<h1>{{title}}</h1>