2018-10-07 20:03:07 +02:00
---
id: using-https-in-development
2018-10-19 19:49:55 -04:00
title: Using HTTPS in Development
sidebar_label: HTTPS in Development
2018-10-07 20:03:07 +02:00
---
> Note: this feature is available with `react-scripts@0.4.0` and higher.
2018-10-29 11:00:28 -07:00
You may require the dev server to serve pages over HTTPS. One particular case where this could be useful is when using [the "proxy" feature ](proxying-api-requests-in-development.md ) to proxy requests to an API server when that API server is itself serving HTTPS.
2018-10-07 20:03:07 +02:00
To do this, set the `HTTPS` environment variable to `true` , then start the dev server as usual with `npm start` :
2018-10-07 20:51:30 +02:00
### Windows (cmd.exe)
2018-10-07 20:03:07 +02:00
``` cmd
set HTTPS = true&& npm start
```
(Note: the lack of whitespace is intentional.)
2018-10-07 20:51:30 +02:00
### Windows (Powershell)
2018-10-07 20:03:07 +02:00
``` Powershell
2018-10-19 19:30:11 -04:00
( $env:HTTPS = " true " ) -and ( npm start )
2018-10-07 20:03:07 +02:00
```
2018-10-07 20:51:30 +02:00
### Linux, macOS (Bash)
2018-10-07 20:03:07 +02:00
2019-02-22 07:16:33 +02:00
``` sh
2018-10-07 20:03:07 +02:00
HTTPS = true npm start
```
Note that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page.
2019-10-14 03:58:14 +02:00
2020-01-31 12:36:06 +00:00
## Custom SSL certificate
To set a custom certificate, set the `SSL_CRT_FILE` and `SSL_KEY_FILE` environment variables to the path of the certificate and key files in the same way you do for `HTTPS` above. Note that you will also need to set `HTTPS=true` .
### Linux, macOS (Bash)
``` bash
HTTPS = true SSL_CRT_FILE = cert.crt SSL_KEY_FILE = cert.key npm start
```
2019-10-14 03:58:14 +02:00
To avoid having to set the environment variable each time, you can either include in the `npm start` script like so:
``` json
{
"start" : "HTTPS=true react-scripts start"
}
```
Or you can create a `.env` file with `HTTPS=true` set.
[Learn more about environment variables in CRA ](https://create-react-app.dev/docs/adding-custom-environment-variables ).
2020-01-31 12:36:06 +00:00
