Web Development Setup on Windows — WSL(Ubuntu) + Windows Terminal + oh-my-zsh + powerlevel10k

WSL Windows Terminal after customization

Microsoft is releasing tools that are making development on windows easy and fun. Windows Subsystem for Linux is an amazing idea. It works as promised, easy to install and run, almost seamless with windows. 🤩🤩

Microsoft has also released Windows Terminal which is in Preview mode. A combination of both gives a really powerful development experience on Windows. Excited to use Windows after over a decade.

Web Development on Windows!

So, let’s get started with putting things together. The first thing we require is the Windows Subsystem for Linux. We need to enable it before it can be installed.

🚀 Open PowerShell as Administrator and run the following command

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

Next, download the Linux distro of your choice from the Microsoft Store. My choice here is Ubuntu 18.04 LTS. Detailed steps involved in the installation are provided here by Microsoft.

Now, install Windows Terminal from Microsoft Store, which is still in Preview when I write this blog.

Get Windows Terminal (Preview) — Microsoft Store

Let’s start to customize Windows Terminal to use WSL. Launch and click the down caret next to the plus icon and click Settings. This will open a profiles.json file in your editor. This would be familiar to you if you have customized a VS Code setting.json file.

Change defaultProfile to guid of Ubuntu-18.04. This will make the Ubuntu terminal default. Change the color scheme of your choice from the link below. Just copy the theme and paste it the schemes array. Assign the colorScheme variable in defaults profile to the name of the color scheme.

Windows Terminal Themes

Now let start customizing our Ubuntu Terminal.

⚙ ️Install zsh

sudo apt install zsh
exec zsh // to switch the termianl to zsh

⚙ ️Install oh-my-zsh

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

⚙ Install powerline10k from the following link. Make sure Meslo Nerdfont is installed from here. Just follow the installation steps, in the end, there is a configuration wizard that makes the customization simple.

romkatv/powerlevel10k

💡 Quick Tip — The folder path is too long since it mounted. To shorten the path to show the last directory, change the following in ~/.p10.zsh file

POWERLEVEL9K_SHORTEN_STRATEGY=truncate_to_last

As suggested by Roman Perepelitsa, a better approach would be changing above config to

POWERLEVEL9K_SHORTEN_STRATEGY=truncate_to_unique
POWERLEVEL9K_DIR_MAX_LENGTH=20

This will ensure the max length to 20, the default value is 80.

Also, adding a bidirectional alias for the mounted home directory as h, in the ~/.zshrc

hash -d h=/mnt/c/Users/diese

💬 Please drop comments on how you have set up your Windows for development.

🎥 YouTube Video Link