Deployment

October 13, 2021 · View on GitHub

This project is set up to deploy to Heroku, using the Container stack.

Prerequisites

The prerequisites to deploy to Heroku is the same as the local development environment.

You'll also need to setup up the .env file in your project directory.

Heroku Setup

brew tap heroku/brew && brew install heroku

Set up an app:
```
npm run heroku:setup
```
You may be asked to login so the Heroku CLI can perform tasks in your account.

At the end of the process (which will take about 5 minutes), you'll be shown the details of your app, including the URL of where you can access the app.

Manual Deployment

npm run heroku:deploy

Automatic Deployment

This repo also contains a GitHub Actions deployment workflow. Any new commits to the main branch will trigger the workflow.

⚠️ IMPORTANT: You still need to run the Heroku setup step before you can automatically deploy.

Create a Heroku API token:

heroku authorizations:create -d "GitHub Actions"

Copy the "Token" value.

Add the following GitHub repository secrets:

Secret	Description
`HEROKU_API_KEY`	The Heroku authorization token
`HEROKU_APP_NAME`	The Heroku app name (`heroku apps` if you forgot it)
`HEROKU_EMAIL`	Email that you use with Heroku

From now on, whenever you push or merge into the main branch, or create a pull request, GitHub will automatically deploy the branch to Heroku! 🙌

Custom Environment Variables

Node/Express

Add via Heroku config vars.

React

For any REACT_APP_* environment variables, you need to add them in three places:

1. GitHub Secrets

Add the appropriate keys and values via GitHub secrets.

For this example, we'll use REACT_APP_TITLE and REACT_APP_SUBTITLE.

2. `.github/workflows/deploy.yaml`

For the "Deploy to Heroku" step, add all the variables to the with/docker_build_args and env sections. For example:

with:
  ...
  docker_build_args: |
    REACT_APP_TITLE
    REACT_APP_SUBTITLE
env:
  REACT_APP_TITLE: ${{ secrets.REACT_APP_TITLE }}
  REACT_APP_SUBTITLE: ${{ secrets.REACT_APP_SUBTITLE }}

3. `Dockerfile`

You'll also need to add the same variable key as a Docker build arg for the app stage.

It should look something like this:

FROM node:lts-alpine as app
ARG NODE_ENV=production
ARG REACT_APP_TITLE
ARG REACT_APP_SUBTITLE
…

Tips

Task	Command
Access your app	`heroku open`
See the running app log	`heroku logs -t`
See details about your app	`heroku apps:info`
Rename your app	`heroku apps:rename <NEWNAME>`
Access the app dashboard	`npm run heroku:dashboard`
Access the Heroku PostgreSQL instance	`npm run heroku:psql`
See the database connection string	`heroku config:get DATABASE_URL`
Access the database dashboard	`heroku addons:open DATABASE`

Keeping Your Databases Up to Date

As you start to implement your own features, your database schema will start to diverge from this example. The general workflow as you evolve your schema is:

Make changes to local DB
Update pg/seed.psql
Re-initialize the Heroku database

Update pg/seed.psql

npm run db:pg_dump

Re-Initialize the Heroku Database

npm run heroku:db:init

⚠️ This is a destructive command which will:

Delete your existing schema and data in your Heroku PostgreSQL DB.
Re-initialize the Heroku database with pg/seed.psql.