HTTPS in Development

[pqt]

A workaround has been commented below, see: #6126 (comment)

---

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

[jimthedev]

Have you tried it in all browsers lately? I like devcert-san but the last time I tried it (over a year ago) the Firefox and Safari experience was still less than ideal.

[pqt]

@jimthedev I try my best to test things on various browsers throughout the week like a good dev (both CRA and Gatsby)!

Personally speaking, I haven't had any issues with the Gatsby SSL -- and the one that I did have I finally drilled down on this morning.

For Firefox it actually requests you trust the assigning Certificate Authority which may have been a solution to any problems it was having their. For Safari though I haven't noticed any fuss.

Maybe I'm just lucky though 🤓

[pqt]

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

https://github.com/FiloSottile/mkcert

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[pqt]

idk, is this stale?

[albertorestifo]

It would at least be good to allow specifying a path to load the certificates from.

That way you can use mkcert and have a trusted certificate.

[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:
#430
#5845
#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 - #5845

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[pqt]

idk, is this stale ... again?