create-react-app：如何使用 https 而不是 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 .

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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 ie, HTTPS=true && npm start won't work.

Refer it in official doc. Using HTTPS in Development

(Note: the lack of whitespace is intentional.)

Answer 6

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

Answer 7

请在命令提示符中使用它

 set HTTPS=true&&npm start

Answer 8

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:

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

Answer 9

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

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

Answer 10

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

Answer 11

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 export ing:

su
npm start

Answer 12

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

Answer 13

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

1. Run Command Prompt with Administrator Privileges
2. Run on the terminal bash this command: set HTTPS=true&&npm start

3. 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", (...) }

4. 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.

Answer 14

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

Answer 15

HTTPS=true npm start

在终端为我工作的 Create-React-App

Answer 16

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

react-https-redirect

A simple wrapper around your App component.

Answer 17

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.

Answer 18

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:

1. Windows 10 with CMD command line for your NPM

set HTTPS=true&&npm start

2. Windows 10 with PowerShell command line for your NPM

set HTTPS=true&&npm start

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

HTTPS=true npm start

Documentation: Create react app dev

Answer 19

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.

Answer 20

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.

Answer 21

For Windows, try this one

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

I am using VS Code Terminal (powershell).

Answer 22

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

Answer 23

添加到文件 .env（或 .env.local）行：HTTPS=true

Answer 24

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

<application android:usesCleartextTraffic="true">