How can I provide a SSL certificate with create-react-app?
I was able to get a local certificate working without modifying the webpack-dev-server
files using react-scripts
3.4.1
(technically added in 3.4.0
but I had some—probably unrelated—issues). I added these two environment variables to my .env.development
:
SSL_CRT_FILE=.cert/server.crt
SSL_KEY_FILE=.cert/server.key
Notes:
.cert
is a folder I created in the root of my project- My script that generates the SSL certificate
- Official documentation on these two environment variables
To expand on Elad's answer:
- Create a self-signed certificate following the instructions linked to from https://github.com/webpack/webpack-dev-server/tree/master/examples/cli/https
- Save the pem file (containing both the certificate and private key) somewhere in your project (e.g.
/cert/server.pem
)
- Save the pem file (containing both the certificate and private key) somewhere in your project (e.g.
- 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",
- Modify your package.json scripts:
Update: see Andi's answer below. In recent version you should set environment variable to configure the certificate
SSL_CRT_FILE=.cert/server.crt
SSL_KEY_FILE=.cert/server.key
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