Featured image of post Using HTTPS in development with ReactJS

Using HTTPS in development with ReactJS

Install Chocolatey

First, open PowerShell as administrator.

  • Run Get-ExecutionPolicy. If it returns Restricted, then run Set-ExecutionPolicy AllSigned or Set-ExecutionPolicy Bypass -Scope Process.

Now, run the following command:

1
2
3
Set-ExecutionPolicy Bypass -Scope Process -Force;
[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072;
iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

Install mkcert

After install chocolatey, we can install mkcert using:

1
choco install mkcert

Create a locally trusted CA

Now we create a trusted certificate authority in our system’s root store:

1
mkcert -install

Generating an SSL certificate

Create a folder name “cert” in the root of our React project. Open CMD from this directory and run this command:

1
mkcert localhost

Generating an SSL certificate

Create develop environment

Create “.env” file at the root of our project and paste this config:

1
2
3
HTTPS=true
SSL_CRT_FILE=./cert/localhost.pem
SSL_KEY_FILE=./cert/localhost-key.pem

Finally Now save all and run the project, we could have the secure connection.

Generating an SSL certificate

Note: That way be used in the development with localhost, not in production!