Windows JS Dev in WSL Redux

Subscribe to my newsletter and never miss my upcoming articles

Back in September I did a post on setting up a JS dev environment in Windows using WSL (Windows Subsystem for Linux). Quite a bit has changed in the past couple months so I think we need to revisit and streamline it a bit. You can now get WSL2 in the Slow ring for insiders and a lot has changed in Microsofts new Terminal app.

So to start, we need to be Windows Insiders for this. You could skip the whole insider thing and use WSL v1, but your going to have a pretty big performance hit and things won't work just right.

So goto Settings -> Updates & Security -> Windows Insider Program. You will want to opt in and select your ring. For us today, the slow ring will get us everything we need.

Alt Text

You may need to run a few updates, what am I saying.. you will run some updates, reboot and maybe some more. The key is you want to be on build 19013. To verify you are on the right build Hit Start, type winver, and then press Enter. The second line in the “About Windows” box tells you which version and build of Windows 10.

Next we need to make sure we turn on 'Windows Subsystem for Linx'. Press the start key and start typing 'Turn Windows Features on or Off'. You should see it appear and select it. A dialog window will appear. You want to turn on 'Virtual Machine Platform' and 'Windows Subsystem for Linux' as you see below.

Alt Text

Next we want to get you the new Windows Terminal from the Store app. Just go in there and search 'Windows Terminal' and you should find it no problem. Install it.

Next we want to open your new terminal up. It will default to Powershell for now. That's fine, we want to run a commands in there for our setup.

Type wsl --set-default-version 2 in your terminal window. This will tell Windows we want any Linux distribution installed to use version 2 of WSL.

Now that we have done that we need to install a Linux distro. I recommend Ubuntu, mainly because I know everything works in it. You want to select the one without a version number (I'll visit why in another post)

Alt Text

To veryify it's installed and we have the WSL2 version we can type wsl -l -v in the terminal and you will get a list of distros you have installed and what version of WSL they are using.

Alt Text

The next piece of software I would like to see installed is Visual Studio Code. This is what I use for my main editor.

Now let's make Ubuntu the default when we open the Terminal App. Open your terminal app and goto settings.

Alt Text

This will open the profiles.json file in code. Here we will make our changes. Every profile has a GUID. We just make sure the one we want as our default is is set at the line "defaultProfile":

Alt Text

Now you can do this with whatever distro you want in the future, but our focus is on Ubuntu.

So now almost everything is installed. We just need to tweak things up a little. First off, I like to use the Zsh shell as my main shell. You by no means are required to use it. If you choose to stick with bash the only step you have is to make it your default shell in the Terminal App. But Zsh has some nice optimizations that I believe improve life a little.

You can install Zsh simply by typing sudo apt install zsh in your Ubuntu Terminal.

Next we are going to run just a couple more commands before we set up our zsh config.

  • We are going to install Oh-My-Zsh which they themselves describe as "Oh My Zsh is a delightful, open source, community-driven framework for managing your Zsh configuration. It comes bundled with thousands of helpful functions, helpers, plugins, themes, and a few things that make you shout... 'Oh My ZSH!'" and to do this you type the following in the terminal.

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

  • We'll add the plugin 'zsh-autosuggestions' this is very handy by using past commands to help you auto fill future ones. The command for install is..

git clone https://github.com/zsh-users/zsh-autosuggestions ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions

  • And finally zsh-nvm will help us keep a current node install and even change versions if needed.

git clone https://github.com/lukechilds/zsh-nvm ~/.oh-my-zsh/custom/plugins/zsh-nvm

Once you have done all of the above commands we will edit our .zshrc. First make sure your in your /home directory by typing cd and pressing enter. Next run nano .zshrc.

First you can change your theme if you want, I have 'bira' selected for myself at this time. You can see some of your options at zshthem.es/all .

Alt Text

Next we want to add the plugins we installed earlier. This is a little further down the config. Just enter them as I have in the picture below.

Alt Text

Once this is done you will press ctrl + o to write the file and ctrl + X to close nano.

Now type source .zshrc to load your plugins and theme.

And now we install the LTS version of node simply by typing nvm install --lts

Let's also make a directory for our future projects by typing mkdir Projects or whatever you would like to call it.

So now you can cd Projects which will put you in that directory. From there we can open that folder with VSCode by typing code . while we are in the working directory of our choice.

You should be able to 'Rock and Roll' at this point. Feel free to reach out with any questions.

WSL is changing pretty quick, along with Windows itself, so this post may go out of date fairly soon. I will try to link the most current version at the top in the future if that is the case.

No Comments Yet