How can I provide an SSL certificate using the create-react-app?

Question

I am trying to host a responsive application that I created and tested locally using the facebook template.
The client application interacts with the API that I created using node.js, and with which I had no problems setting up a secure connection (with the node.js client sending my SSL certificate for testing).
However, I run into difficulties when it comes to using the response to sending my SSL certificate instead of the self-signed one, which makes me encounter this error using chrome and trying to access https://example.net//000 :

Your connection is not private (NET: ERR_CERT_AUTHORITY_INVALID)

The documentation didn't help me much:

Please note that the server will use a self-signed certificate, so your web browser will almost certainly display a warning when 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 in another application in my domain and works like a charm) instead of this self-signed? Did I miss something?

Answer 1

Your server, which serves files from this port, must be configured to use your SSL certificate. I assume that you are using webpack-dev-server on this port (what npm start does in create-respond-app), and possibly another server (apache, nginx, etc.) on port 80?

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

You can use the webpack-dev-server --cert option for this. See https://webpack.imtqy.com/docs/webpack-dev-server.html.

If you want to do this with npm start, which calls your own start script, you will have to edit this start script. You may need to use the eject command first, which dumps all the configuration code to the repository so that you can change it.

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

It should also be noted that webpack-dev-server is not intended for use in a production environment.

Have some fun!

Answer 2

Retrieving create-react-app not recommended, as you cannot easily update it. In addition, you can easily obtain a valid SSL certificate without retrieval.
You will need to copy your certificate to node_modules/webpack-dev-server/ssl/server.pem . The disadvantage is that you need to manually copy the file. However, one way to achieve this is to add a postinstall script that creates a symbolic link. Here is the 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 this:

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

• My decision is based on this topic.

Answer 3

More on Elad:

• 1. Create a self-signed certificate by following the instructions from https://github.com/webpack/webpack-dev-server/tree/master/examples/cli/https
• 2. Save the pem file (containing both the certificate and the private key) somewhere in your project (e.g. /cert/server.pem )
• 3. Change 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 4

Here is what I did:

 bash <(wget -qO- https://gist.github.com/w35l3y/5bb7fe8508d576472136f35428019177/raw/local-cert-generator.sh) 

Then I double clicked and imported: rootCA.pem and server.pem

Then I changed package.json :

 "start": "HTTPS=true react-scripts start", "prestart": "cp -f /path/to/server.pem ./node_modules/webpack-dev-server/ssl", 

Very important sources:

• https://serverfault.com/questions/226386/wget-a-script-and-run-it
• https://gist.github.com/w35l3y/5bb7fe8508d576472136f35428019177

Answer 5

Can someone provide an example for future certificate use in React?

I added .pem to the specified directory, but how do I refer to it in my API call?

I tried the following in various ways, but could not get it to work:

 axios .post(loginApi, body, { httpsAgent: new https.Agent({ ca: "test_certificate.pem" }) } ) .then(response => { ... }) .catch(error => { ... }); 

How to transfer a certificate to an https agent? Do I need to import a certificate along its path?

I am really new to this topic, so I apologize for the lack of knowledge.