Redwood: Allow External Host Access when Running `yarn rw dev`

[wiezmankimchi]

_Original conversation here on Community Forum._

When you run Redwood in dev mode, and would like to test the application as it is rendered from an external source (outside of your network), you will get “Invalid Host Header” when trying to get to the 8910 port (or the one that will be forwarded out).

The fix for that is coming from adding a setting to the webpack configuration as follows:

// web/config/webpack.config.js
module.exports = (config) => {
. config.devServer.disableHostCheck = true
return config
}

This will not be rendered in your production build. This is only for development needs.

There are several implications allowing this change in PROD environment (also in development).
The most problematic one is that leaving this open, allows hackers to take over the source, complied source and inject malicious code (read more here.)

Due to the fact that the current settings of the Redwood dev server are only with localhost, although there is an option to change it to 0.0.0.0, it is still a problem.

There are several options to work with the dev server and test it with an “external” network:

• setup the whole environment in a Docker (or any other) container. This is currently an option that is not simple as it requires additional changes to the code base of the dev server as well as the default redwood app.
• As the above mentioned article suggests, have the following added to the webpack start script (currently there is no option to add these changes to the yarn rw dev):
  --host 0.0.0.0 --public example.company.com, where the 'example.company.com' is the external URL for the dev server.

Testing is an important stage of every development process, and one of them is to test the site from an “external” network that has other settings, like for example, mobile device (that has applications installed), other restrictions, etc. You don’t want to get to ta production release and then test these issues.

Any solutions to implement this with Redwood for more permanent will be appreciated.

---

[edit] Update October 2020

See this comment https://github.com/redwoodjs/redwood/issues/534#issuecomment-703454874

[thedavidprice]

Possible solution path:

1. add the config to our webpack.development.js file (link here)
2. add the --host and --public command options to yarn rw dev, with default to something like --host [redwood.toml.api.host] and --public [null | undefined] (or something like that)

[jeliasson]

+1 for this

I would personally prefer solution 1, i.e. expose the config problematically in webpack.development.js, as solution 2 will most likely have developers create a custom scripts in the root package.json to add those flags.

While we are on the subject of different host for the development environment. Have there been any talks of extending redwood.toml's browser directive and add browser.url? This will allow us to set [api/web].host = "0.0.0.0" and have the browser open (browser.open) the address defined in browser.url rather than http://0.0.0.0:8910, and that could default to http://localhost:8910 in the generated redtood.toml file.

Just a thought.

[thedavidprice]

@jeliasson The state of our redwood.toml docs is a mess (but soon to be improved). The good news is that the behavior you describe above is already possible. You can config host and port, and then yarn dev server will open accordingly. Here's the code with all the options for config:
https://github.com/redwoodjs/redwood/blob/49c3afecc210709641dd340b974c86251ed207dc/packages/internal/src/config.ts#L42-L62

[thedavidprice]

@peterp It's fairly trivial to add "disableHostCheck" config to webpack.development.js. We could set it to false and then allow override via config. Questions:

• I'm mixed about solving this via redwood.toml config _versus_ good documentation + custom webpack config -- the amount of devServer configuration options are, as you know, fairly bottomless. But this does seem like a more-common-than-not use case
• If we do offer redwood config, do we add a new section to config.ts, something like redwoodConfig.devServer.disableHostCheck? It's meta to configuring Sides (e.g. web and api) and doesn't fit within browser... ?

My recommendation at this point is to handle this via good documentation, e.g. add an example with reference in the current https://redwoodjs.com/docs/webpack-configuration

If community questions about this continue, along with requests for adding as config, we could review the decision at that time.

y/n/maybe?

[jtoar]

@jeliasson The doc David mentioned (App Configuration) just got a major update. I specifically added the bit about the browser's url opening to web's host:port to the browser.open section. Do you find this doc useful? Let me know!

[peterp]

@thedavidprice I'm +1 on informing this via documentation!

I would like to propose another solution; which is to allow some of our CLI commands to "forward" flags to the underlying application, everything in a command that's after -- would be forwarded to the underlying command.

As an example:

yarn rw dev web -- --disable-host-check

I would like to extend this to prisma, eslint, and other commands that we "wrap" so that people who need more power have an escape hatch that's documented.

[thedavidprice]

Current Status Update

The ability to pass Webpack Dev server config via yarn rw dev --forward has been added several versions ago:

$ yarn rw dev --help   

rw dev [side..]

Start development servers for api, db, and web

Positionals:
  side          Which dev server(s) to start
                        [array] [choices: "api", "web"] [default: ["api","web"]]
  forward, fwd  String of one or more Webpack DevServer config options, for
                example: `--fwd="--port=1234 --open=false"`             [string]

To Do

All that's remaining now is to add to the documentation.

[andrewlamyw]

I'm trying to access from my phone to my local dev server.

After I set host = '0.0.0.0' in redwood.toml, I received an error of auth0-spa-js must run on a secure origin when accessing from my phone.

How can I solve this?🙏

[update]
I've found a solution which is using ngrok to create a tunnel to my local dev server. Just curious how others solve this issue.