How to disable "Running App on your Network" in react app

[crimson-venom]

Hi people! umm...i'm new here, and this is my first question so please don't be so hard on me,

I have a question with React, it happens that i'm working in a personal project and i found a gruesome problem, when i run the app it all starts and stuff, and when the app is already running it happens that is running on the entire network, that means every people connected to the same network can see it, and i don't want that yet, i want it to be as confidential as i can, how can i prevent that from happening?

thanks in advance

[maheshv2200]

No worries, and welcome to the community! Your question is important, and I'm here to help.

The behavior you're describing, where your React app is accessible both at localhost and via your local IP address on the network, is the default behavior of the development server provided by Create React App (CRA). While this can be convenient for some development scenarios, it's understandable that you might want to restrict access

To prevent your React app from being accessible over the network, you can configure the development server to only bind to localhost. Here's how to do it:

1. Edit the package.json file in your project structure

2. Find the "start" script in the "scripts" section.(in package.json file) It should look something like this:

   "scripts": {
     "start": "react-scripts start",
     // ...
   }
   

3. Modify the "start" script to explicitly set the host to localhost. Add the --host option with the value localhost like this:

   "scripts": {
     "start": "react-scripts start --host localhost",
     // ...
   }
   

4. Save the package.json file.

5. Now, when you run npm start your React app will only be accessible at http://localhost:3000, and other devices on the network won't be able to access it.

Keep in mind that this change only affects the development server. When you build your React app for production, it won't have this limitation, and you'll be able to deploy it to a server that can be accessed over the network if needed you need to specify the port number and specific url in deploying your project.

By following these steps, you should be able to keep your React app confidential during development on your local machine.

[cartesian-plane]

In my case, the above did not work.

I had to change it to the following:

    "start": "HOST=localhost react-scripts start",