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