How can I provide a SSL certificate with create-re

Question

I am trying to host a react app I created and tested locally using the facebook boilerplate.
The client app interacts with an API I made using node.js, and with which I had no issue setting up a secure connection (with a node.js client sending my SSL certificate, for testing).
However, I am encountering difficulties when it comes to using react to send my SSL certificate instead of a self-signed one which causes me to encounter this error using chrome and trying to access to https://example.net:3000 :

Your connection is not private (NET:ERR_CERT_AUTHORITY_INVALID)

The documentation did not quite help me:

Note that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page. https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development

How can I use my own SSL certificate (which I already use on another app on my domain and works like a charm) instead of this self-signed one ? Did I miss something ?

Answer 1

Ejecting create-react-app is not recommended since you won't be able to seamlessly upgrade it. Moreover, you can easily have valid SSL certificate without ejecting.
You will need to copy your certificate to node_modules/webpack-dev-server/ssl/server.pem. The downside is that you need to manually copy the file. However, one way to make this seamless is to add a postinstall script that creates a symlink. Here is a script I created:

#!/bin/bash
# With create-react-app, a self signed (therefore invalid) certificate is generated.
# 1. Create some folder in the root of your project
# 2. Copy your valid development certificate to this folder
# 3. Copy this file to the same folder
# 4. In you package.json, under `scripts`, add `postinstall` script that runs this file.
# Every time a user runs npm install this script will make sure to copy the certificate to the 
# correct location

TARGET_LOCATION="./node_modules/webpack-dev-server/ssl/server.pem"
SOURCE_LOCATION=$(pwd)/$(dirname "./local-certificate/server.pem")/server.pem

echo Linking ${TARGET_LOCATION} TO ${SOURCE_LOCATION}
rm -f ${TARGET_LOCATION} || true
ln -s ${SOURCE_LOCATION} ${TARGET_LOCATION}
chmod 400 ${TARGET_LOCATION} # after 30 days create-react-app tries to generate a new certificate and overwrites the existing one. 
echo "Created server.pem symlink"

Your package.json should look something like:

"scripts": {
    ...
    "postinstall": "sh ./scripts/link-certificate.sh"
}

• My solution is based on this thread

Answer 2

To expand on Elad's answer:

1. Create a self-signed certificate following the instructions linked to from https://github.com/webpack/webpack-dev-server/tree/master/examples/cli/https
2. Save the pem file (containing both the certificate and private key) somewhere in your project (e.g. /cert/server.pem)
3. Modify your package.json scripts: "start": "HTTPS=true react-scripts start", "prestart": "rm ./node_modules/webpack-dev-server/ssl/server.pem && cp -f ./cert/server.pem ./node_modules/webpack-dev-server/ssl",

Answer 3

Your server that serves files from that port needs to be configured to use your SSL cert. I'm guessing you are using webpack-dev-server on that port (that's what npm start does in create-react-app), and maybe a different server (apache, nginx, etc) on port 80?

You can either serve your compiled files using your already configured server, or configure webpack-dev-server to use your SSL cert.

To do this, you can use webpack-dev-server's --cert option. See https://webpack.github.io/docs/webpack-dev-server.html

If you want to do this using npm start, which calls a custom start script, you'll have to edit that start script. You may need to use the eject command first, which dumps all the config code into your repo so you can change it.

Here is the source code of the start script: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/scripts/start.js#L230

I should also note that webpack-dev-server isn't intended to be used in a production environment.

Have fun!