From 77b5acdeda95451450cd34db0f15f184f2375d20 Mon Sep 17 00:00:00 2001
From: Alberto Restifo <alberto.restifo@gmail.com>
Date: Thu, 28 Feb 2019 16:56:38 +0100
Subject: [PATCH] Allow custom certificates in HTTPS mode
---
docusaurus/docs/using-https-in-development.md | 14 +++++++++++++-
.../config/webpackDevServer.config.js | 19 +++++++++++++++++--
2 files changed, 30 insertions(+), 3 deletions(-)
diff --git a/docusaurus/docs/using-https-in-development.md b/docusaurus/docs/using-https-in-development.md
index 4dbb2536d..607bb02e2 100644
--- a/docusaurus/docs/using-https-in-development.md
+++ b/docusaurus/docs/using-https-in-development.md
@@ -30,4 +30,16 @@ set HTTPS=true&&npm start
HTTPS=true npm start
```
-Note that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page.
+Note that the server by default will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page.
+
+## Providing valid certificates
+
+> Note: this feature is available with `react-scripts@x.x.x` and higher.
+
+If you want to use valid certificates for local development, you can use a tool like [mkcert](https://github.com/FiloSottile/mkcert) to create a valid local certificate.
+
+You can then set the certificate path as an environment variables when starting the dev server:
+
+```sh
+HTTPS=true HTTPS_KEY=/path/to/key.pem HTTPS_CERT=/path/to/cert.pem npm start
+```
diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js
index 60a9713df..acd4c197e 100644
--- a/packages/react-scripts/config/webpackDevServer.config.js
+++ b/packages/react-scripts/config/webpackDevServer.config.js
@@ -18,6 +18,22 @@ const fs = require('fs');
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const host = process.env.HOST || '0.0.0.0';
+// Enable HTTPS if the HTTPS environment variable is set to 'true'.
+let https = false;
+if (process.env.HTTPS === 'true') {
+ https = true;
+
+ // Pass a custom certificate file when the environment variables are set
+ const keyFile = process.env.HTTPS_KEY;
+ const certFile = process.env.HTTPS_CERT;
+ if (keyFile && certFile) {
+ https = {
+ key: fs.readFileSync(keyFile),
+ cert: fs.readFileSync(certFile),
+ };
+ }
+}
+
module.exports = function(proxy, allowedHost) {
return {
// WebpackDevServer 2.4.3 introduced a security fix that prevents remote
@@ -79,8 +95,7 @@ module.exports = function(proxy, allowedHost) {
watchOptions: {
ignored: ignoredFiles(paths.appSrc),
},
- // Enable HTTPS if the HTTPS environment variable is set to 'true'
- https: protocol === 'https',
+ https,
host,
overlay: false,
historyApiFallback: {
--
GitLab