Web Development with Windows Subsystem for Linux

(This was originally posted on ryanlanciaux.com on September 16, 2019. Photo by Daniel von Appen on Unsplash)

My beloved MacBook Pro is currently with Apple Care for some repairs. Unfortunately, I have a lot to do this week and no other computers that are really set up for development. While my computer is in the shop, I'm going to do my normal development work on a Windows desktop I have with Windows Subsystem for Linux v2.

Windows Subsystem for Linux has been out for a bit of time now but a release of 2.0 is around the corner. There are a number of reported improvements but the one I'm most excited about is enhanced speed / performance. While I have yet to really write much code on this computer, WSL 2 seems pretty fast with the repositories I've prepared for the week ahead.

Install WSL 2

There are a number of guides on installing WSL 2 but the ones that I referenced were the official Microsoft Documentation and this post by Thomas Maurer.

These guides are pretty complete but I did get tripped up a little ensuring that all my system updates were complete before attempting to install WSL. Once joining the Windows Insider Program, ensure that System Update has completed and your Windows build version is 18917 (or higher). You can determine your Windows version by running "winver".

Once WSL 2 is installed, go to the Microsoft Store and Download Ubuntu and set the WSL version wsl --set-version Ubuntu 2 from Powershell.

Hopefully, you can run Ubuntu from the start menu but at this point in the installation process I started receiving an error:

The requested operation could not be completed due to a virtual disk system limitation. Virtual hard disk files must be uncompressed and unencrypted and must not be sparse. 

It turns out my Ubuntu directory was being compressed in Windows. Once changing compression settings for this folder, I could run my Ubuntu distro. See this discussion on GitHub for more on that.

Install nvm

nvm is a node version manager. I use it to run different projects with different versions of node. nvm can be installed with the Setup directions from the documentation

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

Install node

Once nvm is installed, node can be installed by typing nvm install v# - I installed node v11 as the default. You can specify a default by typing nvm alias default v11

Install yarn

I generally use yarn, rather than the npm cli for node dependency management. To install yarn, follow the directions from the project's setup guide:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

Yarn should be installed on your Distro now right? For me, not so much. Once I navigated to a project and ran yarn install, I was greeted with a nice error message:

00h00m00s 0/0: : ERROR: There are no scenarios; must have at least one.

Upon some research, I stumbled upon a thread on GitHub where others were encountering this same issue.

It turns out that there's another yarn that's installed through cmdtest. Removing cmdtest (sudo apt remove cmdtest) followed by the standard yarn install instructions should work. It should be noted that after bumping into this error and resolution I noticed that the install instructions note that Ubuntu 17.04 and above could encounter this scenario and I didn't catch it 🤦‍♂️.

VS Code

If you don't have Visual Studio Code, you should install it and the Remote - WSL Plugin

This plugin lets you type code . in your Ubuntu terminal and open up the project in Code in Windows (although, you could always use vim)

Install zsh and set as your default shell (optional)

I use zsh as my default shell along with oh-my-zsh. Install instructions can be found here:

• zsh install instructions
• oh-my-zsh install instructions

Windows Terminal

Windows terminal is a new terminal client for running multiple shell applications (Powershell, WSL, cmd, etc). I'm mostly using it for WSL but it's nice that you can launch a Powershell / cmd tab as well. Windows Terminal is available in the Microsoft Store.

By default, Powershell was my default command line application. To change this to WSL open the settings and change the defaultProfile property to match the guid property for your WSL distro. For example:

{
  ..
  "defaultProfile": "{2c4de342-38b7-51cf-b940-2309a097f518}",
  "profiles": [
    ...,
    {
      "acrylicOpacity": 0.5,
      "closeOnExit": true,
      "colorScheme": "Solarized Dark",
      "commandline": "ubuntu",
      "cursorColor": "#FFFFFF",
      "cursorShape": "bar",
      "fontFace": "Consolas",
      "fontSize": 10,
      "guid": "{2c4de342-38b7-51cf-b940-2309a097f518}",
      "historySize": 9001,
      "icon": "ms-appx:///ProfileIcons/{9acb9455-ca41-5af7-950f-6bca1bc9722f}.png",
      "name": "Ubuntu",
      "padding": "0, 0, 0, 0",
      "snapOnInput": true,
      "startingDirectory": "~/",
      "useAcrylic": false
    },  
}

The default profile matches the guid for my Ubuntu profile. One other thing of note, I changed my commandline property to ubuntu rather than the default to load in my home directory (there is quite possibly a better way to do that).

Reference web applications by IP Address instead of localhost

The WSL documentation mentions this but thought it would be good to call out here as well. You currently need to access your applications by IP address rather than localhost.

ip addr | grep eth0

This should get the IP address that you can use to reference your application.

Wrapping Up

That's it for now - while I am looking forward to having my standard development machine back, I am excited to try WSL 2 for the next couple of days.

Update:

After about a week of use, I'm very impressed with the experience of WSL 2. While my computer was in the shop, I was able to successfully get my work done on Windows.

Comments

[Yash Dave]

I am currently on WSL, haven't tried going to the insiders build for WSL2 yet due to some college work that I can't risk using. Have you tried out running any testing frameworks like Capybara? Currently figuring out how to run it on mine with little to no success in making chrome behave with WSL XD

[Jake Langford]

I know this is a different test framework but I was able to get Chrome (and Chromium, which works better) working in the WSL for Cypress tests using info from this issue on GH

Maybe it'll be of help to you.

I use X410 as my display server, but Xming works just as well.

[Yash Dave]

Sounds interesting, I think that might be what I have to try out too since even though I pass --disable-gpu to chrome headless, it tries to use GPU hardware acceleration and ends up crashing.

[Ryan Lanciaux]

I have not tried this. Sounds like it could be challenging.

[Rubin]

About yarn. Why don't u install it via npm instead of the Ubuntu package

[Ryan Lanciaux]

I have installed yarn via npm a couple machines back BUT it sounds like they recommend against that:

From the yarn docs:

Note: Installation of Yarn via npm is generally not recommended. When installing Yarn with Node-based package managers, the package is not signed, and the only integrity check performed is a basic SHA1 hash, which is a security risk when installing system-wide apps.

For these reasons, it is highly recommended that you install Yarn through the installation method best suited to your operating system.

Generally on my Mac, I install via Homebrew now and Linux as described here 🚀

[Duy K. Bui]

On build 18990, you can now skip the IP and point your Internet Explorer (I hope you're using Edge C instead) at localhost:8080

[Alan Redzepagic]

Would not be easier for MS just to create its own Linux distro?