Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

dbbuilder/bc_sampleapp

Open more actions menu
 
 

Repository files navigation

NextJS Sample App

This demo includes all of the files necessary to get started with a basic, hello world app. This app was built using NextJS, BigDesign, Typescript, and React.

App Installation

Deploy

To get the app running locally, follow these instructions:

  1. Use Node 14+ and NPM 7+
    • node -v
    • npm -v
  2. Install npm packages
    • npm install
  3. Add and start ngrok. Note: use port 3000 to match Next's server.
    • npm install ngrok
    • ngrok http 3000
  4. Register a draft app.
    • For steps 5-7, enter callbacks as 'https://{ngrok_id}.ngrok.io/api/{auth||load||uninstall}'.
    • Get ngrok_id from the terminal that's running ngrok http 3000.
    • e.g. auth callback: https://12345.ngrok.io/api/auth
  5. Copy .env-sample to .env.
    • If deploying on Heroku, skip .env setup. Instead, enter env variables in the Heroku App Dashboard under Settings -> Config Vars.
  6. Replace client_id and client_secret in .env (from View Client ID in the dev portal).
  7. Update AUTH_CALLBACK in .env with the ngrok_id from step 5.
  8. Enter a jwt secret in .env.
    • JWT key should be at least 32 random characters (256 bits) for HS256
  9. Specify DB_TYPE in .env
    • Either firebase or mysql
    • If using Firebase, enter your firebase config keys. See Firebase quickstart
    • If using MySQL, enter your mysql database config keys (host, database, user/pass and optionally port). If not using the heroku deploy button above, you will now want to run npm run db:setup to perform the initial database setup. Note: if using Heroku with ClearDB, the DB should create the necessary Config Var, i.e. CLEARDB_DATABASE_URL.
  10. Start your dev environment in a separate terminal from ngrok. If ngrok restarts, update callbacks in steps 4 and 7 with the new ngrok_id.
    • npm run dev
  11. Install the app and launch.

About

A reference implementation of a BigCommerce single-click app, in Node.JS + Next.js/React

Resources

License

Stars

0 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • TypeScript 95.1%
  • JavaScript 4.9%
Morty Proxy This is a proxified and sanitized view of the page, visit original site.