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.
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:
"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
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.
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"
},
HTTPS=true && npm start
won't work.Refer it in official doc. Using HTTPS in Development
(Note: the lack of whitespace is intentional.)
set HTTPS=true&&npm start
(Note: the lack of whitespace is intentional.)
($env:HTTPS = "true") -and (npm start)
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.
HTTPS=true SSL_CRT_FILE=<SSLCert.crt> SSL_KEY_FILE=<SSLCert.key> npm start
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
请在命令提示符中使用它
set HTTPS=true&&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:
"scripts": {
"start": "set HTTPS=true&&set PORT=443&&react-scripts start",
........
}
In case you need to change the port and set it to https.
might need to Install self-signed CA chain on both server and browser. Difference between self-signed CA and self-signed certificate
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
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
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:
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.
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
HTTPS=true npm start
在终端为我工作的 Create-React-App
I could not get that to work (setting HTTPS=true), instead, i used
react-https-redirect
A simple wrapper around your App
component.
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.
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:
set HTTPS=true&&npm start
set HTTPS=true&&npm start
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.
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.
For Windows, try this one
($env:HTTPS = "true") -and (npm start)
I am using VS Code Terminal (powershell).
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
添加到文件 .env(或 .env.local)行:HTTPS=true
// add this line to android manifest to use http when releasing apk in react native
<application android:usesCleartextTraffic="true">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.