Max Phillips

Web Developer & Arts Student with interest in DevOps

(Guide) Setting up Windows for Web Development

A (slightly outdated) guide for setting up a development environment on Windows 10 using WSL & Docker

Published 23 Mar 21
Windows

Since this is my first post here I’m gonna say this real quick: Welcome to my blog! 😀

So let’s get into it, with the recent release of Windows 2004 came WSL 2. This is the latest update of the Windows 10 Windows Subsystem for Linux (WSL) that lets you run a Linux kernel inside of Windows, with all the benefits of a Unix filesystem, bash (or other) shell, and now with native Docker Desktop integration.

In this guide we will:

  1. Install WSL 2 with the latest LTS of Ubuntu
  2. Install Docker Desktop, VS Code, and Hyper.js for a nicer terminal
  3. Setup the above to work with WSL 2, and install Git for Windows to sync credentials between Windows and WSL
  4. Finally, we will make some quality of life changes such as install Zsh, Oh-My-Zsh, and the Powerlevel10k theme and font. We will also add some handy developer tools to our environment.

Let the installing begin! 🎶

Configure Windows to Support WSL, Docker and Prevent Future Incompatibilities

First we will need to setup our copy of Windows for running WSL 2.

  1. Search for the ”Turn Windows Features On or Off” option in the start menu.
  2. Turn on the Windows Subsystem for Linux checkbox and the Virtual Machine Platform checkbox.
  3. (Optional unless you are also plan on using the Android SDK emulator) If you are using the AndroidSDK emulator, then Docker’s use of Hyper-V may conflict with the emulator. We can get around this by also turning on the checkbox for the Windows Hypervisor Platform, which AndroidSDK can use instead. You can now run Docker, Android Studio and other virtualization software together without too much hassle.

Click OK and restart when prompted! When ready run the following as Administrator in Powershell.

wsl --set-default-version 2

Install WSL

Now we are ready to install a Linux flavor of our choice (We will be using Ubuntu).

  1. Search for Linux in the Microsoft Store and you should see a list of distros. A more complete list can be found here.
  2. Install a distro of your choice (I use Ubuntu 20.04 LTS)
  3. Search for Ubuntu or the name of your distro inside Windows and open it. It will prompt you to create a user (who will have sudo permissions) and create a password.

Once done, WSL is installed! You can confirm this by opening up your Powershell again and entering the following command to list different installed distros.

wsl --list --verbose

You can also install more than one distro if you want, although that is outside the scope of this guide.

(Alternative) Install WSL to Non-C Drive

If you don’t want to waste your precious system drive storage you can always install WSL to your D, E, or any other drive. After configuring Windows as described above, open Powershell as Administrator and run the following commands, replacing E:\ with your target drive letter.

First lets create a directory for our installation and move into it.

New-Item E:\Ubuntu -ItemType Directory Set-Location E:\Ubuntu

Now lets download our WSL version (In this case Ubuntu 20.04) from Microsoft

Invoke-WebRequest -Uri https://aka.ms/wsl-ubuntu-2004 -OutFile Ubuntu.appx -UseBasicParsing

We'll change the extension and unzip it...

Rename-Item .\Ubuntu.appx Ubuntu.zip Expand-Archive .\Ubuntu.zip -Verbose

Now open that folder in Explorer and run the Ubuntu .exe file to install WSL!

Housekeeping for Our WSL Install

Before we continue lets real quick do the usual pleasantries. Open up a new terminal window from the newly installed Ubuntu app, and enter the following.

sudo apt update && sudo apt upgrade -y

Docker Desktop 🐳, VS Code 👩‍💻, and Hyper.js ✨

Now that our WSL 2 installation is ready, lets add some other tools of the trade.

Containerize all the Things!

Lets get Docker installed first.

  1. Download Docker Desktop from here.
  2. After installing, go to Settings>General and check the Use the WSL 2 based Engine box if its not already checked.
  3. Then, go to Settings>Resources>WSL Integration and enable integration with default distro, which you can also check the box for below if it isn’t already.
  4. If you reopen your Ubuntu terminal window, you can now try running the docker command which should automatically setup docker on the WSL 2 side.

Later on we will add support for the WSL 2 backend to use BuildKit which will let it access all our cores, however we need to export this from our .zshrc. If you plan on skipping Zsh and sticking to Bash, then check here for how to setup BuildKit and for other best practices with Docker and WSL 2.

Enter Visual Studio Code…

Now let’s setup our text editor, Visual Studio Code!

VS Code now also has WSL integration through the miracle of extension, so lets get that going.

  1. Download VS Code for Windows from here.
  2. Install the Remote - WSL extension from Microsoft.

That’s it! Just run the code . command from anywhere in your WSL filesystem to open it with VS Code. The first time you do this it might also need to install the VS Code server on WSL, which will happen automatically.

While we’re here, lets also setup Git so we can have consistent line endings and credentials between WSL and Windows.

First, install Git for Windows from here. Make sure to use the second option for line ending conversions in the installer. The rest can be defaults.

Then, run the following in Powershell to tell Git for Windows to use win-cred

git config --global credential.helper wincred

Once that’s done, run the below lines in your WSL terminal.

# Tell WSL's version of Git to use unix line ending conversions as well git config --global core.autocrlf input # Tell WSL to use win-cred git config --global credential.helper "/mnt/c/Program\ Files/Git/mingw64/libexec/git-core/git-credential-wincred.exe"

Hyper.js

That’s enough yucky terminals for one day, lets install a beautiful one.

  1. Download and install Hyper.js from here.
  2. Download and install the Meslo Nerd Font from here using the manual install process.
  3. Open up your Hyper config file using a text editor (👀 VS Code? 👀).Set fontSize to 14, and add "MesloLGS NF" to the front of the fontFamily string value.
  4. Set the shell key to point at WSL instead of cmd. shell: 'C:\\Windows\\System32\\wsl.exe'
  5. Configure the rest to your liking and reload your Hyper window.

Almost Done, I promise 😴

By this point we’ve got all the essentials in place, so let’s spice things up with a nicer shell. I like the Zsh shell with the Powerlevel10k prompt, which we will install with Zsh. We will then add a line to our .zshrc script so that Docker’s WSL backend can make the most of our cores.

Install Zsh and set as default shell

sudo apt install zsh -y chsh -s /bin/zsh

Now restart your shell

Install Oh-My-Zsh 🙃

sh -c "$(wget -O- https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Restart the shell again

Install the Powerlevel10k prompt and follow the on-screen instructions.

All icons during install should look normal, if not check that the Meslo font installed correctly.

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/themes/powerlevel10k

Now lets tell Docker's backend to use BuildKit so it can get those lovely CPU cores when building images.

echo 'export DOCKER_BUILDKIT=1' >> ~/.zshrc

We’re Done! 🎉

If all that went well then congrats! You now have a powerful developer environment with the benefits of both Linux, Windows, Git, and Docker all rolled into one nice and fast package. You can customize this to your liking and I recommend looking into some of the great themes available for Hyper.js and extensions for Oh-My-Zsh.