NPM run build with React + Node + concurrently How to?

Question

I have spend hours trying to figure this out any advice is welcome. The objective here is to assemble a postbuild script that will work on a nodeJS app running a react client.

React is on post 3000 and node is on 5000. So it requires the concurrently library. Below are two attempts do-postbuild and heroku-postbuild (both fail).

  "scripts": {

    "server": "nodemon server.js --ignore client",
    "client": "npm start --prefix ../client",
    "dev": "concurrently \"npm run server\" \"npm run client\" ",
    "do-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix && npm run build --prefix client",
    "heroku-postbuild": "cd ../client && npm install && npm install --only=dev --no-shrinkwrap && npm run build" 
  },

folder structure

client
server
   |_package.json (above)
   |_server.js

npm run dev - WORKS perfectly

When I attempt npm run heroku-postbuild it yields the following:

npm ERR! errno 1
npm ERR! ver1.02@1.0.0 heroku-postbuild: `cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build`
npm ERR! Exit status 1

When attempting to write npm run do-postbuild it throws an error like it is searching for client in the server folder

npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/Users/sites/server/client/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

I stopped using concurrently and deployed production versions of the client and server separately. Someone down voted the solution but it worked perfectly for me. — Michael Nelles, Apr 02 '20 at 17:18
I did my first production builds (while learning Node/React) on Heroku there are lots of guides. The day will come as it did for me where you must be able to deploy on a native LINUX Box this is how I did it. — Michael Nelles, Apr 02 '20 at 17:38

Michael Nelles · Accepted Answer · 2020-04-02T17:43:20.157

3

This is not a HEROKU solution it is for general UBUNTU server with root access.

Solution here is you don't have to dockerize the app as a bundle (client and server together).

What worked for me was to treat the client and server as two different apps.

Client side:

npm run build locally from the same folder as contains your package.json file
then post the app build folder as very straight forward client side app with HTML CSS Javascript

Server side:

upload the server files (not including node_modules folder)
run npm i(from the folder with the package.json file)
I set up reverse proxy to map the port to a specific location on the server for the react to reach it
set up cron job to start server side (and check periodically to ensure it is running)

Thats it - works perfect.

edited Apr 02 '20 at 17:43

answered Mar 02 '20 at 11:12

Michael Nelles

5,426
8
41
57

sorry, I downvoted this answer and can't change it. if you edit it somehow I will have opportunity to vote up again – Angelzzz Apr 02 '20 at 17:29
1

please try now - you do the build from the folder with the package.json file. – Michael Nelles Apr 02 '20 at 17:37

Surisetty Pavan Kumar · Answer 2 · 2021-05-12T03:33:43.340

0

Add this in your scripts

 "client-install": "npm install --prefix client",

edited May 12 '21 at 03:33

answered May 11 '21 at 19:25

Surisetty Pavan Kumar

1
1

Surisetty Pavan Kumar · Answer 3 · 2021-05-12T03:32:13.390

Please add below Scripts and try, it will work 100%.

 "scripts": { 

 "client-install": "npm install --prefix client",
      "start": "node server.js",
      "server": "nodemon server.js",
      "client": "npm start --prefix client",
      "dev": "concurrently \"npm run server\" \"npm run client\"",
      "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
    }

NPM run build with React + Node + concurrently How to?

3 Answers3