Starting a react app in HTTPS instead of HTTP

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
 [email protected]
 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