Search code examples
node.jsreactjswebstormreact-fullstack

Configure ports in WebStorm - React + Node Express app


I am going to do a fullstack implementation with WebStorm IDE. I use react.js and node-express for this. I can do this in separate projects. But I want to know how to implement both backend and frontend in WebStorm project while configuring ports.

When starting the frontend we can give start html file in package.json file under "start": "parcel index.html". When starting backend we can give "node app.js" But this can be done when we are doing the implementation in two different projects.

But if we are doing both frontend and backend how can I start react part and node-express part on two different ports? For example:
- react app > localhost:1234
- node-express > localhost:3000

"start": "parcel index.html"
"start": "node app.js"

// in package.json we can set only one start


Solution

  • You can use a package like npm-run-all to achieve this. Install it then have two separate scripts (like start-front-end and start-server) in your package.json that npm-run-all runs both of e.g.

    "scripts": {
      "start-front-end": "parcel index.html --open",
      "start-server": "node app.js",
      "start": "npm-run-all start-server start-front-end",
    }