Create-react-app: Understanding of the HOST variable in .env and different URL on start

[fbarbare]

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!

[gaearon]

cc @Timer

[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.

[fbarbare]

Oh YEAHHH!!! I forgot about the new BROWSER=script.js... That's AWESOME! I'll test that on Monday and report back here, I need to upgrade to the new CRA 😂 .
Thank you very much!

[cr101]

I have a similar question. I've added HOST=my-app.dev to my .env.development file and when I run npm start it loads my-app.dev:3000 which is not what I want.
Is there a way to just load my-app.dev without having to add PORT=80 to .env.development file?

[Timer]

No, you have to add PORT=80 to your environment file -- why is this problematic?

[cr101]

@timer I'm on Windows 10 and port 80 is often already used.

[Timer]

Ah, we purposely check other hosts because it's confusing if you have multiple things bound to the same port on your system.

Why does port 3000 not work for you?

[cr101]

It's not that port 3000 doesn't work as such. I was wondering if there's a way to remove the port number from the URL so when I run the app locally I have a named URL my-app.dev instead of my-app.dev:3000

[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!