Hot Reloading Issues with MFEs After Switching to Rancher Desktop

[AmyJoMerrill (Amy)]

Hi Open edX Community,

We recently transitioned from Docker Desktop to Rancher Desktop for our Tutor LMS setup, and since then, hot reloading for our MFEs has stopped working. Code changes no longer reflect in the browser unless we stop and restart the development server.

Details:

• Setup: Open edX Tutor LMS (latest version), Rancher Desktop with [container runtime, e.g., containerd/Docker].
• MFEs: Mounted as volumes, same configuration as Docker Desktop.
• Issue: Hot reloading worked fine with Docker Desktop, but now only restarting the server reflects changes.

Tried So Far:

• Verified volume mounts and file permissions.
• Ensured file-watching mechanisms are enabled.
• Restarted services and reconfigured the setup.

Questions:

1. Has anyone faced similar hot reloading issues with Rancher Desktop?
2. Are additional configurations needed for file synchronization or inotify events?
3. Could this be due to how Rancher Desktop handles volume mounts differently from Docker Desktop?

Any insights or suggestions are greatly appreciated. Let me know if further details or logs would help.

Thanks in advance!

[regis (Régis Behmo)]

Could this be due to how Rancher Desktop handles volume mounts differently from Docker Desktop?

Almost certainly that. I don’t think there’s any reason for nodejs development servers not to reload when files change. Did you exec into the running containers to check whether the modified files were actually changed in the containers? If not, then it means that the bind-mounts are not working.

[wwohlgemuth]

I was seeing changed files in the containers but they weren’t reflected in the browser.

This fixed it: enable the built-in environment variable in .env.development that webpack recognizes:

WATCHPACK_POLLING=true

Docker worked without this being explicitly set. Rancher apparently needs it.

Also explicitly configuring hot reloading and watchOptions in our webpack.dev-tutor.config.js file in each MFE:

module.exports = {
    devServer: {
      hot: true, 
      liveReload: true,
      watchFiles: ['src/**/*'], 
      watchOptions: {
        poll: 500, // Check for changes every .5 seconds second
        ignored: /node_modules/, // Avoid watching huge folders
      },
      overlay: false, // Prevents refresh from waiting for user interaction
    },
  };