Deploy the backend and frontend on the same Heroku app/dyno

by

I just successfully completed this goal using static files created during a heroku postbuild step, as described in this blogpost. I have a React frontend (could be anything though) and Express API backend. Each process has its own port in dev, but deploying on Heroku uses just one total.

  1. Put the working frontend in a subdirectory of root (such as /frontend).
  2. Put the working backend in a subdirectory of root (such as /api — the blogpost assumes the backend remains in the root directory — either way is fine).

  3. Proxy API requests from the frontend to the backend by adding this line to /frontend/package.json (replacing 5000 with your backend port):

    “proxy”: “http://localhost:5000”,

  4. Add the following to api/app.js (or api/index.js) in the backend (be sure the last part is AFTER you define the appropriate backend [or api] paths):

const path = require('path')

// Serve static files from the React frontend app
app.use(express.static(path.join(__dirname, '../frontend/build')))

// AFTER defining routes: Anything that doesn't match what's above, send back index.html; (the beginning slash ("https://stackoverflow.com/") in the string is important!)
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname + '/../frontend/build/index.html'))
})
  1. Edit the root directory’s /package.json file with something like the following (note that using the concurrently package allows an easy way to run the whole app locally with npm run dev, but only heroku-postbuild is required here):
  "scripts": {
    "frontend": "cd frontend && npm start",
    "api": "cd api && nodemon app.js",
    "dev": "concurrently --kill-others-on-fail \"npm run api\" \"npm run frontend\"",
    "heroku-postbuild": "cd frontend && npm install && npm run build"
  },
  1. Make sure you install all backend package dependencies in the root directory, or you will get errors.
  2. Make sure your /Procfile has something like web: node api/app.js

Leave a Comment