At some point in your development, you need to do some API-request. The problem is that when you are in localhost-environment, the HTTP is considered Non Secure. Therefore, you need to use HTTPS instead.
- Make the SSL-files
- Connect SSL-files with React project
- Get the Certification!
- Reload Server
1. Make the SSL-files
Open up your root-folder and create a new folder called certification (or some other name of your choice).
Open up the certification and run this bit of code:
openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365
Now you have to print a password. And confirm it.
After this there is form to fill, but this is optional.
This line of code generates two files — cert.key and cert.perm.
2. Connect SSL-files with React project
Open ut the package.json and scroll down to Debug/scripts section. Replace the start value:
“start”: “react-scripts start”,
With following line:
“start”: “export HTTPS=true&&SSL_CRT_FILE=cert.pem&&SSL_KEY_FILE=key.pem react-scripts start”,
It should look like this:
Run the application:
3. Get the Certification!
Now we can reach the Certification option by clicking on Not Secure in browsers search bar.
Click on the Certificate option and a new window will open.
Now — drag that little icon, gently, and drop it on your Desktop.
Double click on the icon and enter password
Now you are in your Keychain. Double click on the certificate again. You can have more than one certificate named localhost. Each localhost goes to an individual project.
Choose Always Trust option.
And confirm changes.
You can move the certificate on the Desktop to the Bin.
4. Reload Server
Don’t forget to stop the server at the Terminal with CTRL + C and restart it. And then refresh your browser.
Now you got your padlock and a secure HTTPS React web page.