pmmmwh / react-refresh-webpack-plugin

A Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components.
MIT License
3.15k stars 193 forks source link

Can I use a custom domain and SSL cert for the cable URL? #773

Closed jasonfb closed 1 year ago

jasonfb commented 1 year ago

so I’m trying to do this non-standard thing with Shakapacker + react_on_rails: I need to develop locally at a self-signed certificate on https, like https://abc.localhost:3000/ with a self-signed certificate for abc.localhost. This setup works when I complete a few self-signed certificate steps, which I have outlined here in this post. However, when I boot up my Shakapacker/react_on_rails environment, I get an error WebSocketClient.js:13 WebSocket connection to ‘wss://localhost:3035/ws’ failed: that appears to be coming from react-refresh-webpack-plugin. Is there a way I can tell react-refresh-webpack-plugin to be using my special domain?

see Stack overflow post + example app

note that as you see here, the Shakapacker hello world app does load-- I think the problem is only that the the websocket domain is wrong

(https://github.com/jasonfb/TestShakapackerSSL/tree/main). testshakapackeronssl-1

DevTools - abc localhost:3000: 2023-09-16 08-31-02 DevTools - abc localhost:3000: 2023-09-16 08-41-20

Notice that in the Procfile.dev puma boots SSL like this: https://github.com/jasonfb/TestShakapackerSSL/blob/main/Procfile.dev#L3


As a follow-up question, assuming I can get the correct domain name, how do I tell react-refresh-webpack-plugin to accept connections on SSL/TLS protocol (using the certs in the config/ssl/ folder)

jasonfb commented 1 year ago

this was written before I had put any settings in config/webpack/webpack.config.js see for updated https://stackoverflow.com/questions/77145797/webpacker-wont-seem-to-boot-on-an-https-port

I think once i had put in this:

const baseConfig = require(pathToConfig);

    baseConfig.devServer = baseConfig.devServer || {};
    baseConfig.devServer.port = 3035;
    baseConfig.devServer.https = {
      key: path.resolve(__dirname, '../../config/ssl/abc.localhost.key'),
      cert: path.resolve(__dirname, '../../config/ssl/abc.localhost.crt'),
    };

    baseConfig.output.publicPath = 'https://abc.localhost:3035/';

then the wss errors went away