The Problem

Are you facing frustrating issues with hot reload not working in your development environment while using Visual Studio Code (VS Code) dev containers on Windows?

You may encounter this problem especially when working with frameworks like Angular, React, Storybook, or Nx Monorepos.

The culprit is often caused by mounted paths in Windows Subsystem for Linux 2 (WSL2).

By following these steps, you'll find that hot reload functionality is restored, enabling a smoother development experience. Now, changes to your codebase will be immediately reflected in your running application, eliminating the need for manual refreshes and enhancing productivity.

So, if you've been grappling with hot reload problems in your VS Code dev containers on Windows, give this solution a try. You'll be back to coding with confidence in no time.

The Cause

The problem stems from WSL2's behaviour with mounted drives. When files are changed within these mounted paths, neither the host operating system nor the container operating system is notified of these changes.

Consequently, tools relying on file system monitoring, such as Webpack and Vite, fail to trigger hot reload, hampering the development experience.

The Solution

There's a straightforward workaround to address this issue and restore hot reload functionality to your development workflow. You must copy Your Repository to WSL2's file system. This has serval advantages including speed improvements for file operations including NPM/Yarn installs but crucially the filesystem monitors changes of any files outside of /mnt/.

Step 1: Use the WSL Home Directory:

Open WSL and make a repos directory under the home folder. Clone your repo into it.

Alternatively you can copy it from the Windows filesystem

 bash
$ cp -r /mnt/c/.../your-repo ~/repos/your-repo

This command will recursively duplicate the directory from your Windows filesystem (/mnt/c/.../your-repo) to the ~/repos directory within WSL. Ensure to replace /mnt/c/.../your-repo with the actual path to your directory on Windows.

Step 2: Link VS Code with WSL:

Now that your code is situated within WSL2, you can utilize VS Code's Remoting extension to establish a connection to the WSL Linux environment. This enables you to edit your code using VS Code while operating within WSL2. You can locate this feature in VS Code's command palette as follows:

Step 3: Open your Code Folder

Under the file menu select open folder and you will be given an opportunity to open a path inside of your WSL container like so:

Take a note of the shortcut for this, which is in my case ctrl + k, ctrl + o. You can also use this to speed up your workflow.

Now enter the WSL path to your code

Step 4: Open Solution in Docker

Once connected to WSL, open your solution in a dev container as you normally would. I like to use visual studio code's prompt:

Alternatively if you don't see this you can click the remoting button in the bottom right of VS Code:

Then select the "Reopen in container" option in the resulting dropdown:

By now your development environment should be running within Docker and WSL2. Docker will now mount directly to a the volume from within the WSL file system as opposed to a mounted folder that is also mounted from WSL to the Host.

Not only does this fix Hot Module Reload (HMR) issues but the filesystem will be noticeably faster. This means quicker NPM/YARN installs and, in most cases, faster builds too! 🥳

Still Having To Refresh The Browser?

Okay so there's another related issue where the browser needs to be refreshed manually. This is due to the fact that the client page cannot connect to the server via a web socket. This web socket instructs the page to refresh when HMR changes are detected.

This can be resolved by adding

 hmr: {host: '127.0.0.1'},

to the vite server config like so:

 javascript
  server: {
    port: 4200,
    host: 'localhost',
    hmr: {host: '127.0.0.1'},
  },

Hopefully this solves your teething problems with development containers on Windows. I think they're a really great option for providing a solid pre-configured environment for your project contributors.

If you need any further assistance then please don't hesitate to reach out to me via LinkedIn:

https://www.linkedin.com/in/simplifycomplexity/