DEV Community 👩‍💻👨‍💻

rubenofen
rubenofen

Posted on • Updated on

react-create-app devel server + subdomain + https

Hello everyone,

I'm trying to do a https request from a create-react-app to get a login cookie.
To do this I have to be in the same subdomain of these call, thus I have added to my .env file:

.env

HOST=local.www.subdomain.org

Due to the call is https I have changed my package.json (I have to work in windows 😥)

package.json

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

EDIT: If you add HTTPS=true in .env file it will work too

If I call to https://localhost:3000
It is givig me an error in console, but the app is working:

webpackHotDevClient.js:60 WebSocket connection to 'ws://localhost:3000/sockjs-node' failed: Connection closed before receiving a handshake response
./node_modules/react-dev-utils/webpackHotDevClient.js   @   webpackHotDevClient.js:60
__webpack_require__ @   bootstrap:785
fn  @   bootstrap:150
1   @   index.js:3
__webpack_require__ @   bootstrap:785
checkDeferredModules    @   bootstrap:45
webpackJsonpCallback    @   bootstrap:32
(anonymous) @   main.chunk.js:1

When I try to call https://local.www.subdomain.org:3000

It is givign mi an error but the app is not launched:

SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

Someone knows what is the reason for this error.

Thank you

EDIT: I found the solution of that in https://github.com/facebook/create-react-app/pull/8079#issuecomment-562373869. The reason is because in react-scripts if https protocol is being used we should use WebSockets over SSL/TLS (WSS) protocol instead of WebSockets (WS) To solve you have to update the react-script version from 3.3.0 to 3.x.x or do a downgrade to 3.2.0.

Top comments (0)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!