Created by: dbk91
This is a proposal to add advanced HTTPS configuration to allow developers to use their own certificates or client certificate authentication. This is inspired by the src/setupProxy.js method of configuring a custom proxy server. I chose this as inspiration because I wanted to stay as closely in line with the "zero-config" approach CRA takes.
Essentially, I added a path that looks for a src/setupHTTPS.js file. If the file is there, it assumes it contains an export of a configuration for webpack dev server to use. This means that anything webpack dev server supports in terms of the https configuration variable, the user can add in like so:
// src/setupHTTPS.js
const fs = require('fs');
const path = require('path');
module.exports = {
key: fs.readFileSync(path.resolve(__dirname, '..', 'localhost-key.pem')),
cert: fs.readFileSync(path.resolve(__dirname, '..', 'localhost.pem')),
// For client auth
// ca: fs.readFileSync(path.resolve(__dirname, '..', 'rootCA.pem')),
// requestCert: true,
};I debated between this and enforcing a specific folder/naming scheme so that the user didn't have to write any path imports and would just need to place the files in the appropriate spots (and possibly add the folder to the .gitignore to ensure certs were never committed). However, I decided that if a developer needs this feature, this approach is probably low enough effort for them.
I tested this by running yarn create-react-app test-app to create a blank project. I used a tool called mkcert to create trusted certificates for localhost. I created the file src/setupHTTPS.js using the configuration above and started the development server. I successfully got the green lock and verified the certificate was the one generated from mkcert.
Considering this feature will be a smaller use case, I ensured that this configuration does not affect the current approach to enabling HTTPS. The configuration falls back to reading the environment variable if the file does not exist.
Any feedback on this would be greatly appreciated. If it's too much configuration or too big of a change, I would love to continue to explore an approach that can get this feature working. I know it would be useful for some developers.