Run react and node

Question

I have to create the frontend for an application. Someone else created the backend using node. I have always created my projects using create-react-app, however, since the backend is already created, including modules, routes, db, etc, I couldn't use this command to create the project, so I installed all my packages independently. This is my package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build-css": "node-sass-chokidar client/ -o client/",
    "watch-css": "npm run build-css && node-sass-chokidar client/ -o client/ --watch --recursive",
    "start-js": "react-scripts start",
    "build": "npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "start": "npm-run-all -p start-node watch-css start-js",
    "start-node": "node index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.16.2",
    "body-parser": "^1.18.2",
    "bulma": "^0.6.0",
    "express": "^4.16.2",
    "mongoose": "^4.12.3",
    "morgan": "^1.9.0",
    "q": "^1.4.1",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^1.0.14"
  },
  "devDependencies": {
    "node-sass-chokidar": "0.0.3",
    "npm-run-all": "^4.1.1",
    "sass": "^1.0.0-beta.2"
  }
}

There's a problem with the start-js since node is already runnin on port 3000 and react needs to run as well. How can I make both run concurrently?

[`concurrently`](https://www.npmjs.com/package/concurrently)? Have you read e.g. https://stackoverflow.com/questions/30950032/how-can-i-run-multiple-npm-scripts-in-parallel, or done any other research? — jonrsharpe, Oct 21 '17 at 17:31
I did do research, actually posted the answer because I found nothing that actually solved my problem (or that I understood correctly for that matter). I hadn't seen the answer you sent me, but I appreciate it — KeOt777, Oct 22 '17 at 04:06

score 1 · Accepted Answer · answered Oct 21 '17 at 17:41

The short answer is to change the port of either node.js application or when you do npm start inside your react app.

The longer answer is that you control the port that the applications run in, usually right by where you run your node server. Your react application is a pure html application, so by theory, you can serve it using any web server. Here is a great tool I use called http-serve. You can install it globally using npm install http-serve -g. This will serve your react application in port 8080 by default and you can control what port to serve it under. So basically go to your build folder and then run http-serve or where your index.html exists inside your react app.

Thank you, after messing around with the react-scripts path (cause that was also creating a separate problem for me) I was able to run the react app on a different port. Thanks! — KeOt777, Oct 22 '17 at 04:08

Run react and node

1 Answers1