How to Use SSL in a Create-React-App Application
Secure Sockets Layer (SSL) is a security protocol that establishes a secure link between a server and a client. It is part of the HTTPS protocol that performs data encryption. SSL is important because it protects data from eavesdropping and related attacks.
By default, if you create a React application using create-react-app, the application does not use HTTPS. Enabling HTTPS for your app is useful especially if you plan to proxy requests to an API that serves them via HTTPS.
Using HTTPS in React
When youcreate an app using create-react-app, it runs on HTTP by default. To use SSL and serve pages over HTTPS, you will need to set theHTTPSvariable to true inpackage.json. Do so by modifying thescripts.startvalue to look like this:
Alternatively, you may set theHTTPSenvironment variable to true when you start your app.
On Linux/macOS:
On Windows cmd:
On Windows Powershell:
However, each approach is just the first step. If you try starting your React application at this point, you’ll get an error. To complete the process, you’ll need to set up a validSSL certificate.
Create a Certificate Authority on Your Machine
One of the tools you may use to generate an SSL certificate is mkcert. It allows you to create locally tested development certificates without configuring anything.
It is cross-platform compatible and works on Windows, Linux, and macOS. This article uses Linux.
Find the installation guide of the platform you are using from themkcert GitHub page.
Start by installingcertutil.
Then you can installmkcertusing Homebrew
Create a local certificate authority(Ca) by running the following command.
After the CA is successfully created, you can now start generating SSL certificates.
Generate SSL Certificate
Navigate to the root folder of your React app and generate an SSL certificate.
First, create a folder for the certificate.
Run the following to generate the certificate and store it in the folder you just created.
Configure React to Use SSL
In package.json, add a path that points to the SSL certificates.
Secure Your React Site Using SSL
This article showed you how you can use SSL certificates in a React local environment. SSL certificates are however essential for all web applications. They protect your website from hackers and protect the data of the users visiting your site.
It doesn’t matter if you’re developing a modest blog or a full eCommerce site: you need an SSL certificate. Here are some practical reasons why.
The fix was buried in one tiny toggle.
I plugged random USB devices into my phone and was pleasantly surprised by how many actually worked.
Goodbye sending links via other apps.
I gripped my chair the entire time—and then kept thinking about it when the screen turned off.
It saves me hours and keeps my sanity intact.
