CODEWITHSUNDEEP
node.jsreactjs
KeOt777
KeOt777

Reputation: 247

Run react and node

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?

Upvotes: 0

Views: 1733

Answers (1)

irimawi
irimawi

Reputation: 368

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.

Upvotes: 1

Related Questions