Linux Web Development Enviorment in Windows 10

Photo by Kevin Ku on Unsplash

This article goes over how to create a Linux development environment (for web development) in Windows 10

Pre-requisites for WSL2 requirements

• Running Windows 10, updated to version 1903 or higher, Build 18362 or higher for x64 systems.
• Running Windows 10, updated to version 2004 or higher, build 19041, for ARM64 systems.
• Check your Windows version by selecting the Windows logo key + R, type winver, press ENTER. (Or enter the ver command in Windows Command Prompt). Please update to the latest Windows version if your version is lower.

Install the Windows Subsystem for Linux

Open PowerShell as Administrator and run:

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

Restart your system and open powershell as administrator again

wsl - set-default-version 2

Install your Linux distribution of choice

Open the Microsoft Store and select your favorite Linux distribution from a variety of distributions like Ubuntu, Debian, Kali Linux, and many more (I prefer Debian, but any Debian based distribution will work just fine).

• From the distribution’s page, select Get.
• Find the distribution in the Start Menu and open it.

The first time you launch a newly installed Linux distribution, a console window will open, and you’ll have to set up a username and password.

If you faced any errors during the installation, follow instructions on this link, and check for the specific error you are facing.

Installing tools for web development

Now type this commands in the Linux Terminal you opened

• Installing packages

sudo apt update
sudo apt -y upgrade
sudo apt install -y git curl wget zsh python3.8 unzip

• Terminal utilities I like to use like exa (modern replacement for ls), syntax highlight, auto-suggestions, and auto-jump (helps you jump into nested directories with one command rather than using cd /directory1/…./directory-you-want-to-cd-into, now you can just use j directory-you-want-to-cd-into, provided you have cd into that directory before

The first line below will prompt you to change the default shell to zsh after execution, type y and press Enter to change the default shell

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
git clone git://github.com/wting/autojump.git
python3 ~/autojump/install.py
git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k
cd
curl https://sh.rustup.rs -sSf | sh
wget -c https://github.com/ogham/exa/releases/download/v0.9.0/exa-linux-x86_64-0.9.0.zip
unzip exa-linux-x86_64-0.9.0.zip
sudo mv exa-linux-x86_64 /usr/local/bin/exa

• Setting Up VS Code with WSL

All you need to do is, launch VS Code. It will prompt you to install Remote WSL Extension, or you can manually install it.

• Now you have to change .zshrc file to finish setting up Terminal Utilities

code ~/.zshrc

The above command will open a file in VS Code, replace content of that file with the one below and save. Make sure to replace USERNAME with your Linux Username while replacing.

Now load these configs on the terminal by

source ~/.zshrc

Now you will be prompted to customize Linux Prompt Theme, it might not look so the way it should because we don’t have powerline fonts but we will fix it in Windows Terminal as I never use the default Linux Terminal anyway. Just choose the options you like for now, it will look smooth with icons and everything in Windows Terminal. You can always re-run the configuration by command p10k configure.

I also like to use Windows Terminal from Microsoft so I can jump between many different shells quickly

• Open the Microsoft Store, search for Windows Terminal and select Get.

You can customize Windows Terminal as per your liking, for reference use this video and the official Microsoft Docs.

Now set the same Cascadia Code PL Font for the Linux Distribution or set the font as a global config. I also like to have a background image on Windows Terminal, you can use my config too. Again change USERNAME before copy pasting

Now run p10k configure in Linux Terminal again if you want, and enjoy your beautiful terminal and linux setup in Windows itself.

Happy Hacking !!!