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 ?
11
Answers
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.htmlIf 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!
Update: see Andi’s answer below.
In recent version you should set environment variable to configure the certificate
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 apostinstall
script that creates a symlink.Here is a script I created:
Your
package.json
should look something like:To expand on Elad’s answer:
/cert/server.pem
)This is what I did:
Then I double clicked and imported:
rootCA.pem
andserver.pem
Then I modified
package.json
:Very important sources:
I was able to get a local certificate working without modifying the
webpack-dev-server
files usingreact-scripts
3.4.1
(technically added in3.4.0
but I had some—probably unrelated—issues). I added these two environment variables to my.env.development
:Notes:
.cert
is a folder I created in the root of my projectHere is the webpack config of react-scripts when using
HTTPS=true
along sideSSL_CRT_FILE
&SSL_CRT_FILE
. So you should just be able to add it to the env to set the paths to your cert.Use mkcert to create the self-signed cert and install it. I tried other methods but they’re error prone.
Example using macOS:
Edit package.json:
Are we looking for integration of SSL (HTTPS) to localhost for application? Or securely API call with any encryption (specific) algo.
If SSL enablement only,
Need to change at package.json file with HTTPS like –
Create your SSL certificate
In the project root folder, run:
run the
Enable your certificate (.perm) like –
now run with https://lochost:3000
Simplest way is to run reactjs with SSL on Ubuntu and windows is –
Create cert.pem and key.pem file and put it in ssl folder in app root folder
add below lines in scripts of package.json
Ubuntu – npm run ssl-linux on ubuntu
Windows – npm run ssl-win
To create pem file on ubuntu
Sample folder structure
Do not use self-signed certificates as I saw in some answers. There are lots of trusted certificate providers over the web. You just need to have a valid domain and you can easily prove that you are the owner. My certificate was provided by this authority for free: https://www.noip.com/.
Create your
private key
and theCertificate Signing Request
(CSR
):openssl req -new -newkey rsa:2048 -nodes -keyout your_domain.key -out your_domain.csr
Go to a certificate provider like
noip
and request a certificate by submitting yourCSR
and you’ll receive at your email a trusted signed cerificate. Don’t forget tokeep secret your private key
, just share the CRS with your authority!Then in react you just need to have your
.env
file configured as follows (.cert/
folder in the root directory):HOST=<YOUR_IP_OR_DOMAIN>
HTTPS=true
PORT=443
SSL_CRT_FILE=.cert/your_domain.crt
SSL_KEY_FILE=.cert/your_domain.key
Note: In my case I did not use the 443 port because I’m using port forwarding, so I can use any port inside my internal network. Also the IP address you can use the public one directly or you can forward to any private address (this is what I do).
Ultimately, this is what helped me. on Windows.
But first, i got the certificates like this.
note : i had to install mkcert using chocolatey, on windows. So, you probably have to start with this, before getting the React js app to work with https on windows.
Update1 : I put the entire code on github, if someone wants to see a full solution in action. link here – https://github.com/Jay-study-nildana/FrontEndForStudents/tree/main/ReactJSForStudents/httpshelloworld