How to serve https in react?
Unanswered
Virginia's Warbler posted this in #help-forum
Virginia's WarblerOP
This is a snippet of my
After trying all the suggestions in here https://stackoverflow.com/questions/44574399/create-react-app-how-to-use-https-instead-of-http , which turned out to be a bunch of bollocks.
I tried having
and having
and having
Neither worked.
I got
and https://192.168.0.104:3000/ did not work
So, what's the right way of having react served on https?
package.json "scripts": {
"dev": "vite --host",After trying all the suggestions in here https://stackoverflow.com/questions/44574399/create-react-app-how-to-use-https-instead-of-http , which turned out to be a bunch of bollocks.
I tried having
"dev": "vite --host" then run HTTPS=true && npm run devand having
"dev": "set HTTPS=true && vite --host" then run npm run devand having
.env with HTTPS=true then run npm run devNeither worked.
I got
VITE v5.2.11 ready in 118 ms
➜ Local: http://localhost:3000/
➜ Network: http://192.168.0.104:3000/and https://192.168.0.104:3000/ did not work
So, what's the right way of having react served on https?
17 Replies
@Virginia's Warbler This is a snippet of my `package.json`
"scripts": {
"dev": "vite --host",
After trying all the suggestions in here https://stackoverflow.com/questions/44574399/create-react-app-how-to-use-https-instead-of-http , which turned out to be a bunch of bollocks.
I tried having `"dev": "vite --host"` then run `HTTPS=true && npm run dev`
and having `"dev": "set HTTPS=true && vite --host"` then run `npm run dev`
and having `.env` with `HTTPS=true` then run `npm run dev`
Neither worked.
I got
VITE v5.2.11 ready in 118 ms
➜ Local: http://localhost:3000/
➜ Network: http://192.168.0.104:3000/
and https://192.168.0.104:3000/ did not work
**So, what's the right way of having react served on https?**
you can use a service like [ngrok](https://ngrok.com/) or [localtunnel](https://ngrok.com/). It's free to use and you just need to run
ngrok http 3000 to get a https tunnel to your localhost (via ngrok). So pretty easy and fast 👍Asian black bear
Rose-breasted Grosbeak
What exactly do you need it for? Most browsers treat localhost same as https
Asian black bear
Not OP, but a few features such as WebRTC require https if I'm not mistaken.
Rose-breasted Grosbeak
Never used it so I wouldn't know, but local network certainly doesn't work for a lot of things.
seems to be the case again
https://xyproblem.info/
https://xyproblem.info/
Simple, straightforward
Not dependent nor reliant on any external services, works even when you are not on the internet
Rose-breasted Grosbeak
a lot of devices (android 8+) and applications do not allow self signed certifcate
..because it would basically allow MITM ..which I definetely didn't try to do
OP never said they were deploying on android 8+ and I would be quite surprised if they do
When OP don't talk to us, we will never know 🤷♂️
The thread is not even 3 hours old. Give them time
@Rose-breasted Grosbeak What exactly do you need it for? Most browsers treat localhost same as https
Virginia's WarblerOP
WebRTC related. Near was right.
Lets say, I need to test audio, which would be confusing if I do it with a browser tabs on one laptop.
So in that case, I would need a laptop and phone, access what I made by LAN IP@, and also having HTTPS.
Of course there is Ngrok. But Im still curious whether if there is a way to serve https in React?
Lets say, I need to test audio, which would be confusing if I do it with a browser tabs on one laptop.
So in that case, I would need a laptop and phone, access what I made by LAN IP@, and also having HTTPS.
Of course there is Ngrok. But Im still curious whether if there is a way to serve https in React?
serving https is not related to react.
I assume webRTC requires some significant bandwidth? I doubt localtunnel would allow longer connections. In my case it didn't even sustain dev build for more than a couple of minutes, always had to make a prod build.
You can check out their own recommendations: https://webrtc.org/getting-started/testing
or use usb/wifi debugging via chrome://inspect/#devices
I assume webRTC requires some significant bandwidth? I doubt localtunnel would allow longer connections. In my case it didn't even sustain dev build for more than a couple of minutes, always had to make a prod build.
You can check out their own recommendations: https://webrtc.org/getting-started/testing
or use usb/wifi debugging via chrome://inspect/#devices