HTTPS in Development #6126

pqt · 2019-01-04T19:26:31Z

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

The text was updated successfully, but these errors were encountered:

jimthedev · 2019-01-04T22:22:22Z

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 · 2019-01-04T22:29:55Z

@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 · 2019-01-10T02:56:56Z

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

https://github.com/FiloSottile/mkcert

stale · 2019-02-09T02:59:00Z

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 · 2019-02-11T23:04:28Z

idk, is this stale?

albertorestifo · 2019-02-28T15:33:16Z

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 · 2019-03-21T14:42:02Z

The simple steps below worked for me:

Install mkcert and run mkcert localhost
add both the private key and certificate generated by mkcert to a single .pem file (e.g. server.pem)
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 || :"
start CRA in HTTPS mode: HTTPS=true npm start
💰 profit! 💰

Similar discussions:
#430
#5845
#6544

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

ngduc · 2019-04-11T01:00:08Z

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 · 2019-05-11T01:44:50Z

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 · 2019-05-11T05:09:46Z

idk, is this stale ... again?

stale · 2019-06-10T05:47:16Z

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 · 2019-06-10T17:03:07Z

Nope, still waiting on the PR to be merged

stale · 2019-07-10T17:24:51Z

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 · 2019-07-27T16:38:34Z

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 · 2019-07-29T07:36:03Z

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

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

pqt · 2019-07-31T18:35:32Z

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

kgaurav7788 · 2019-08-12T12:51:50Z

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 · 2019-11-11T14:56:17Z

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 · 2019-11-12T11:49:39Z

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

Lukortech · 2019-12-05T22:39:10Z

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

ghost · 2019-12-13T09:33:34Z

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 · 2020-01-04T07:15:12Z

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

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

noetix · 2020-01-07T07:35:10Z

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

InSuperposition · 2020-02-15T15:22:09Z

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

stramel · 2020-02-26T05:07:13Z

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

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

marcofugaro · 2020-04-21T13:47:53Z

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

ORESoftware · 2020-04-24T19:15:52Z

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

ORESoftware · 2020-04-24T20:44:23Z

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 · 2020-09-28T22:51:52Z

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 · 2020-10-02T07:03:42Z

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 · 2020-10-02T16:16:51Z

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 · 2020-10-02T17:37:32Z

It needs react-scripts 3.4.2+

…facebook/create-react-app#6126. Also need to add logout.

stale bot added the stale label Feb 9, 2019

stale bot removed the stale label Feb 11, 2019

stale bot added the stale label May 11, 2019

stale bot removed the stale label May 11, 2019

rlueder mentioned this issue May 28, 2019

Make the SSL certificate and key configurable for localhost #4050

Closed

stale bot added the stale label Jun 10, 2019

stale bot removed the stale label Jun 10, 2019

stale bot added the stale label Jul 10, 2019

iansu added issue: proposal and removed stale labels Jul 10, 2019

ORESoftware mentioned this issue Apr 24, 2020

HTTPS / SSL config seems wrong #8882

Closed

noknokcody mentioned this issue Oct 20, 2021

Can't get https running #11158

Open

yongish added a commit to yongish/beizhongwen-ui that referenced this issue Mar 19, 2024

Working on Facebook and Google login. Need to test Facebook login with …

a16e69f

…facebook/create-react-app#6126. Also need to add logout.

yongish added a commit to yongish/beizhongwen-ui that referenced this issue Mar 19, 2024

Facebook HTTPs in development. facebook/create-react-app#6126

56a3201

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HTTPS in Development #6126

HTTPS in Development #6126

pqt commented Jan 4, 2019 •

edited

Loading

jimthedev commented Jan 4, 2019

pqt commented Jan 4, 2019 •

edited

Loading

pqt commented Jan 10, 2019

stale bot commented Feb 9, 2019

pqt commented Feb 11, 2019

albertorestifo commented Feb 28, 2019

rlueder commented Mar 21, 2019 •

edited

Loading

ngduc commented Apr 11, 2019 •

edited

Loading

stale bot commented May 11, 2019

pqt commented May 11, 2019

stale bot commented Jun 10, 2019

albertorestifo commented Jun 10, 2019

stale bot commented Jul 10, 2019

JamesMaroney commented Jul 27, 2019

albertorestifo commented Jul 29, 2019

pqt commented Jul 31, 2019

kgaurav7788 commented Aug 12, 2019 •

edited

Loading

stepankuzmin commented Nov 11, 2019

noetix commented Nov 12, 2019

Lukortech commented Dec 5, 2019

ghost commented Dec 13, 2019

udnisap commented Jan 4, 2020

noetix commented Jan 7, 2020

InSuperposition commented Feb 15, 2020 •

edited

Loading

stramel commented Feb 26, 2020

marcofugaro commented Apr 21, 2020

ORESoftware commented Apr 24, 2020

ORESoftware commented Apr 24, 2020 •

edited

Loading

amir-beheshty commented Sep 28, 2020

wozzo commented Oct 2, 2020

amir-beheshty commented Oct 2, 2020 •

edited

Loading

wozzo commented Oct 2, 2020

HTTPS in Development #6126

HTTPS in Development #6126

Comments

pqt commented Jan 4, 2019 • edited Loading

jimthedev commented Jan 4, 2019

pqt commented Jan 4, 2019 • edited Loading

pqt commented Jan 10, 2019

stale bot commented Feb 9, 2019

pqt commented Feb 11, 2019

albertorestifo commented Feb 28, 2019

rlueder commented Mar 21, 2019 • edited Loading

ngduc commented Apr 11, 2019 • edited Loading

stale bot commented May 11, 2019

pqt commented May 11, 2019

stale bot commented Jun 10, 2019

albertorestifo commented Jun 10, 2019

stale bot commented Jul 10, 2019

JamesMaroney commented Jul 27, 2019

albertorestifo commented Jul 29, 2019

pqt commented Jul 31, 2019

kgaurav7788 commented Aug 12, 2019 • edited Loading

stepankuzmin commented Nov 11, 2019

noetix commented Nov 12, 2019

Lukortech commented Dec 5, 2019

ghost commented Dec 13, 2019

udnisap commented Jan 4, 2020

noetix commented Jan 7, 2020

InSuperposition commented Feb 15, 2020 • edited Loading

stramel commented Feb 26, 2020

marcofugaro commented Apr 21, 2020

ORESoftware commented Apr 24, 2020

ORESoftware commented Apr 24, 2020 • edited Loading

amir-beheshty commented Sep 28, 2020

wozzo commented Oct 2, 2020

amir-beheshty commented Oct 2, 2020 • edited Loading

wozzo commented Oct 2, 2020

pqt commented Jan 4, 2019 •

edited

Loading

pqt commented Jan 4, 2019 •

edited

Loading

rlueder commented Mar 21, 2019 •

edited

Loading

ngduc commented Apr 11, 2019 •

edited

Loading

kgaurav7788 commented Aug 12, 2019 •

edited

Loading

InSuperposition commented Feb 15, 2020 •

edited

Loading

ORESoftware commented Apr 24, 2020 •

edited

Loading

amir-beheshty commented Oct 2, 2020 •

edited

Loading