How can I get create-react-app to use an IP to connect to my api server?

Question

I'm using Facebook's create-react-app. When I start the web-client I see in console:

You can now view web-client in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.1.107:3000/

The problem is my web-client uses localhost to connect to the api-server, which means I can't use the IP address on different devices to debug issues.

env-variables.js:

export const ENV = process.env.NODE_ENV || 'development';

const ALL_ENV_VARS = {
  development: {
    GRAPHQL_ENDPOINT_URI: 'http://localhost:4000/graphql',
  },
....

I tried updating the above with:

GRAPHQL_ENDPOINT_URI: `http://${process.env.ip}:4000/graphql`,

That did not work, process.env.ip is returning undefined. How can I get the above GRAPHQL_ENDPOINT_URI to use the IP address which somehow create-react-app is getting?

Answer 1

Try adding the following to your client-side package.json:

"proxy": "http://localhost:4000/",

You can then leave the

http://localhost:4000

off of any URLs pointing to the API server from the client side. You would just refer to those addresses as

/graphql/<any additional URL data>

I've performed the same with a Node/Express backend and a React frontend - I resolved the /api portion in my server.js with the following:

//Use our router configuration when we call /api
app.use('/api', router);

just replace /api with /graphql there.

Take a look at this article for further explanation. Hope this helps!

https://medium.freecodecamp.org/how-to-make-create-react-app-work-with-a-node-backend-api-7c5c48acb1b0

Answer 2

Following solution works with react-scripts v5.0.1 in a non-ejected create-react-app project:

Modify script.start in package.json:

"scripts: {
   "start": "LOCAL_LAN_IP=$(node -e \"console.log(require('address').ip())\") react-scripts start",
   // other scripts...
}

then create a .env file in your root, add the following:

REACT_APP_LOCAL_LAN_IP=$LOCAL_LAN_IP

Your local IP should become available in your react app in process.env.REACT_APP_LOCAL_LAN_IP, whenever you start the app with npm start.

How does it work?

By prepending the react-scripts start command that is executed when we run npm start with:

LOCAL_LAN_IP=$(node -e \"console.log(require('address').ip())\")

1. we invoke node to execute require('address').ip()
2. we console.log the value returned from ip()
3. the console.log prints to STDOUT
4. we then catch STDOUT with bash's command substitution $()
5. the string caught from STDOUT will be assigned to the variable LOCAL_LAN_IP
6. which we then expand in our .env file and assign it to REACT_APP_LOCAL_LAN_IP.

Notes:

• REACT_APP_ prefix is needed to make it available in the process.env in the app's code's context.
• address package should already be installed, as it is a peer dependency of react-scripts@5.0.1. It is used in the react-scripts start command to print the local ip, which we see in the OP.