Starting a react app in HTTPS instead of HTTP - reactjs

Question

I want to know how to start a react app which was made using the create-react-app command in https instead of HTTP?

Answer 1

Use something like Root SSL certificate
Generate a key
openssl genrsa -des3 -out rootCA.key 2048
With they key you can generate a certificate which is good for 1,024 days
openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem
Open keychain access on your Mac and go to the certificates category and emport that rootCA.pem generated from the last step. Double click and under "When using this certiciate" select 'Always Trust'
Create an OpenSSL configuration file
server.csr.cnf
[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn
[dn]
C=US
ST=RandomState
L=RandomCity
O=RandomOrganization
OU=RandomOrganizationUnit
emailAddress=hello#example.com
CN = localhost
Create a v3.ext file to create a X509 v3 certificate.
authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = #alt_names
[alt_names]
DNS.1 = localhost
Create a certificate key for localhost using the configuration settings stored in server.csr.cnf. This key is stored in server.key.
openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <( cat server.csr.cnf )
A certificate signing request is issued via the root SSL certificate we created earlier to create a domain certificate for localhost. The output is a certificate file called server.crt.
openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext
You’re now ready to secure your localhost with HTTPS. Move the server.key and server.crt files to an accessible location on your server and include them when starting your server.
In an Express app written in Node.js, here’s how you would do it. Make sure you do this only for your local environment. Do not use this in production.
var path = require('path')
var fs = require('fs')
var express = require('express')
var https = require('https')
var certOptions = {
key: fs.readFileSync(path.resolve('build/cert/server.key')),
cert: fs.readFileSync(path.resolve('build/cert/server.crt'))
}
var app = express()
var server = https.createServer(certOptions, app).listen(443)
Check https://github.com/dakshshah96/local-cert-generator/ for more detailed instructions

Answer 2

Adding on to the solution provided by Mark, to import the certificate you must click File > Import Items. Then, search for the certificate on your hard drive. After doing so you can proceed with the remaining steps.