A Guide to Web Development on the Windows Subsystem for Linux (WSL)
This guide assumes you already have the Windows Subsystem for Linux (WSL) 2 installed. If that is not the case, I highly recommend you read through my previous article, A Guide to Installing the Windows Subsystem for Linux (WSL) and Windows Terminal, first. We are going to cover some of the most common web development tools that we need to get up and running, but there might be something missing. If that is the case, please leave a comment below! While I am using my own experience as a foundation, I am happy to amend this article as needed to make sure we cover the most common tools.
Update Linux package repositories
Make sure the Linux packages are up-to-date.
sudo apt update && sudo apt upgrade -y
Make sure Git is installed and up-to-date.
sudo apt install -y git
Sign your commits with GPG
Make sure GPG is installed and up-to-date.
sudo apt install -y gnupg
Generate a GPG key
To use GPG signing with Git, you will need a GPG keypair. If you already have one, you can skip to the next step. This command will prompt you for the settings of your new key. If you do not know what to choose for the key settings, just go with the defaults. The two things you will need to provide are your name and your email.
# generate a new gpg key gpg --full-generate-key
Configure Git to sign commits
This information is based on GitHub's guide. To list and highlight your available signing keys, run the following command.
gpg --list-secret-keys --keyid-format long | grep -A 2 ^sec | grep -A 2 -P "(?<=/)\w+"
Copy the highlighted part of your desired key (on the
sec line after the
/) for the next step. The terminal output should look something like this.
Now you need to tell Git about your signing key and enable commit signing.
# replace `<key>` with the key copied above git config --global user.signingkey <key> # enable commit signing git config --global commit.gpgsign true
GitHub is the most common platform for code hosting, and it is the one I use. That said, this information should be applicable to other platforms as well.
If you prefer to use SSH for GitHub (like me), you can generate a new SSH keypair and copy the public key to your clipboard using a Windows utility called
clip.exe. Run the following commands to generate a new SSH keypair and copy the public key to your clipboard. Make sure you update the fake email below to match your actual email. If you decide to change the name of your generated SSH key, make sure to update the second command with the appropriate file name (
id_ed25519 is the default).
# generate the ssh keypair ssh-keygen -t ed25519 -C firstname.lastname@example.org # copy the public key cat ~/.ssh/id_ed25519.pub | clip.exe
You can then upload your public key to GitHub via your settings page under the SSH keys section.
If you generated a GPG keypair in the Git section above, you can export the public key for use in GitHub or any other provider where you want your commits to show up as verified. Run the following command to copy the public key to your clipboard. Make sure you update the fake email below to match your actual email.
# copy the public key gpg --export --armor email@example.com | clip.exe
You can upload your public key to GitHub via your settings page under the GPG keys section.
Node / NPM
We have a couple of options available for installing Node and NPM. If you need to switch between multiple versions, I highly recommend using NVM. If you just want the latest version available for the Ubuntu distribution of Linux (without an easy method of switching), skip down to the Apt section below.
These instructions were pulled from the NVM README. Feel free to check out the instructions there if you want more details. Otherwise, run the following commands to get set up with the latest version of Node and NPM.
# install nvm (latest version at time of writing) curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash # reload the .bashrc file source ~/.bashrc # install the latest version of node nvm install node
This installs Node from the Ubuntu package repositories. The latest version available through Ubuntu might not be the latest version available through other means.
sudo apt install -y nodejs
Download and install Docker Desktop for Windows. To enable Docker for WSL 2, make sure the Install required Windows components for WSL 2 option is checked. Log out and log back in to finish the installation.
Using a traditional text editor with the WSL will require some extra configuration depending on the one you choose.
Launching Atom from within WSL is not as simple as you might think. The
atom binary needs to be executed in a Windows
cmd context, and it needs the Windows path of the specified directory instead of the Linux path. I created a little helper script to do exactly that. Download it to the
/usr/local/bin directory and make it executable by running the following commands.
# download the atom script sudo curl -o /usr/local/bin/atom https://gist.githubusercontent.com/voraciousdev/1a1473ea36906c8f6830a17701e7fd21/raw/b8c697ca810022f2fc4be9eef3f72a54c6073b7e/atom.sh # make it executable sudo chmod +x /usr/local/bin/atom
atom command can be run from within WSL to open the app on Windows. It is worth mentioning that this does not implement full
atom argument support at the moment. This script only accepts a single, optional path argument for the time being. Here are a few examples of how to use it.
# open the current directory atom . # open another directory atom ~/workspace/project # open atom without specifying a project atom
Download and install VS Code. When you open VS Code for the first time, it will prompt you to install recommended extensions. One of the recommended extensions will be Remote Development. Here are a few examples of how to use the new
code command from the WSL terminal.
# open the current directory code . # open another directory code ~/workspace/project # open vscode without specifying a project code
If you think something is missing from this article, please let me know. I am happy to update it with other common web dev tools. As always, thank you for reading!