Add option to run HTTPS locally

[adrice727]

I work on a lot of projects that involve screen sharing via WebRTC which must be done over https. I currently have no way of testing locally. Would it be possible to add an option to run https on the local webpack dev server?

[zet4]

What I did is run Caddy proxy which redirects to dev server and could do https.
But it would be nice yea.

[mxstbr]

How would one go about doing that?

[zet4]

run caddy with something like

0.0.0.0:8080
proxy / localhost:3000
tls self_signed # or provide cert key

[vutran]

I think this is a great idea and can also be expanded and added to the deployment scripts as well. Perhaps using something like certbot can be of use.

[zet4]

@vutran
Certbot uses LE, LE requires a domain AFAIK.
Also LE is meant for deployment/production, not development.
All you want is self signed cert.

[bripkens]

I build a tool for this purpose called proxrox. You can use it to start proxies with autogenerated self-signed certificates, combine origins and a few other things. The repo also contains an example project with a sever and client part (webpack based).

[dceddia]

Is it sufficient to just turn on HTTPS for the webpack dev server?

With the change below, It starts up with a self-signed cert, and I'm proxying requests to my backend HTTPS server with the "proxy" option from 0.3.0. I needed to turn this on because my XSRF token header wasn't being sent.

Inside react-scripts/scripts/start.js, add the https: true:

function runDevServer(port) {
  var devServer = new WebpackDevServer(compiler, {
    https: true,
    // ...
  });

I just hacked it up directly inside node_modules to see if it'd work, but now I'm thinking I'll need to eject it to make it all work properly. This HTTPS change introduces a bug where npm start still opens up a browser to http://localhost:3000 instead of https://localhost:3000, so that would need to change as well.

I could turn this into a PR if that makes sense.

[gaearon]

Marking this with a milestone so I don’t forget to take another look at it.

[gaearon]

@dceddia Can you please turn 26877bcaa71509be3350f546f215f0855dc77ba1 into a PR? The only change I’d make is to have it look at process.env.HTTPS instead, similar to how we read process.env.PORT.

[dceddia]

I like that idea. I'll work on a PR.