Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Howto re-route webpack hot reload client?

I have an application created with create-react-app and typescript. This application is an oauth2 client, and it needs a valid redirect_uri with https. It also uses websockets. I could setup an nginx server that accepts https and wss connections, and forwards them to my development machine.

This is how it should work:

web browser –> https and wss request –> nginx –> ssh tunnel (remoteforward) –> development machine –> local webpack and local application server

Nginx maps all https requests to localhost:3000 and all wss requests (anything under /api) to localhost:9091. These are forwarded to the local development machine via ssh tunnels. The local dev machine runs webpack on port 3000 and an appserver on port 9091.

This allows me to develop a valid web based oauth2 client, with valid https certificates and redirect_uri values. This setup was working for a long time. Today I have updated all packages (including node js, create-react app and webpack), and it stopped working. Here is the trace log:

SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
./node_modules/react-dev-utils/webpackHotDevClient.js
node_modules/react-dev-utils/webpackHotDevClient.js:60
__webpack_require__
/home/my_user/projects/my_project/frontend/webpack/bootstrap:785

Of course, the problem is that webpack uses websockets for hot reload notifications, and the default code assumes that the webpack server is available at ws://localost. In reality, the page was loaded with https. So the hot reloading code tries to create an insecure websocket to ws://localhost, from a page that was loaded with https.

Since the oauth2 client MUST use https, the obvious solution would be to turn off hot reloading completely. But that would slow down the development. To work efficiently, I need hot reloading. This would only work if I could also forward the websocket of the hot reloading client from nginx to my local webpack server. In other words: make it work through wss:// instead of ws://.

However, I do not know how to do this. Is it even possible to re-route the hot reload client? Is there an option for that? I can see that it is possible to turn off hot reloading. But I do not see any way to re-route the URL for the websocket.

UPDATE – this is not needed anymore, solved in v3.3.1 https://github.com/facebook/create-react-app/pull/8079 . But there are still packages that depend on an older version. In those cases, the solution provided below may be used.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have found a solution. It is really a hack, but it can be used for testing oauth2 clients with https, your own websockets and webpack dev server's own socks-node websocket at the same time.

    1. Install all required packages
    2. Edit your node_modules/react-dev-utils/webpackHotDevClient.js file

    Replace this:

    // Connect to WebpackDevServer via a socket.
var connection = new WebSocket(
  url.format({
    protocol: 'ws',
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
  })
);

    With this:

    // Connect to WebpackDevServer via a socket.
var connection = new WebSocket(
  url.format({
    protocol: 'wss',
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
  })
);

    This will force nodejs-socket to use wss instead of ws. If the nodejs-socket is also tunneled through your web server to your local webpack dev server, then it works!

    It would be great if this code could use ws / wss depending on the protocol of window.location.


  2. 0

    Since create-react-app 3.4.0 released only couple weeks after your post, you can now precise these environment variables:

    • WDS_SOCKET_HOST
    • WDS_SOCKET_PORT
    • WDS_SOCKET_PATH

    Check this commit for more details: create-react-app#822422c

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search