Can't remote develop create-react-app due to "Invalid Host Header"

[formido]

At work I do all my development shelled into an AWS instance. This means my code and dev server are both remote, but my browser is local. When I try to access my react app, I get "Invalid Host Header". I think this is due to the fix for webpack/webpack-dev-server#887. From googling around, it looks like I can fix this by ejecting, but that's supposed to be for power users and the reason I'm trying create-react-app in the first place is I don't understand anything about the ecoystem yet.

Is there anything I can do about this aside from ejecting? Is this worth fixing somehow?

Someone asked a question about this on Stack Overflow but didn't get a response.

[gaearon]

Can you put your HOST into .env file?

HOST=mydevserver.com

Then restart the development server.

[formido]

That gives:

npm start
npm info it worked if it ends with ok
npm info using npm@4.2.0
npm info using node@v7.9.0
^[[?25hnpm info lifecycle src@0.1.0~prestart: src@0.1.0
^[[?25hnpm info lifecycle src@0.1.0~start: src@0.1.0

> src@0.1.0 start /home/node/src
> node scripts/start.js

Could not find an open port at ec2-54-91-117-181.compute-1.amazonaws.com.
Network error message: listen EADDRNOTAVAIL 10.169.55.152


npm info lifecycle src@0.1.0~start: Failed to exec start script
npm ERR! Linux 4.4.0-53-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v7.9.0
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! src@0.1.0 start: `node scripts/start.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the src@0.1.0 start script 'node scripts/start.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the src package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node scripts/start.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs src
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls src
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /root/.npm/_logs/2017-05-19T21_47_48_878Z-debug.log

[gaearon]

Hmm this means our port detection code couldn't connect to this host. Does the same exact host work with 0.9.x?

[Timer]

This is the exact security flaw this change was meant to close. An outbound (non internal) IP should never be able to connect to a development server.

Changing the HOST isn't what would make this work, we'd need to add an explicit allowedHosts option to package.json which listed his public IP.

[Timer]

@formido as a temporary work around, you should be able to get your machine's public IP address and set it as the HOST on the amazon server; but you'll also need to set a firewall rule (on the ec2 instance) which lets you bind to that address:

iptables -t nat -A OUTPUT -p all -d 123.456.789.012 -j DNAT --to-destination 127.0.0.1

edit: don't mind me, idk where my head was -- I forgot you'd be visiting with the machine's url

[formido]

Ok, adding HOST to the .env file worked. The previous error happened because I had forgotten I was running the app in docker.

In principle, there's no reason why a development server should not be accessible from an external IP. It depends on the details, e.g., limit access with an AWS security group. For me, it's extremely convenient.

[gaearon]

We'll err on the side of safety but it would be nice if we could serve a more useful page explaining the reason for this limitation and workarounds.

[0xjjpa]

Having the same issue, particularly when trying to work with c9.io

edit: Solved it by adding 0.0.0.0 <domain> in my /etc/hosts in addition to adding the domain to the .env file. Also, as a reference, we might want to inject the public option somewhere in case for whatever reason we want to serve the dev env to a public domain (thinking for example live coding).

[gaearon]

I have a proposed solution here: #2288.
What do you think?

[gaearon]

Please update to react-scripts@1.0.2.
It fixes this issue for users who don't use the proxy feature.

If you do use the proxy feature, please follow these instructions.

[formido]

Awesome, great! 👍

[rttomlinson]

@jjperezaguinaga Do you have a small write-up on how to configure c9 and create-react-app to get the dev server to work? My apologies if this isn't the right place to post. Thanks