How to change the host name from localhost to some ip in react js?

Question

Hi I want to change my loading of react in my local computer from localhost to some IP that matches my backend API, I tried all suggested options on the internet like using a proxy in package.json or using

 "scripts": {
    **"start": "HOST=http://127.0.0.1 react-scripts start",**
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

nothing working rather it's giving error like

(node:28360) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:28360) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
/media/as/Learn/Practice/Practice project/mern fulllstack/ECOMMERCE/frontend/node_modules/webpack-dev-server/lib/Server.js:2429
        throw error;
        ^

Error: getaddrinfo ENOTFOUND http://127.0.0.1
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:71:26) {
  errno: -3008,
  code: 'ENOTFOUND',
  syscall: 'getaddrinfo',
  hostname: 'http://127.0.0.1'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `HOST=http://127.0.0.1 react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/as/.npm/_logs/2022-07-23T05_00_21_832Z-debug.log

Hi. I don't quite understand the problem. Normally, when you run your react application locally it should also be available via the network IP in the form of 192.x.x.x. Try running ifconfig for windows or ifconfig on mac on your terminal. — czetsuya
– czetsuya, Commented Jul 23, 2022 at 5:44
No it's running in localhost:3000 , problem is that my backend node js application is running on 127.0.0.1:3000 and my react app is running in localhost:3000 , so when i call the api , it's showing error as the protocols are different — Asit Purohit
– Asit Purohit, Commented Jul 23, 2022 at 5:53

Ivar Harris · Accepted Answer · 2022-07-23 05:41:11Z

1

Have you tried doing something like this yet:

"scripts": {
"protocol": "http://",
"host": "127.0.0.1",
"port": "80",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

answered Jul 23, 2022 at 5:41

Ivar Harris

1563 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Asit Purohit Over a year ago

It's still running in localhost:3000

Ivar Harris Over a year ago

I'm going to submit a different kind of answer to the question and eventually delete this one :)

Sesen · Accepted Answer · 2022-07-23 06:19:43Z

1

Create an .env file in the project root and type

PORT=3000
HOST=127.0.0.1

answered Jul 23, 2022 at 6:19

Sesen

3722 gold badges4 silver badges17 bronze badges

1 Comment

Ivar Harris Over a year ago

That sounds like a really good answer :) Hopefully it works for their configuration!!

Ivar Harris · Accepted Answer · 2022-07-23 06:27:30Z

0

Have you tried this:

Click on the Start Menu Icon

Type:

cmd

Right click on:

cmd.exe

Click on:

Run as Administrator

A command prompt will appear. In command prompt, type in:

notepad "C:\windows\system32\drivers\etc\hosts"

In the host file, Go to the line right underneath:

#   ::1             localhost"

And add this information

127.0.0.1    mynode
127.0.0.1    myreact

Click file, then click Save

Reboot the computer

Configure your node to use the hostname of:

mynode

Configure your react to use the hostname of:

myreact

Your url for a website connection will be http://mynode:3000 and http://myreact:3000

answered Jul 23, 2022 at 6:27

Ivar Harris

1563 bronze badges

Comments

kennarddh · Accepted Answer · 2022-07-23 06:29:40Z

0

Create .env file in project root

PORT=8080 # or other port

React app hosted on localhost:PORT

https://create-react-app.dev/docs/advanced-configuration

answered Jul 23, 2022 at 6:29

kennarddh

2,6572 gold badges10 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to change the host name from localhost to some ip in react js?

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related