DEV Community

loading...

react-create-app devel server + subdomain + https

rubenofen profile image rubenofen ・Updated on ・2 min read

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.

Discussion

pic
Editor guide