Create-react-app: HTTPS in Development

[pqt]

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

[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[bot]]

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. :moneybag: profit! :moneybag: http://oi65.tinypic.com/axmfyq.jpg

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

[stale[bot]]

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?

[stale[bot]]

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.

[albertorestifo]

Nope, still waiting on the PR to be merged

[stale[bot]]

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.

[JamesMaroney]

Since you enable HTTPS by setting HTTPS=true in your environment (either via package.json, profile, or dotenv file, etc) - I went down the path of supporting HTTPS_CERT and HTTPS_KEY environment variables. All it takes is adding 4 lines to react-scripts/config/webpackDevServer.config.js

The environment variable names can be different if there is something more conventional that would "just work" in some environments.

I'd be happy to put in a PR if there is any interest.

react-scripts/config/webpackDevServer.config.js

// around line 20
const cert = (protocol === 'https' && process.env.HTTPS_CERT) || undefined;
const key = (protocol === 'https' && process.env.HTTPS_KEY) || undefined;

// around line 86
    cert: cert,
    key: key,

[albertorestifo]

@JamesMaroney a PR implementing this feature has been open for a long time now: https://github.com/facebook/create-react-app/pull/5845

It seems that this feature is of no interest to Facebook so they're ignoring it.

[pqt]

@albertorestifo I've edited the original issue with the mention of the PR just so it's not lost in the noise. :)

[kgaurav7788]

For Ubuntu Debian/Bionic
sudo apt install wget libnss3-tools
For CentOS
sudo yum install nss-tools

export VER="v1.3.0"
wget -O mkcert https://github.com/FiloSottile/mkcert/releases/download/${VER}/mkcert-${VER}-linux-amd64

sudo chmod 777 mkcert
sudo mv mkcert /usr/local/bin
mkcert --help
mkcert -install
mkcert localhost 127.0.0.1 ::3000 domain.com

It's generate private key and certificate add both into single file, create a single file httpscert.pem same place as package.json exist and add the both key & certificate into it.

For Linux
"start": "PORT=8000 HTTPS=true react-scripts start",
"prestart": "cp -f ./httpscert.pem ./node_modules/webpack-dev-server/ssl || :",

For Windows
"start": "set PORT=8000 && HTTPS=true&&react-scripts start",
"prestart": "cp -f ./server.pem ./node_modules/webpack-dev-server/ssl || :",

npm start

It's will works fine.

[stepankuzmin]

There is another way to setup HTTPS in development.

You can generate cert with mkcert for example, set SSL_KEY_FILE, and SSL_CRT_FILE, environment variables and create setupProxy.js with:

const fs = require('fs');
const path = require('path');
const proxy = require('http-proxy-middleware');

const makeCert = () => {
  const devServerCertPath = path.resolve(
    path.join(require.resolve('webpack-dev-server'), '../../'),
    'ssl/server.pem'
  );

  if (fs.existsSync(devServerCertPath)) {
    console.log('webpack-dev-server cert already exists, skipping');
    return;
  }

  const keyPath = path.resolve(path.join(__dirname, '..'), process.env.SSL_KEY_FILE);
  if (!fs.existsSync(keyPath)) {
    console.error(`Cert key is missing at ${keyPath}`);
    process.exit(-1);
  }

  const certPath = path.resolve(path.join(__dirname, '..'), process.env.SSL_CRT_FILE);
  if (!fs.existsSync(keyPath)) {
    console.error(`Cert is missing at ${certPath}`);
    process.exit(-1);
  }

  const key = fs.readFileSync(keyPath, 'utf8');
  const cert = fs.readFileSync(certPath, 'utf8');

  const fullCert = key + cert;
  fs.writeFileSync(devServerCertPath, fullCert);
  console.log(`Cert is writtent to ${devServerCertPath}`);
};

module.exports = (app) => {
  if (process.env.HTTPS === 'true') {
    makeCert();
  }
};

[noetix]

Just updated Chrome and I can't even view my local anymore, it won't let me pass the invalid certificate.

[Lukortech]

Coming here with the same output as the one presented by @noetix

[ghost]

I' m having the same issue. I have it running on a docker container but accessing through network. maybe that's related? as subject and issuer are localhost, but I'm accessing through a completely different network IP

[udnisap]

@noetix @Lukortech @fedexyz
this is due to https://support.apple.com/en-us/HT210176
webpack-dev-server fixed it in https://github.com/webpack/webpack-dev-server/issues/2273
latest version of react-create-app seems to have fixed it (https://github.com/facebook/create-react-app/pull/7988)
if you want to fix it locally try

cd node_modules/react-scripts
npm install [email protected]
cd -
HTTPS=true npm start

[noetix]

Can confirm updating react-scripts to latest unblocks what I reported.

[InSuperposition]

I had to update react-scripts from 3.3.0 to 3.4.0 for this to work.

[stramel]

@iansu I believe this has already landed using HTTPS=true npm start

https://create-react-app.dev/docs/using-https-in-development/

[marcofugaro]

I think the docs still need a guide or at least a link about how to create your own certificate.

[ORESoftware]

@rlueder step 2 is unclear to me - so I should have two private keys in one file?

[ORESoftware]

this didnt work for me:

PORT=3015 HTTPS='true' \
    SSL_CRT_FILE='certs/localhost/server.crt' \
    SSL_KEY_FILE='certs/localhost/server.key' \
    react-scripts start

but this did work eventually:

cp -f ./certs/localhost/server.pem ./node_modules/webpack-dev-server/ssl/server.pem
PORT=3015 HTTPS='true' react-scripts start

I copied my server.crt and server.key into the new server.pem file. the server.crt content was first, the server.key content was second, so basically two private keys in one file (server.pem). This seems so fucking ridiculous, why the first one didn't work :(

[amir-beheshty]

For anyone else still experiencing this issue, the following worked for me:

"scripts": {
    "start": "HTTPS=true react-scripts start",
    "prestart": "cp -f ./.cert/key.pem ./node_modules/webpack-dev-server/ssl/server.pem && cat ./.cert/cert.pem >> ./node_modules/webpack-dev-server/ssl/server.pem",
  },

yarn start -> profit.

[wozzo]

You can specify the certificates location with environment variables or in a .ENV file and won't need the prestart step then.
I wrote this to help me remember how to do it Using HTTPS with create react app .

[amir-beheshty]

You can specify the certificates location with environment variables or in a .ENV file and won't need the prestart step then.

@wozzo Does this work with webpack-dev-server < v3.9? Because there's a bug and the prestart script is a workaround.

[wozzo]

It needs react-scripts 3.4.2+