CODEWITHSUNDEEP
node.jsreactjsexpress
user10390190
user10390190

Reputation:

conflicting port numbers in react

I have a React app where I specified the port number in server.js as

const port = process.argv[3] || 3500;

At the bottom of the same file I wrote:

app.listen(port, () => console.log(`Web service running on port ${port}`));

While the app is able to run in my browser, unfortunately in the console of my text editor it says Web service running on port 3500 even when the url says localhost:3000.

I know that React uses port 3000 as default... but don't know why the app chose to use port 3000 instead of the port 3500 that I specified above.

To try and fix this I tried to install the dev dependency cross-env and in my package.json "start" script I specified cross-env PORT=3500.

After that change, I see that my React app is now running in the browser on Port 3500... but I am unable to avoid the message from the server.js file that says "Web service running on the Port # that I specified in the server.js file".

In server.js when I use const port = process.argv[3] || 3500; in conjunction with the cross-env port 3500 change in package.json... I get the message "Something is already running on Port 3500". So it seems impossible to get the correct console message that the React app is really running properly in the browser on Port 3500.

Full Express server.js below:

const jsonServer = require("json-server");
const chokidar = require("chokidar");
const cors = require("cors");

const fileName = process.argv[2] || "./data.js";
const port = process.argv[3] || 3500;

let router = undefined;

const app = express();

const createServer = () => {
  delete require.cache[require.resolve(fileName)];
  setTimeout(() => {
    router = jsonServer.router(fileName.endsWith(".js")
      ? require(fileName)() : fileName)
  }, 100)
}
createServer();

app.use(cors());
app.use(jsonServer.bodyParser)
app.use("/api", (req, resp, next) => router(req, resp, next));

chokidar.watch(fileName).on("change", () => {
  console.log("Reloading web service data...");
  createServer()
  console.log("Reloading web service data complete.");
});

app.listen(port, () => console.log(`Web service running on port ${port}`));```

Upvotes: 0

Views: 510

Answers (2)

Sachin Ananthakumar
Sachin Ananthakumar

Reputation: 810

Express Server:

you can run express server in the any port you want it to run

const port = process.env.port || 4000 //? can be any port number

the console log you are getting in the editor is from the server and not from the react app.

React App:

by default react app runs in port 3000 if you want to change the Port of the react app then use react-scripts like this

"start": "set PORT= <Your Desired Port> && react-scripts start"

or you can set port directly from terminal like this

PORT=4000 npm start //? or any other port number

Upvotes: 0

Vector-Hector
Vector-Hector

Reputation: 350

app.listen is for express servers. To run a react server use react-scripts. To change port number use the PORT environment variable.

Upvotes: 0

Related Questions