windows node development without installing node — docker vs. wsl

I’m early in my node.js journey and was intrigued to sell how things would go if I were to take a docker-centric approach — besides I didn’t have node.js installed on my workstation. That buoyed “it just works” feeling that had come from other recent experiments with docker had me feeling confident. But it seems WSL gets in the way just a bit. The upside? I might be learning more about Linux along the way!

There are many articles that discuss setting up your development environment to run in docker — mostly espousing it as a solution to the “runs on my machine” problem. Except it didn't run on my machine…very well.

The basic idea is to run a docker container that has a volume mounted containing your source code. Something like this (from windows cmd prompt):

docker run -it --rm -p 3000:3000 -v %cd%:/usr/src/app --name web node:alpine /bin/sh

The command above assumes you are running the command from inside the folder where your code resides (or where you intend it to reside, E.g. after running, say, create-react-app from within the container) hence the %cd%

This starts a container running interactively and provides a shell for running node commands.

And it works. I was able to use npm to install create-react-app, run create-react-app to initialise mounted volume with code, plus I could see and edit from that code from my local windows system. Finally, running the command:

npm start

compiled my new code and started the webserver on port 3000. There was even a web page to view… eventually.

It was slow, very slow, I began to notice this when create-react-app was running. It took a long time to complete with many big pauses in activity along the way.

Then when I edited src/App.js — as instructed by the example page — , it was clear that things didn’t work as expected. Anyone who has experimented with this workflow knows that editing the aforementioned file and saving should trigger a rebuild and refresh of the web page to reflect your changes. This did not occur, no matter how long I waited. Restarting the service, which took a long time, did reflect the changes, so everything was hooked up correctly.

I spent a while expecting to have made some noob mistake but thus far the only solution seems to be running the whole process in the Linux domain, on WSL.

From the Docker website in respect of WSL2:

To get the best out of the file system performance when bind-mounting files, we recommend storing source code and other data that is bind-mounted into Linux containers (i.e., with docker run -v <host-path>:<container-path>) in the Linux file system, rather than the Windows file system. You can also refer to the recommendation from Microsoft.

and

Linux containers only receive file change events (“inotify events”) if the original files are stored in the Linux filesystem. For example, some web development workflows rely on inotify events for automatic reloading when files have changed.

Several other web searches and forum discussions led to the following approach which worked well, and as mentioned earlier, give us a chance to spend more time in WSL with Linux.

1. Start WSL

The docker command used earlier can be reused with a just small change: use $(pwd) rather than %cd%

docker run -it --rm -p 3000:3000 -v $(pwd):/usr/src/app --name web node:alpine /bin/sh

Wait! don't run it just yet! When I run WSL, it starts me out in my user folder in Windows E.g. C:\Users\username (/mnt/c/Users/username) which is exactly where we don't want to be. Go instead to your home directory in WSL, then make a directory to store your code.

cd ~
mkdir react
cd /react

Now run that docker command, the contents of /usr/src/app will have been mapped to the directory you created. From bach change to /usr/src/app

cd /usr/src/app

You can follow your favorite node tutorial and add some content to this directory and start the node server if you like. What I did, since I was trying to get started with React was (all in the bash terminal rooted in /usr/src/app):

install create-react-app

npm install -g create-react-app

then create a react application

create-react-app new-application

run the application

npm start

once the terminal window finished building and starting the development server (a lot faster now) it instructs us to navigate to localhost:3000 where we see the web page.

Now the final test: Edit and reload.

From WSL in the new-application folder. Start VSCode

code .

This will open VSCode operating on the Linux distro you are using with WSL (Ubuntu in my case). From here you can make updates to source files and upon saving, see your browser refresh with the changes.

But wait! where is my code! The WSL file system can be found on Windows at \\wsl$. So open Windows Explorer and navigate to (assuming you are using Ubuntu):

\\wsl$\Ubuntu\home\username

We just need to get used to using this location for our development if we are to follow this approach.

At the time of writing, I’m quite new to many of these concepts and things may change in the future. But for now, this seems to be the approach to take. Hope this helps someone else! Happy coding!