How to setup dev containers in windows

If you are going to work with dev containers in Windows you need to realize that they will break HMR (hot module reload) and increase build time unless you put your code inside WSL instead of the windows filesystem.

How Dev Containers Work in Windows

Dev containers use Docker, which relies on WSL. When you spin up a dev container, VSCode starts a docker container in WSL, and mounts the files from windows (if they are stored there). This means changes have to cross the WSL-Windows environment. This tends to break HMR, because HMR relies on file change API of the host env, and the filesystem events don't travel well between different host environments.

Correct setup for dev containers in Windows

1. Dev container setup in WSL

• Install Visual Studio Code

• Enable WSL 2 by following the WSL 2 installation guide

• Install Ubuntu (or your preferred Linux distribution) from the Microsoft store

• Install Docker Desktop Stable 2.3.0.2

• Finally enable Docker support in WSL 2 distros.

• Follow all the directions here to finish setup.

2. Clone repo inside the WSL filesystem

Now you should be able to do yarn && yarn dev inside WSL and HMR should work.

Comments

[Kody]

I appreciate the graphic. Very effective for getting the big picture here thank you.