Understanding of the HOST variable in .env and different URL on start

Hi,

I’m creating a tool for websites using CRA. This tool is being loaded in an Iframe inside the websites. So when developing, I use a site mytestsite.com which loads an iframe under localhost:3000. And it all works perfectly. The only thing I would like to do is when running npm start, the site mytestsite.com would be opened, instead of localhost:3000. I’ve learnt I could apparently use the HOST env variable, but I don’t actually think it’s supposed to be used for that purpose.

From what I understood, this is more a variable used for webpack to listen on a different URL, am I wrong? Plus, when trying to add HOST=mytestsite.com it actually loads mytestsite.com:3000 which is not really what I would like.

Could anyone guide me or maybe it should be a new feature request? In that case I could try to fill in a PR.

We could also have the ability to use a URL like URL_TO_OPEN=HOST:PORT?param=value so CRA could replace the HOST and PORT by what it’d be using and give us the ability to add query params by default.

Thanks!

[Timer]

You are correct in understanding that HOST affects what the webpack dev server listens to; it will alter what is opened but will also alter what we try to bind to.

To achieve what you’d like, you will need to use the custom node script like so:

// launch.js
delete process.env['BROWSER']
require('react-dev-utils/openBrowser')(process.env.URL_TO_OPEN)

Then create a .env file that contains this:

BROWSER=launch.js
URL_TO_OPEN="http://mytestsite.com:3000?foo=bar"

Running npm start should now do what you desire (no HOST var). 😄

You can override the URL_TO_OPEN by simply running URL_TO_OPEN="www.example.com" npm start instead, but the .env can be a default.

[Timer]

Unfortunately, networking doesn’t work like that. 😅

Closing this since the original question by @fbarbare has been answered, @cr101 if you have additional questions please create a new issue so we don’t blow up @fbarbare’s notifications.

Thanks!