Running Express server and React frontend on Heroku

Question

I'm self-learning web development using React, Node, and Express, and am trying to deploy my app to Heroku.

The problem I'm facing is that locally I can run both my server and client with no issue using npm start for the client and node server.js to start my express server.

However, I haven't been able to find an appropriate way to do something similar on Heroku - I've read through all the articles about deploying similar apps to Heroku and running my react client through the express server, but haven't managed to get it working.

Here's some additional info that might be relevant:

I created my react app using create-react-app, so it has a public folder (which I haven't actually touched at all apart from attempting to run my react js scripts through index.html) and a src folder which contains all my react components and the index which renders the app
My server.js file is in the root of my git directory, and locally everything it should do works.
I've tried using package.json scripts to run the node server.js command in the postbuild, but if I use the node command anywhere at all, my console is blocked by the server running once the command runs (ie when I use git push heroku master, once it reaches this command it is blocked)

Please let me know if more info is needed, any help would be appreciated.

Cheers

mirsahib · Accepted Answer · 2021-12-06 08:03:36Z

2

I am assuming you have a folder structure like below

client
--App.js
--package.json
server.js
package.json

Inside the server.js link the react build file with the server

const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 5000;

  // Serve any static files
  app.use(express.static(path.join(__dirname, 'client/build')));

  // Handle React routing, return all requests to React app
  app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
  });
app.listen(port, () => console.log(`Listening on port ${port}`));

In the package.json (which reside in the root directory) paste the following

"scripts": {
    "client": "cd client && yarn start",
    "server": "nodemon server.js",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"",
    "dev:server": "cd client && yarn build && cd .. && yarn start",
    "start": "node server.js",
    "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
  },

In the client/package.json paste the following after script tag

"proxy": "http://localhost:5000/",

How this work

The first thing heroku will do is to start the server by executing the npm run command (default behavior for heroku) then it will execute the postbuild command heroku-postbuild,Here it will goto the client folder then install the necessary react package then execute the build command from client/package.json file.

What is the point of adding a proxy tag inside client/package.json

To tell the development server to proxy any unknown requests to your

Reference

edited Dec 6, 2021 at 8:03

answered Dec 6, 2021 at 7:56

mirsahib

4452 gold badges5 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

aagenda Over a year ago

Hi, thanks for the reply. Previously I was not using yarn or nodemon so I have installed them and put the scripts as you mentioned. The app doesn't build anymore, but I think I may have found a problem with my folder structure - I don't actually have a separate package.json file in my app folder - would I need to initialize this in any special way?

mirsahib Over a year ago

@aagenda yes you need a separate package.json for your server and client package.json will be same as when you run create-react-app command

aagenda Over a year ago

I see. I've added it in but am now getting the following error when I try to push it to heroku: npm ERR! fsevents not accessible from jest-haste-map I've looked at articles about this error but none seem relevant to what I've done.

mirsahib Over a year ago

in your root directory you might have package-lock.json file, delete that and then upload.is it possible to give your github project link

aagenda Over a year ago

Hi, apologies I'm not too keen on sharing the github project as it contains some private info. Deleting the package-lock allowed me to successfully push my branch onto heroku - but when I access the page it only displays "Not Found."

|

Collectives™ on Stack Overflow

Running Express server and React frontend on Heroku

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related