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 4dbb2536d70..607bb02e2e1 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 60a9713df33..acd4c197ea3 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: {