Allow custom certificates in HTTPS mode

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 `[email protected]` 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
+```

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: {