Create-react-app: 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.

[dceddia]

@gaearon I created a PR with 3e52607 (ignore that other one).

[gaearon]

Fixed by #430.

[gaearon]

HTTPS=true env variable is honored in 0.4.0.
See the release notes!

[sshadmand]

Works on Chrome, but in FF

localhost:3000 uses an invalid security certificate. The certificate is not trusted because it is self-signed. Error code: SEC_ERROR_UNKNOWN_ISSUER

Is there a way to choose a cert I create?

[jadbox]

I too need a way of using my own cert for local development. This is especially required for developing authentication systems locally, using DDNS.

[mmccartney]

Under the covers react-scripts start is using webpack-dev-server which generates and stores a self-signed cert under node_modules/webpack-dev-server/ssl. You should be able to replace files there as you see fit.

As for Safari, I'm finding that if I click on Show Details then there is a link at the end that says visit this website. When you click that, it will trust the cert. I haven't tried this long enough but the code I see for webpack-dev-server makes me think the cert is only good for 30 days after which it regenerates. I suspect you'll have to re-trust it every 30 days.

Hope this helps!

[conatus]

It would be useful to use mkcert to use Let's Encrypt to serve up a real SSL certificate here.

Though this might more appropriately be a responsiblilty for webpack-dev-server?