#2759 Add advanced HTTPS configuration

[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.

[facebook-github-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[alexbrazier]

Not sure if you've seen already, but I've created a PR to do this, but with env vars #5845. Does that PR suit your needs?

[dbk91]

@alexbrazier I apologize, never saw that PR. Looks like it would! The only options this PR supports that the other doesn't is the root CA and client certificate request flag to implement client-certificate authentication (rare use-case, but one I've needed on two different projects). That was the configuration I was targeting with this PR, so the custom SSL certificate was really a side-effect of the issue I was addressing.

Looks like it would be trivial to support those options in your PR, if you chose to. I don't mind how it's implemented, as long as it's deemed consistent by the CRA team. 👍

[stale]

This pull request 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.

[stale]

This pull request has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue. Thank you for your contribution!