4

I want to be able to pass a custom server hostname when running my React app to be used in the URL when I need to fetch data. The server is currently running on my local computer, so when I use fetch(<URL>).

I've been using "http://localhost:...." which has worked perfectly. But I want to be able to have to pass a custom host name, such as my IP address, to be used in the URL (i.e., http://ipaddress:...).

I've tried starting my app like this:

serverhost=ipaddress npm start

And then in my package.json file

"scripts" : {
   "start": "react-scripts start $serverhost"
}

And in file start.js I can access process.env.serverhost, but I want to be able to access the hostname in the browser for my actual fetch calls. I don't want to set the hostname in "config" in package.json file or in an .env file, because it has to be able to change (I'm under the impression that this isn't possible). I just want to be able to access the server hostname given as an argument in the command line in my source files.

(I read somewhere about doing

REACT_APP_MY_VAR=test npm start

and then accessing it as

process.env.REACT_APP_MY_VAR

in the source files, but when I tried to fetch(<URL>), I got a bunch of failure to parse URL errors.)

I tried using REACT_APP variables and I no longer got parsing URL errors when fetching.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Ally
  • 43
  • 1
  • 1
  • 4
  • Create a [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) tag, and send all your request relative to that base url – Icepickle Jul 27 '18 at 20:55

2 Answers2

2

You can have .env file per environment and then set

REACT_APP_API_ENDPOINT=http://localhost.whatever

So for example .env.development

REACT_APP_API_ENDPOINT=http://localhost.whatever

.env.production

REACT_APP_API_ENDPOINT=http://production.whatever

Usage of env variables is explained here https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#what-other-env-files-can-be-used

Eventually, you can add it to your script like

"scripts" : {
   "start": "REACT_APP_API_ENDPOINT=http://localhost.whatever npm/yarn start"
   "start-production": "REACT_APP_API_ENDPOINT=http://production.whatever npm/yarn start"
}

If you don't really want to use above approaches at all then, assign your ip to some variable and add it to command to run your app

"scripts" : {
   "start": "REACT_APP_API_ENDPOINT=$(curl ifconfig.me) npm/yarn start"
   "start-other: "REACT_APP_API_ENDPOINT=$(echo MY_VAR_WITH_IP) npm/yarn start"
}

And then access your url from process.env.REACT_APP_API_ENDPOINT

Matuszew
  • 841
  • 5
  • 12
  • Thanks! I did some version of this that was a bit simpler but less functional and it worked - I'm hoping once my app leaves the developmental stage this will no longer be an issue because I won't have to run the server on my local computer – Ally Jul 27 '18 at 22:06
0

You can set a base tag in your index.html that would set the base for all your requests from there on.

You can create the base tag dynamically by reading the document.location and map your required path.

Note that all relative paths will be then mapped from your baseTag

An example would be something like this

<base href="https://www.dog.ceo/" />

And then create a request like this

fetch('api/breeds/list/all')
  .then( response => response.json() )
  .then( ({message}) => console.log( message ) );

The full address of that call would the be https://www.dog.ceo/api/breeds/list/all

Icepickle
  • 12,689
  • 3
  • 34
  • 48