Get the best performance out of Development Containers on Windows …or… Troubleshoot Hot Module Reloading (HMR) not working on a NextJS or REACT Project running on a Development Container on Windows
The purpose of this document is to describe how to get the best performance out of a Development Container on Windows or how to troubleshoot the Hot Module Reloading (HMR) not working on a NextJS or REACT Project running on a Development Container on Windows.
Introduction
If you have been dabbling in creating development containers for some of your projects, and you use either create-react-app , vite or create-next-app and your development computer is a Windows computer, you might notice that the Hot Module Reloading feature either doesn’t work at all, or runs very slowly. The reason for this is because of the different file systems that Windows and Linux use. While you are developing on a Linux container, the differences between the host computer and the container can cause a bottleneck or unexpected behavior. The best way to resolve this is to use Windows Subsystem of Linux that is available on Windows 10 and above.
Install a Windows Subsystem Linux (WSL) Distribution
One of the easiest ways to install a WSL Distribution is to open the Microsoft Store, and search for “Ubuntu” and then click on the “Get” button for the version of your choice.
Upgrade your Distribution to WSL2 (If applicable)
Check the version of WSL that your Distribution is using by executing the following command:
wsl.exe --set-version (distro name) 2
wsl.exe --set-default-version 2
wsl --set-default (distro name)
Enable Integration in Docker Desktop
In your docker desktop go to Settings, and then Select Resources and WSL Integration. Ensure that the check box for Enable integration with my default WSL distro is checked.
Bring your project in to your WSL distro, and then run the development container there.
With all of this in place you now have a Linux Distribution running on your windows computer. In a way this WSL container has its own virtual hard drive. You can interact with it by going to \\wsl$\ in windows explorer and you can access the files on your distribution from there.
Another way to get the project files in to your WSL Distribution is to use Linux commands in your Distribution. To access the Linux shell of your WSL either open a command prompt and type “wsl”, or if you have the Windows terminal installed, then it will appear as it’s own tab that you can open here.
If your project is on GitHub you can also use the git clone commands within the Linux shell as well.
While yes, you can use the project files within the /mnt/c drive, you will probably still experience some unexpected behavior. So, getting the files within the distribution is where you will get the most performance bang for your buck.
Install the necessary dependencies on to your Distribution (if applicable)
Usually, your dependencies will be in your development container. However, depending on your situation you may need to install dependencies on to your distribution, as your distribution is now the “host” machine.
A common dependency is nodejs. Below are the steps that you could take to install NodeJS in your WSL.
While you’re still in the Linux shell execute the following command:
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
source ~/.bashrc
nvm install --lts
nvm install 18.16.0
Launch Visual Studio Code from within your WSL
With the way you have everything setup you should have “code” as an executable within your path. To confirm, execute the following command and confirm that you have a path to VS Code/bin in your path:
printenv
You will even see it in your docker desktop.
You should be able to change directories to the project folder and run your dev command such as “npm run dev”, or whatever is appropriate for your project.
You should now notice that the HMR works like you expect.
Example: Create a new Vite + React App
Up to this point we have been discussing how to import an existing project. Let’s talk about starting a new project. After you have the WSL2 Distro installed and ready to go, you can begin to build more applications that use development containers. Here are the steps to create a new Vite + React App using WSL2.
Get in to your Linux shell (either by type wsl in a command prompt, or selecting the tab through the Terminal as mentioned earlier).
Change directories to the place that you would like to store your project files. For this example we are just going to use our home directory (~/), and then create a new directory that labels your project. In this example we will use “my-new-app”. Change directories in to “my-new-app” and execute “code .”
This will create a new .devcontainer/devcontianer.json file for you.
When prompted select the Reopen in Container option.
Do a CTRL+SHIFT+` to bring up a terminal for the development container.
Execute the following command:
npm create vite@latest
You should get a notice like this, go ahead and open in Browser.
<p>
Hello World! Edit <code>src/App.tsx</code> and save to test HMR
</p>
Conclusion
Development Containers are great. If you are using Windows, then it is helpful to know that they run best under Windows Subsystem Linux (WSL2). Having the host computer, and the container using the same file system improves performance and the overall developer experience.
About Black Slate
Black Slate is a Software Development Consulting Firm that provides single and multiple turnkey software development teams, available on your schedule and configured to achieve success as defined by your requirements independently or in co-development with your team. Black Slate teams combine proven full-stack, DevOps, Agile-experienced lead consultants with Delivery Management, User Experience, Software Development, and QA experts in Business Process Automation (BPA), Microservices, Client- and Server-Side Web Frameworks of multiple technologies, Custom Portal and Dashboard development, Cloud Integration and Migration (Azure and AWS), and so much more. Each Black Slate employee leads with the soft skills necessary to explain complex concepts to stakeholders and team members alike and makes your business more efficient, your data more valuable, and your team better. In addition, Black Slate is a trusted partner of more than 4000 satisfied customers and has a 99.70% “would recommend” rating.