This starter app includes all the files necessary to get started with a basic, hello world app. This app uses NextJS, BigDesign, Typescript, and React.
To get the app running locally, follow these instructions:
- Use Node 18+ and NPM 8+. To check the running versions, use the following commands:
node -v
npm -v
- Clone and/or fork the repo and install npm packages:
git clone git@github.com:bigcommerce/sample-app-nodejs.git my-bigcommerce-app
cd my-bigcommerce-app
npm install
- To expose your app server using an HTTP tunnel, install ngrok globally, then start the ngrok service.
You can use npm
to install ngrok:
npm install -g ngrok
Alternatively, MacOS users can use the homebrew package manager:
brew install ngrok
Start ngrok on port 3000
to expose the default Next.js server:
ngrok http 3000
- Use the BigCommerce Developer Portal to register a draft app. For steps 5-7, enter callbacks as
'https://{ngrok_url}/api/{auth || load || uninstall}'
. Get thengrok_url
from the ngrok terminal session.
https://12345.ngrok-free.app/api/auth # auth callback
https://12345.ngrok-free.app/api/load # load callback
https://12345.ngrok-free.app/api/uninstall # uninstall callback
- Copy
.env-sample
to.env
.
cp .env-sample .env
-
In the
.env
file, replace theCLIENT_ID
andCLIENT_SECRET
variables with the API account credentials in the app profile. To locate the credentials, find the app's profile in the Developer Portal, then click View Client ID. -
In the
.env
file, update theAUTH_CALLBACK
variable with thengrok_url
from step 4. -
In the
.env
file, enter a secretJWT_KEY
. To support HS256 encryption, the JWT key must be at least 32 random characters (256 bits). -
Configure the data store. In the
.env
file, specify theDB_TYPE
.The DB type must be either
firebase
ormysql
.If using Firebase, supply the
FIRE_
config keys listed in the.env
file. See the Firebase quickstart (Google).If using MySQL, supply the
MYSQL_
config keys listed in the.env
file, then do the initial database migration by running the following npm script:
npm run db:setup
- Start your dev environment in a dedicated terminal session, separate from
ngrok
.
npm run dev
If
ngrok
expires, update the callbacks in steps 4 and 7 with the newngrok_url
. You can learn more about persisting ngrok tunnels longer (ngrok).
- Consult our developer documentation to install and launch the app.
In production, you must build and run optimized version of the code. Use the following commands to get started:
When you run the
start
script, specify a port number using the-p
flag. Otherwise, the process will fail.
npm run build
npm run start -p 3000