Is it possible to enable HMR when app is served through an external server (i.e. php, go, etc)?

[Ldoppea]

Hi,

My team and I are working on some web apps that can work only when served by a web server. We are trying to migrate to Rsbuild (from Webpack) and we are struggling to have a build watch + HMR working when building them in a local environment.

Our environment

Here is how they work on a local dev environment:

• The app contains some code logic with React, a HTML templates as entry point, and a webmanifest file
  • When building the app, the build code is placed inside a /dist folder
• On the dev env, we have a Go server that is configured to serve what is inside of the /dist folder of each of our apps
• In order to open an app, we should navigate to <appname>.our-local-server-url.io
  • Then the dev server will serve the code from the corresponding /dist folder, it will also inject some variables in the index.html file (which is an HTML template)
  • Those variables consist of dynamic assets (i.e. custom CSS files), or some access tokens

Here is an app example: https://github.com/cozy/cozy-web-data-proxy (don't mind the readme, it is not up-to-date yet)
Here is our server project: https://github.com/cozy/cozy-stack

What we tried

Due to this configuration, it seems not to be possible to use the rsbuild dev --open command, as it does not output anything in the /dist folder.

So instead we use rsbuild build --watch in order to build the app in the /dist folder and rebuild it everytime some code changes.

When doing so everything works like a charm, but there are 2 cons:

• first the rebuild steps are a bit slow
• then we don't have HMR

We found that we can speed up the rebuild step by doing rsbuild build --watch --mode development. But when doing so, the apps stop working due to $RefreshSig$ is not defined errors. To make it work, we have to disable fastRefresh in the Rsbuild config (see documentation). Which is not a problem for now as it was not a thing in our initial configuration.

Our question

So here is our question: Would it be possible to have the fastRefresh/HMR feature working with our configuration?

We have seen the createDevServer options but this seems not to be what we are looking for as it seems to be for creating a custom dev server but not for interacting with an existing "content" server?

[9aoy]

Due to this configuration, it seems not to be possible to use the rsbuild dev --open command, as it does not output anything in the /dist folder.

You can set the dev.writeToDisk option to true to enable writing the build output to disk.

https://rsbuild.dev/config/dev/write-to-disk#writing-to-disk

[Ldoppea]

Nice this is exactly what I needed 🎉

By reading your link I'm learning about the dev.client props that allows to configure the url and port that will be used by the web app in order to connect to the dev server. We need also this because our Go server will use another URL + port.

Here is our final configuration:

{
  "dev": {
    "writeToDisk": true,
    "client": {
      "host": "localhost",
      "protocol": "ws",
      "port": "<port>"
    },
  },
}

Note that Chromium browsers won't open any unsecured websocket on localhost (contrary to firefox), so we had to replace localhost by some proxy url.

Thanks for your help @9aoy :)