Production Deployment - citizenkanineapp/citizenkanineapp GitHub Wiki

Heroku

login to heroku

PROD vs STAGING environments

Heroku PostgreSQL

Database Schema

PostgreSQL database organized into schemas.

Production app reads and writes to PROD. Client data sourced from Citizen Kanine QB account.

Staging app reads and writes to STAGE. Client data sourced from developer sandbox QB acccount.

Deploy to Heroku with git CLI

to create new git remote location:

git remote add <remote-name> <url>
-----
git remote add heroku https://git.heroku.com/citizen-kanine.git
git remote add staging https://git.heroku.com/ck-staging.git

confirm git remote:

± git remote -v
heroku  https://git.heroku.com/citizen-kanine.git (fetch)
heroku  https://git.heroku.com/citizen-kanine.git (push)
origin  [email protected]:citizenkanineapp/citizenkanineapp.git (fetch)
origin  [email protected]:citizenkanineapp/citizenkanineapp.git (push)
staging https://git.heroku.com/ck-staging.git (fetch)
staging https://git.heroku.com/ck-staging.git (push)
# push to PROD
git push heroku

# push to STAGE
git push ck-staging

*** IMPORTANT *** npm script heroku-postbuild in package.json must be manually edited before pushing to target build environment.

  "scripts": {
    "start": "node server/server.js",
    "client": "env-cmd -e development react-scripts start",
    "server": "nodemon --watch server server/server.js",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "build-dev": "env-cmd -e development npm run-script build",
    "build-stage": "env-cmd -e staging npm run-script build",
    "build-prod": "env-cmd -e production npm run-script build",
    "heroku-postbuild": "npm run-script build-prod",
    "eject": "react-scripts eject",
    "clean": "rm -rf node_modules"
  },
# for DEV
"heroku-post"build": "npm run-script build-dev"
# for STAGE
"heroku-post"build": "npm run-script build-stage"
# for PROD
"heroku-post"build": "npm run-script build-prod"

These script set the value of REACT_APP_REDIRECT environment variable via https://github.com/citizenkanineapp/citizenkanineapp/blob/main/.env-cmdrc

These front-end redirects facilitate OAUTH2 flow when connecting to QB API.

Heroku build process can intelligently determine env variable as ENV=PROD or ENV=STAGING in the Node Server. However, it cannot do the same for the client-side React build. This is a hack-y solution.

Citizen Kanine Intuit App

WARNING confusing naming conventions at work here.

  • "CK Intuit App" refers to a "daemon app" hosted by Intuit and accessed via the Intuit developer portal.
  • "CK Production App" refers to the actual cloud-hosted production React application
  • "CK QB Account" refers to the Quickbooks account owned by Citizen Kanine. It is the ultimate source of truth for client data and invoices.
  • "Sandbox QB Account" refers to the Quickbooks sandbox account owned by the [email protected] Intuit developer account. It is a mock of the CK QB Account, containing dummy data.

Login to intuit developer portal

The CK Intuit App (accessed via app dashboard) grants read and write access to CK Production App for connected Quickbook accounts.

It can be accessed first via the Citizen Kanine Workspace via the top right menu bar

My Hub > Workspaces

and once inside, via the CK App.

The CK Intuit App has a set of both PROD and DEV credentials. PROD credentials give app read and write access to CK QB account. DEV credentials give app read and write access to Sandbox QB Account. For local development, DEV keys need to be added to .env. For PROD and STAGE cloud environments, keys are already stored on Heroku and connected to their respective apps. PROD app uses PROD credentials; STAGE app uses DEV credentials.

To view credentials, navigate to CK App, and then to Keys and Credentials via the sidebar

To view URI callbacks, navigate to CK App --> Settings --> Redirect URI

Screenshot_20250222_103842

No further configuration needed.

⚠️ **GitHub.com Fallback** ⚠️