HTTPS in Development

A workaround has been commented below, see: https://github.com/facebook/create-react-app/issues/6126#issuecomment-570763433

---

Right now there’s just the general acceptance that the SSL Certificate will cause some friction.

Note that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page.

Source: Create React App Website

React’s website (and the development world really) has been gifted with Gatsby, and I think they got it right.

When you run a gatsby website in development mode with the --https flag, it will leverage the package devcert-san. It’s (near) frictionless, handles trusting the CA and gets you a proper lock on the browser bar.

I don’t think it’s really a high priority but wanted to bring it up.

Just to follow up, I also found this but haven’t worked with it (yet).

https://github.com/FiloSottile/mkcert

---

EDIT:

a PR implementing this feature has been open for a long time now: #5845

[rlueder]

The simple steps below worked for me:

1. Install mkcert and run mkcert localhost

2. add both the private key and certificate generated by mkcert to a single .pem file (e.g. server.pem)

3. add a prestart line to your package.json under scripts (assuming the .pem file is inside of a /cert folder): "prestart": "cp -f ./cert/server.pem ./node_modules/webpack-dev-server/ssl || :"

4. start CRA in HTTPS mode: HTTPS=true npm start

5. 💰 profit! 💰

Similar discussions: https://github.com/facebook/create-react-app/issues/430 https://github.com/facebook/create-react-app/pull/5845 https://github.com/facebook/create-react-app/pull/6544

Original solution by @Zwerge here: HTTPS In Development: A Practical Guide

[ngduc]

For those who searching for command line example, use the following: (thanks @rlueder)

brew install mkcert
mkcert localhost
cat ./localhost-key.pem ./localhost.pem > ./node_modules/webpack-dev-server/ssl/server.pem
npm run start       (HTTPS=true react-scripts start)

Otherwise, Chrome may block localhost https from loading. (at least for me recently)

Hopefully this PR will solve it completely later - https://github.com/facebook/create-react-app/pull/5845