27
How to configure https (SSL) locally?
A React application is in many cases scaffolded with
create-react-app and if you're running it locally its served using HTTP. A production application should run in HTTPS (SSL) for security reasons, in some cases a local version has to run on https for authenticating users on the backend, when using AzureB2C, or using the proxy feature or similar. Let's see how this can be achieved.This feature requires
[email protected]. To enable HTTPS you have to set the environment variable to true, then start the dev server as usual with npm start.When using Windows with cmd.exe:
set HTTPS=true&&npm startWhen using Windows with Powershell:
($env:HTTPS = "true") -and (npm start)Linux or macOS with Bash:
HTTPS=true npm startIf you want a more general approach on setting the environment variable, you can use a package like cross-env.
I scaffolded a React app with
create-react-app ssl-test, and after running the command (linux) the output looks like this:$ HTTPS=true npm start
> [email protected] start C:\dev\ssl-test
> react-scripts start
i ｢wds｣: Project is running at https://123.123.123.123
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from C:\dev\ssl-test\public
i ｢wds｣: 404s will fallback to /
Starting the development server...
Compiled successfully!
You can now view ssl-test in the browser.
Local: https://localhost:3000
On Your Network: https://123.123.123.123
Note that the development build is not optimized.
To create a production build, use yarn build.The server will use a self-signed certificate , so your web browser will display a warning when accessing the entry point of the application.
You have to create a local Certificate Authority, and an SSL certificate and set the
SSL_CERT_FILE and SSL_KEY_FILE to the generated files.As the first step, you should generate a local Certificate Authority, and an SSL certificate for Local Development.
You need a package manager to install mkcert:
- Install mkcert.
- Create a locally trusted CA with
mkcert -install. - Generate an SSL certificate with
mkcert localhost.
After generating the local certificate authority and ssl certificate we have to set the SSL_CRT_FILE and SSL_KEY_FILE environment variables to the path of the certificate and key files. HTTPS has to be also true.
Windows:
set HTTPS=true&&set SSL_CRT_FILE={CERT-PATH}&&set SSL_KEY_FILE={KEY-PATH}&&react-scripts startLinux, macOS:
HTTPS=true SSL_CRT_FILE={CERT-PATH} SSL_KEY_FILE={KEY-PATH} react-scripts startThe variables
CERT-PATH and KEY-PATH are the paths to the generated files. Eventually, we set the command as the npm start script, and the application runs on HTTPS."scripts": {
"start": "HTTPS=true SSL_CRT_FILE={CERT-PATH} SSL_KEY_FILE={KEY-PATH} react-scripts start"
}Thanks for reading and if you have any questions , use the comment function or send me a message @mariokandut. If you want to know more about React, have a look at these React Tutorials.
References (and Big thanks):
27