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

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.

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.

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

        "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

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.

#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

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.

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

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

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

Please use this in command prompt

 set HTTPS=true&&npm start

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

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

might need to Install self-signed CA chain on both server and browser. https://stackoverflow.com/questions/4024393/difference-between-self-signed-ca-and-self-signed-certificate

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

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.

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

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.

For Windows, try this one

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

I am using VS Code Terminal (powershell).

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

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

> react-https-redirect

A simple wrapper around your App component.

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

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.

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

HTTPS=true npm start

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