create-react-app: how to use https instead of http?

Question

I was wondering if anyone knows how to use https on dev for the 'create-react-app' environment. I can't see anything about that in the README or quick googling. I just want either the https://localhost:3000 to work, or else https://localhost:3001.

Steve Buzonas · Accepted Answer · 2020-06-24T14:58:24.473

131

Set HTTPS=true before you run the start command.

Documentation

The implementation uses the HTTPS Environment Variable to determine which protocol to use when starting the server.

edited Jun 24 '20 at 14:58

answered Jun 15 '17 at 18:26

Steve Buzonas

5,300
1
33
55

3

I tried this. I'm on Windows 10 and ran: HTTPS=true&&npm start This did not seem to work. I got the following console message as usual: Compiled successfully! You can now view x-app in the browser. Local: http://localhost:3000/ On Your Network: http://192.168.2.4:3000/ – Ringo Jun 15 '17 at 18:34
seems like your suggestion has something to do with proxying calls to a secure API server? I know react-scripts just calls something like http-server. I might be able to figure it out by looking at the output – Ringo Jun 15 '17 at 18:36
11

Did you just run `HTTPS=true&&npm start`, on windows you need `set HTTPS=true&&npm start`. – Steve Buzonas Jun 15 '17 at 18:46
The HTTPS section of the documentation is after Proxy Configuration, but the same header level. They are separate features. – Steve Buzonas Jun 15 '17 at 18:53
It doesn't call `http.server` by itself, it uses `webpack-dev-server` which uses `express`. – Steve Buzonas Jun 15 '17 at 19:01
OK, it works now. Is there a script where i can add the HTTPS env without having to type it everytime.(And also be compatible for Mac as well as PC – Ringo Jun 15 '17 at 20:03
2

On a unix system like Mac you can export it in your profile. There's an equivalent way to globally set environment variables on windows, but I'm not familiar with it. But, at the project level `dotenv` should be initialized before the start, so you can try adding `HTTPS=true` to your `.env.development` – Steve Buzonas Jun 15 '17 at 20:20
@SteveBuzonas et al., has anyone figured out how to define your own cert? In Firefox I can't proceed on https://localhost due to a 'The certificate is not trusted because it is self-signed.' error. – Sean Nov 28 '17 at 18:43
@Sean you would need to fork `react-scripts` or `eject` in order to do that. You can use a predefined cert with `webpack-dev-server`, but the scripts just allow it to generate a cert. Why not just add an exception? – Steve Buzonas Nov 30 '17 at 17:39
2

@Ringo A little late to the party, but [this shows how to set `PATH` for Java](https://www.java.com/en/download/help/path.xml). It's the same process for any environment variable, like `HTTPS` or `NODE_ENV` or what-have-you on Windows. You can also open Windows Explorer, right click *This PC*, select *Properties*, then *Advanced System Settings*, then click the *Environment Variables* button... & profit. – ruffin May 09 '18 at 15:03
@Sean You can pass in custom certificates with the `SSL_CRT_FILE` and `SSL_KEY_FILE` env vars and CRA will use them instead of the default ones from webpack. To have HTTPS working on localhost without the warning, you can use mkcert to create your own Certificate Authority and generate certificates with it. It sounds more complicated than it is and [this video shows you how](https://youtu.be/neT7fmZ6sDE) – Maxim Orlov Sep 03 '20 at 12:55
1

Make sure that `HTTPS=true` is in upper-case, lower-case `https=true` will not work. – Snackoverflow Feb 21 '21 at 08:58
A full cmd line for Windows: `set PORT=443&&set HTTPS=true&&set SSL_CRT_FILE=./certs/fullchain.pem&&set SSL_KEY_FILE=./certs/privKey.pem&& npm start` – Farzan May 15 '21 at 20:33

score 52 · Answer 2 · edited Jun 13 '18 at 11:01

52

You can edit your package.json scripts section to read:

"scripts": { "start": "set HTTPS=true&&react-scripts start", ... }

or just run set HTTPS=true&&npm start

Just a sidenote, for me, making this change breaks hot reloading for some reason....

-- Note: OS === Windows 10 64-Bit

edited Jun 13 '18 at 11:01

Stoyan Dimov

5,250
2
28
44

answered May 02 '18 at 20:32

Smitty

1,765
15
22

11

To get this working without having to type it out every time I also put it in my package.json but I had to omit the `set` and the `&&` for it to work on my iMac. so I just used `HTTPS=true react-scripts start` – Tope May 15 '18 at 00:42

score 45 · Answer 3 · answered Feb 12 '19 at 22:06

You can also create a file called .env in the root of your project, then write

HTTPS=true

After that, just run "npm start" as you usually do to start your app.

Docs: https://facebook.github.io/create-react-app/docs/advanced-configuration

Works both on Linux and Windows, unlike some other answers posted here.

score 21 · Answer 4 · answered May 21 '20 at 13:02

Windows (cmd.exe)

set HTTPS=true&&npm start

(Note: the lack of whitespace is intentional.)

Windows (Powershell)

($env:HTTPS = "true") -and (npm start)

Linux, macOS (Bash)

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.

Custom SSL certificate

HTTPS=true SSL_CRT_FILE=<SSLCert.crt> SSL_KEY_FILE=<SSLCert.key> npm start

Linux, macOS (Bash)

HTTPS=true SSL_CRT_FILE=<SSLCert.crt> SSL_KEY_FILE=<SSLCert.key> npm start

To avoid doing it each time: You can include in the npm start script like so:

{
  "start": "HTTPS=true react-scripts start"
}

Or you can create a .env file with HTTPS=true

Custom SSL Certificate in Windows: `set HTTPS=true&&set SSL_CRT_FILE=&&set SSL_KEY_FILE=&&npm start` — Dulanka, Feb 24 '21 at 12:14

best wishes · Answer 5 · 2018-11-08T03:13:30.217

20

In Case of MAC/UNIX do

export HTTPS=true
npm start

Or simple one liner

export HTTPS=true&&npm start

Or update start script in package.json to

"start": "export HTTPS=true&&PORT=3000 react-scripts start",

you should be able to hit https.

edited Nov 08 '18 at 03:13

answered Nov 07 '18 at 17:30

best wishes

5,789
1
34
59

Abhinav Kinagi · Answer 6 · 2019-08-23T12:32:16.043

15

set HTTPS=true&&react-scripts start in scripts > start: of package.json as shown below.

"scripts" in package.json:

"scripts": {
    "start": "set HTTPS=true&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Please don't leave any space in between the commands i.e, HTTPS=true && npm start won't work.

Refer it in official doc. Using HTTPS in Development

(Note: the lack of whitespace is intentional.)

edited Aug 23 '19 at 12:32

answered Feb 14 '19 at 08:05

Abhinav Kinagi

3,653
2
27
43

1

this helped. the script changed slightly so now it would be: "start": "set HTTPS=true&&node scripts/start.js", – user1189352 Jan 22 '20 at 00:28

ghchoi · Answer 7 · 2021-03-03T13:50:26.787

I think it is worth to mention to set PORT=443, default HTTPS standard port. You can avoid to attach :PORT at the end of the address when browsing every time.

su
export HTTPS=true 
export PORT=443
export SSL_CRT_FILE=/PATH/TO/cert.pem     # recommended
export SSL_KEY_FILE=/PATH/TO/privkey.pem  # recommended
npm start

Or

you can put them all in to package.json:

  "scripts": {
    "start": "HTTPS=true PORT=443 react-scripts start",

Then, without exporting:

su
npm start

score 7 · Answer 8 · answered Apr 22 '20 at 07:47

7

"scripts": {
"start": "set HTTPS=true&&set PORT=443&&react-scripts start",
........
}

In case you need to change the port and set it to https.

answered Apr 22 '20 at 07:47

Akhilesh

525
1
9
16

how make settings if one use win another mac? – HackerMF Feb 12 '21 at 20:22

score 6 · Answer 9 · answered Dec 10 '21 at 15:37

6

Add to file .env (or .env.local) line: HTTPS=true

answered Dec 10 '21 at 15:37

Klein Maximus

61
1
1

score 5 · Answer 10 · answered Feb 07 '19 at 13:47

5

Please use this in command prompt

 set HTTPS=true&&npm start

answered Feb 07 '19 at 13:47

Suneet Patil

608
9
21

score 4 · Answer 11 · answered Aug 08 '18 at 12:25

4

might need to Install self-signed CA chain on both server and browser. Difference between self-signed CA and self-signed certificate

answered Aug 08 '18 at 12:25

codeislife

1,446
1
10
7

KurgerBing · Answer 12 · 2019-05-24T07:57:45.510

4

if it's still not working properly because of "your connection is not private" issues (in chrome), this worked for me just fine:

https://github.com/facebook/create-react-app/issues/3441

In short:

First I exported certificate from chrome (view this).
Imported the certificate into Windows (using certmgr.msc).
Allowed chrome://flags/#allow-insecure-localhost flag. How to allow insecure localhost

edited May 24 '19 at 07:57

answered May 24 '19 at 07:09

KurgerBing

173
1
2
16

You can also add a hosts file entry and access it by dns name like a production app to get around that issue – Steve Buzonas Sep 11 '19 at 20:56

score 4 · Answer 13 · answered Oct 21 '19 at 20:48

You can create a proxy.HTTPS->HTTP

Create a key and cert.

openssl req -nodes -new -x509 -keyout server.key -out server.cert

Create a file named proxyServer.js

var httpProxy = require('http-proxy');
let fs = require('fs');

httpProxy.createServer({
    target: {
      host: 'localhost',
      port: 3000
    },
    ssl: {
      key: fs.readFileSync('server.key', 'utf8'),
      cert: fs.readFileSync('server.cert', 'utf8')
    }
  }).listen(3000);

From the terminal run

node proxyServer.js

Dimitri Leite · Answer 14 · 2019-11-12T03:56:51.607

I`m using Windows 10 and I had the same issue. I realized that you need to:

Run Command Prompt with Administrator Privileges
Run on the terminal bash this command: set HTTPS=true&&npm start
You can also put this code into your package.json file under the scripts section like this:

"scripts": { "start": "set HTTPS=true&&react-scripts start", (...) }
Bonus: If you want to change the PORT use this command insted:

set HTTPS=true&&set PORT=443&&react-scripts start

Obs.: Pay attention to the blank spaces NOT left in between some characters.

You can browse this link for more detais.

score 3 · Answer 15 · answered Feb 06 '20 at 10:57

Edit your package.json file and change the starting scripts for starting your secures domain. for example https

 {
  "name": "social-login",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-facebook-login": "^4.0.1",
    "react-google-login": "^3.2.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    // update this line "start": "HTTPS=true react-scripts start",
    "start": "set HTTPS=true&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

thanks

score 2 · Answer 16 · answered Oct 14 '19 at 10:25

In Windows environment add following lines to package.json:

  "scripts": {
    "start-dev": "set HTTPS=true&&set PORT=443&&react-scripts start"
  },

It will start development server with https and port 443. At the present moment NodeJs have known bug to run this correctly but it worked with nodeJs v8.11.3 - https://nodejs.org/dist/v8.11.3/node-v8.11.3-x64.msi for me.

Baqer Naqvi · Answer 17 · 2021-06-08T08:08:19.307

2

For Windows, try this one

($env:HTTPS = "true") -and (npm start)

I am using VS Code Terminal (powershell).

edited Jun 08 '21 at 08:08

answered Jun 08 '21 at 07:56

Baqer Naqvi

6,011
3
50
68

1

Thanks, the fastest and easiest solution I was looking for, to test locally – Francesco Orsi Aug 16 '21 at 08:57

score 1 · Answer 18 · edited Jan 19 '19 at 15:29

1

I could not get that to work (setting HTTPS=true), instead, i used

react-https-redirect

A simple wrapper around your App component.

edited Jan 19 '19 at 15:29

Fabiano Tarlao

3,024
33
40

answered Jan 19 '19 at 10:29

PatrickGoethe

35
1
2
6

score 1 · Answer 19 · answered Jan 22 '20 at 04:21

1

I am using Windows 10 latest build with Windows Insider Program till this date.

It seems like there are three cases while using Windows 10:

Windows 10 with CMD command line for your NPM

set HTTPS=true&&npm start

Windows 10 with PowerShell command line for your NPM

set HTTPS=true&&npm start

Windows 10 with Linux Bash command line for your NPM ( My Case was this )

HTTPS=true npm start

Documentation: Create react app dev

answered Jan 22 '20 at 04:21

Anil Prz

1,099
10
14

The token '&&' is not a valid statement separator in this version. + CategoryInfo : ParserError: (:) [], ParentContainsErrorRecordException + FullyQualifiedErrorId : InvalidEndOfLine – Zhivko Zhelev Mar 17 '20 at 18:48

score 1 · Answer 20 · answered Mar 10 '20 at 16:00

To avoid untrusted certificate errors in Chrome and Safari you should manually specify a self-signed key pair. CRA allows you to specify them.

Also, use .env file to store these vars.

On macOS, just add your certificate to Keychain Access and then set Trust Always in its details.

score 1 · Answer 21 · answered Jul 20 '21 at 21:40

Important point about this issue: if you are looking to use https on LAN (rather than localhost) then SSL certification is an issue because the IP is not static!

This is a nice read on the subject where they explore the option of doing it anyway: SSL For Devices in Local Networks

score 1 · Answer 22 · answered Nov 17 '22 at 01:21

1

Open the package.json file and change the start script file like given below.

"start": "react-scripts start",

to

"start": "HTTPS=true react-scripts start",

Restart your localhost and check the terminal you are probably able to see the local and on your network runs by HTTPS.

answered Nov 17 '22 at 01:21

Elavarasan r

1,055
2
12
22

```set HTTPS=true && npm start``` – Ali Yaghoubi Nov 19 '22 at 10:09

score 0 · Answer 23 · answered Jan 07 '19 at 22:30

0

HTTPS=true npm start

in the terminal worked for me on Create-React-App

answered Jan 07 '19 at 22:30

Andy

2,124
1
26
29

2

I get this error : The term 'HTTPS=true' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. – Newton Sheikh Jul 05 '19 at 08:21
1

@NewtonSheikh I get the same error, what is the problem ? – TaouBen Aug 25 '19 at 23:46
@TaouBen from where are you executing? make sure u use cmd and not powershell ... https://stackoverflow.com/questions/56898943/set-https-in-environmental-variable – Newton Sheikh Aug 28 '19 at 12:53

score 0 · Answer 24 · answered Jul 28 '22 at 11:09

0

// add this line to android manifest to use http when releasing apk in react native

<application android:usesCleartextTraffic="true">

answered Jul 28 '22 at 11:09

amit

1

create-react-app: how to use https instead of http?

24 Answers24

Windows (cmd.exe)

Windows (Powershell)

Linux, macOS (Bash)

Custom SSL certificate

Linux, macOS (Bash)

Or

Linked