DEV Community

rubenofen
rubenofen

Posted on • Edited on

2

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.

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay