How to Set Up Windows 11 as a Development Environment with WSL

MicrosoftLinuxWeb Development

Saturday, February 17, 2024

You have a fresh Windows 11 installation and want to start coding. Where should you start? I have my thoughts on what works best (at least for me). This post will show you how to begin developing in a Linux environment without ever leaving Windows 11. I will explain everything and even have a video to show you, too. The video is "low budget," but it's there if you prefer or need it. So, let's get started.

What Should I Do First?

This post will show you how to:

  • Install WSL with Ubuntu
  • How to configure Windows Terminal
  • How to install Zsh (Z shell)
  • How to add aliases in Zsh
  • How to install Oh My Zsh
  • How to install NVM and the LTS version of NodeJS
  • How to install Bun (a NodeJS alternative)
  • How to create SSH keys to use with Git and GitHub
  • How to install Nerd Fonts and use them in VS Code & Windows Terminal

This might seem like too many steps, and if this is your first time setting something up like this, it will feel that way. Many of these steps are unnecessary but "nice to have."

Do you know what else is not necessary but nice to have? This video...

How Do I Install Ubuntu Using WSL?

With modern Windows 11, using WSL and installing Ubuntu couldn't be easier. All that is required is that you:

  1. Open PowerShell
  2. Enter one command (below)
  3. Wait

Here's the command to run in PowerShell:

1wsl --install

It seems too easy. I know. You will be able to monitor the installation progress.

Installing Virtual Machine Platform Windows Subsystem for Linux

After this is completed, you will need to restart your PC. When you log back in, you will need to setup your UNIX username and password.

Enter new UNIX username

Enter whatever works for you. I ended up using the same password in Ubuntu that I use for my PC. Once your account is set up, you will be brought right to your home directory in the BASH shell.

How Do I Configure Windows Terminal for WSL?

I rarely use PowerShell. When I launch Windows Terminal, I almost always am looking to use Ubuntu. Up next, we will see how to set Ubuntu as your default terminal. Let's open up Windows Terminal settings by clicking the down-pointing chevron next to the plus icon.

how to access Microsoft terminal settings

Under the Startup options, find the Default profile and select Ubuntu. Yes, there's more than one. Pick whichever you like more.

windows terminal default profile settings

After this is setup, take a moment to make some "quality of life" adjustments to your new default profile. Select it in the left side menu, and you can adjust the settings for that specific profile. I like to adjust the font size. And if you have a Nerd font, you can select it here too.

Settings for a profile in Windows Terminal

Before we proceed, let's take a moment to update Ubuntu with the following command:

1sudo apt update && sudo apt upgrade

How Do I Add Zsh to Ubuntu?

Here's another simple addition to Ubuntu thanks to its package manager "apt." Run the following command, and you will have Zsh as an available shell. It won't be your default shell unless you want it to be. You will have the option to pick in our next step. Here's the command:

1sudo apt install zsh

How Do I Enhance Zsh with Oh-My-Zsh in Ubuntu?

Feel free to search on your favorite search engine or go to https://ohmyz.sh. Copy your preferred command. I use cURL, but Wget is an available option as well. Add it to your terminal and run it:

1sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

During installation, you will be asked if you'd like to have Zsh be your default shell. I selected yes, of course. Now that we have a new shell, all the customizations and aliases that were present for BASH will be gone. Fortunately, this is very easy. Use your favorite editor (for me, that's VIM), which for many is Nano, and edit the .zshrc file. Navigate to the bottom of the file and add your aliases like the example below:

1alias ll="ls -alF"

When you restart your terminal window, all your custom aliases will be available. You can also change the theme in this same file (.zshrc). Another quick tip is to use Control+L to clear your screen. I use this one often.

How Do I Install NVM and NodeJS?

For me, NVM makes working with Node much easier. Here's how to get that going. Assuming you have CURL installed, run the following command to install NVM.

1curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash

NVM will allow you to manage the NodeJS versions on your machine easily. After that installation is complete, restart your terminal. Next, we will install the current LTS version of NodeJS. Run the following command:

1nvm install --lts

You now have the latest stable version of NodeJS along with NPM. If that's your preferred tool, you can skip the next step. If you're interested in trying something "new," then Bun might before you.

How Do I Install Bun as a NodeJS Alternative?

You might have picked up just how simple it is to install things in Ubuntu. Bun will be no different. There is one small preparation you will likely need to make, and that is to install Unzip. Below are the two commands you will want to run:

1sudo apt install unzip
2curl -fsSL https://bun.sh/install | bash

You may prefer NPM or Yarn. These are all fine options. For me, Bun is much faster, and I like trying out new things. Since I will certainly be developing sites that run with Prismic, I will use Bun to install their CLI. Here's the Bun way to do that:

1bun install --global prismic-cli

You're in the right place if you're interested in learning more about Prismic, React, NextJS, and web development. I am looking to produce more content on those topics.

Let's take a quick break from terminal commands and install Visual Studio Code.

How Do I Install Visual Studio Code?

There are several ways to get Visual Studio Code. In my opinion, using the Microsoft Store is the simplest way. Install it, and launch it. Super simple. Once it's launched, sign in to your GitHub profile and enable profile sync.

Sign in to sync settings in vs code

Now, when you change your theme/settings etc, your settings are saved and synced between devices. Who doesn't love that?

Now that we've signed into VS Code with our GitHub account, we want to begin the setup of Git and GitHub back in Ubuntu.

How Do I Set Up SSH for Git and GitHub in Ubuntu?

First, let me share the link to the Microsoft Docs on getting started with Git and WSL. Git will be installed on Ubuntu already, so we don't need to do that. Instead, we will start by configuring your account's global username and email. Do that with the following commands:

1git config --global user.name "Edmond Dantès"
2git config --global user.email "count@montecristo.com"

If you're also following the MS Docs, I skip the part on the Git Credential Mangager (GCM). It's not necessary for me. I do all my development inside Ubuntu. That means it's time to set up our SSH keys inside Ubuntu. Here is the link to GitHub's documentation on this process. When you run the command below, you will be prompted to use a passkey. I just hit "enter" twice, so I don't have to be prompted for the passkey each time. Also, you will be asked for a file name. I accept the default.

1ssh-keygen -t ed25519 -C "change_this@youremail.com"
2> Enter passphrase (empty for no passphrase): [Type a passphrase]
3> Enter same passphrase again: [Type passphrase again]

Next, you will need to start the SSH agent using the command below:

1eval "$(ssh-agent -s)"

Your ssh-agent is now "awake" and waiting for you to add your private key. Let's do that with the following command:

1# make sure you change the file name to the one you made
2# below is the file name I use (the default)
3ssh-add ~/.ssh/id_ed25519

Great job! Now that you have your private key set up in Ubuntu, we need to get your public key into GitHub. Head on over to your GitHub account. In the top right, click on your profile avatar, and select settings. On the left, select SSH and GPG keys. If you have a key setup already, get rid of that. You're now ready to grab your public key and add it. Here's how to do that. Copy your public key. I use less and just select, copy, and paste.

1less ~/.ssh/id_ed25519.pub

Click the New SSH Key button, give your key a title, and then paste your public key into the text area. Once you're done, click "Add SSH key."

Adding a new SSH key in GitHub

You are now set up and ready to securely fetch, pull, commit, push, etc., using Git and GitHub with VS Code and Ubuntu. Isn't this fantastic?

How Do I Install and Use Nerd Fonts?

Fonts can be a very personal choice. To grab a Nerd font, head on over to this site. Find your favorite and download it. Depending on my mood, I use FantasqueSansM Nerd Font Mono or DroidSansM Nerd Font Mono Regular. Find the monospaced versions of the fonts and install them. You do this by double-clicking the file and clicking install.

Install the monospace versions of the nerd font

For your final step, you will need to set this new Nerd font into your font list in VS Code and also as your font for your Ubuntu profile in Windows Terminal.

Did this Guide Help You?

I wonder if you found this guide helpful. If you did, leave me a comment on the YouTube video. If you didn't, that's ok. You don't have to leave me a comment. 😏