npm run build issues when using concurrently

Question

I am running a react app that uses express as a backend. I followed this tutorial on how to connect the two then deploy to heroku. In short I am running express on port 5000 as instructions tell me to, and on client side in the package json proxy to port 5000. from server side I run a npm tool called concurrently that runs both in tandem.

Now the problem is the npm run build only seems to be half working. the page loads for a split second on port 5000 (before run build I would use port 3000) disappears leaving only my custom background colors. no errors i can see either for server side or react app side.

I tried changing the server's port numbers first thinking this was the issue as serve -s build runs the app on port 5000 which likely conflicted but the same issue remains.

Please let me know what code If any I can show to help diagnose this as Im afraid I do not know what to present other than my file layout (see the tutorial's link I have the same overall layout) and bellow will be my package jsons for client and server respectively.

Client package.json:

  "name": "friftr_version_2_0",
  "version": "2.0.0",
  "description": "Friftr, but its in react",
  "main": "index.js",
  "author": "V1llage_ID10T",
  "license": "ISC",
  "dependencies": {
    "@material-ui/core": "^4.9.8",
    "@material-ui/icons": "^4.9.1",
    "axios": "^0.19.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-lazy-load-image-component": "^1.4.1",
    "react-router-dom": "^5.1.2",
    "react-router-page-transition": "^3.1.0",
    "react-scripts": "^3.4.1",
    "typescript": "^3.8.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3001",
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Server package.json

{
  "name": "friftr2",
  "version": "2.0.0",
  "description": "friftr redesign in express, react, material-ui, mongoose database. ",
  "main": "server.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/n/a.git"
  },
  "author": "V1LLAGE_ID10T",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/n/a/issues"
  },
  "homepage": "https://github.com/n/a#readme",
  "dependencies": {
    "axios": "^0.19.2",
    "body-parser": "^1.19.0",
    "cheerio": "^1.0.0-rc.3",
    "concurrently": "^5.1.0",
    "connect-mongo": "^3.2.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "express-session": "^1.17.0",
    "got": "^10.6.0",
    "hsts": "^2.2.0",
    "http-proxy-middleware": "^1.0.1",
    "mongo-sanitize": "^1.1.0",
    "mongoose": "^5.9.3",
    "mongoose-findorcreate": "^3.0.0",
    "node-fetch": "^2.6.0",
    "nodemon": "^2.0.2",
    "passport": "^0.4.1",
    "passport-google-oauth20": "^2.0.0",
    "passport-local-mongoose": "^6.0.1",
    "tall": "^3.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "client-install": "cd client && npm install",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  }
}

Answer 1

so the consensus from my discord buddies has told me NEVER do what I just did and instead uninstall concurrently and have all my fetch requests connect to the address and port rather than root onward.

so my fetch requests on react would go from /api/query/n/n/new/all/0 to http://localhost:5000/api/query/n/n/new/all/0 or whatever port i work on.