DEV Community

Cover image for Supercharge your Windows Development: The Ultimate Guide to WSL 🚀📟
Boris Martinovic for Wasp

Posted on

Supercharge your Windows Development: The Ultimate Guide to WSL 🚀📟

Hi! I’m Boris!

I’m a software engineer working professionally in insurance, teaching other developers, and speaking at conferences. Throughout the years, I’ve used my fair share of different development environments and operating systems and I never personally liked developing in Windows aside from .Net development. Why is that? Let’s dig a bit deeper into that.

Well, most of my issues can boil down to one word: hassle. Whether it comes to dealing with Windows in your daily use, you can often encounter different ways of the operating system itself tripping you up. There are many examples of this, be it registry issues, package management, switching node versions, or Windows Update, which itself alone can drive people off the OS.

So you can see why I started to relate to the crow in the image below.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gpwe8ax86eeh6ccpgsi.png

I didn’t give up my search for a viable solution. And, I (kind of) found it. Enter - WSL.

What is WSL and why should I be interested in it?

Windows Subsystem for Linux (or WSL) lets developers run a fully functional and native GNU/Linux environment directly on Windows. In other words, we can run Linux directly without using a virtual machine or dual-booting the system.

The first cool thing about it is that WSL allows you to never switch OS’s, but still have the best of both worlds inside your OS.
What does that mean for us regular users? When you look at the way WSL works in practice, it can be considered a Windows feature that runs a Linux OS directly inside Windows 10 or 11, with a fully functional Linux file system, Linux command line tools, ***and*** Linux GUI apps (really cool, btw). Besides that, it uses much fewer resources for running when compared to a virtual machine and also doesn’t require a separate tool for creating and managing those virtual machines.

WSL is mainly catered to developers, so this article will be focused on developer usage and how to set up a fully working dev environment with VS Code. Inside this article, we’ll go through some of the cool features and how they can be used in practice. Plus, the best way to understand new things is to actually start using them.

Finding this article useful?

We're working hard at Wasp to create content like this, not to mention building a modern, open-source React/NodeJS framework.

The easiest way to show your support is just to star Wasp repo! 🐝 But it would be greatly appreciated if you could take a look at the repository (for contributions, or to simply test the product). Click on the button below to give Wasp a star and show your support!

wasp_arnie_handshake

⭐️ Thanks For Your Support 💪

Installing WSL on the Windows operating system

In order to install WSL on your Windows, first enable Hyper-V architecture is Microsoft’s hardware virtualization solution. To install it, right-click on the Windows Terminal/Powershell and open it in Administrator mode.

Image description

Then, run the following command:



Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Hyper-V -All


Enter fullscreen mode Exit fullscreen mode

That will ensure that you have all the prerequisites for the installation. Then, open the Powershell (best done in Windows Terminal) in the Administrator mode. Then, run



wsl —install


Enter fullscreen mode Exit fullscreen mode

There is a plethora of Linux distributions to be installed, but Ubuntu is the one installed by default. This guide will feature many console commands, but most of them will be a copy-paste process.

If you have installed Docker before, there is a decent chance that you have WSL 2 installed on your system already. In that case, you will get a prompt to install the distribution of your choice. Since this tutorial will be using Ubuntu, I suggest running.



 wsl --install -d Ubuntu


Enter fullscreen mode Exit fullscreen mode

After installing Ubuntu (or another distro of your choice), you will enter your Linux OS and be prompted with a welcome screen. There, you will enter some basic info. First, you will enter your username and after that your password. Both of those will be Linux-specific, so you don’t necessarily have to repeat your Windows credentials. After we’ve done this, the installation part is over! You have successfully installed Ubuntu on your Windows machine! It still feels weird to say this, right?

Hol’ up a minute!

But before we get down to our dev environment setup, I want to show you a couple of cool tricks that will make your life easier and help you understand why WSL is actually a game-changer for Windows users.

The first cool thing with WSL is that you don’t have to give up the current way of managing files through Windows Explorer. In your sidebar in Windows Explorer, you can find the Linux option now right under the network tab.

Image description

From there, you can access and manage your Linux OS’s file system directly from the Windows Explorer. What is really cool with this feature is that you can basically copy, paste, and move files between different operating systems without any issues, which opens up a whole world of possibilities. Effectively, you don’t have to change much in your workflow with files and you can move many projects and files from one OS to another effortlessly. If you download an image for your web app on your Windows browser, just copy and paste it to your Linux OS.

Image description

Another very important thing, which we will use in our example is WSL2 virtual routes. As you now have OS inside your OS, they have a way of communicating. When you want to access your Linux OS’s network (for example, when you want to access your web app running locally in Linux), you can use ${PC-name}.local. For me, since my PC name is Boris-PC, my network address is boris-pc.local. That way you don’t have to remember different IP addresses, which is really cool. If you want your address for whatever reason, you can go to your Linux distro’s terminal, and type ipconfig. Then, you can see your Windows IP and Linux’s IP address. With that, you can communicate with both operating systems without friction.

Image description

The final cool thing I want to highlight is Linux GUI apps. It is a very cool feature that helps make WSL a more attractive proposal for regular users as well. You can install any app you want on your Linux system using popular package managers, such as apt (default on Ubuntu) or flatpak. Then you can launch them as well from the command line and the app will start and be visible inside your Windows OS. But that can cause some friction and is not user-friendly. The really ground-breaking part of this feature is that you can launch them directly from your Windows OS without even starting WSL yourself. Therefore, you can create shortcuts and pin them to the Start menu or taskbar without any friction and really have no need to think about where your app comes from. For the showcase, I have installed Dolphin File Manager and run it through Windows OS. You can see it action below side by side with Windows Explorer.

Image description

Getting started with development on WSL

After hearing all about the cool features of WSL, let’s slowly get back on track with our tutorial. Next up is setting up our dev environment and starting our first app. I’ll be setting up a web dev environment and we’ll use Wasp as an example.

If you aren’t familiar with it, Wasp is a Rails-like framework for React, Node.js, and Prisma. It’s a fast and easy way to develop and deploy your full-stack web apps. For our tutorial, Wasp is a perfect candidate, since it doesn’t support Windows development natively, but only through WSL as it requires a Unix environment.

Let’s get started with installing Node.js first. At the moment, Wasp requires users to use the Node v18 (version requirement will be relaxed very soon), so we want to start with both Node.js and NVM installation.

But first things first, let’s start with Node.js. In WSL, run:



sudo apt install nodejs


Enter fullscreen mode Exit fullscreen mode

in order to install Node on your Linux environment. Next up is NVM. I suggest going to https://github.com/nvm-sh/nvm and getting the latest install script from there. The current download is:



curl -o- [https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh](https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh) | bash


Enter fullscreen mode Exit fullscreen mode

After this, we have both Node.js and NVM set up in our system.

Next up is installing Wasp on our Linux environment. Wasp installation is also pretty straightforward and easy. So just copy and paste this command:



curl -sSL [https://get.wasp-lang.dev/installer.sh](https://get.wasp-lang.dev/installer.sh) | sh


Enter fullscreen mode Exit fullscreen mode

and wait for the installer to finish up its thing. Great! But, if you did your WSL setup from 0, you will notice the following warning underneath: It looks like '/home/boris/.local/bin' is not on your PATH! You will not be able to invoke wasp from the terminal by its name.

Image description

Let’s fix this quickly. In order to do this, let’s run



 code ~/.profile


Enter fullscreen mode Exit fullscreen mode

If we don’t already have VS Code, it will automatically set up everything needed and boot up so you can add the command to the end of your file. It will be different for everyone depending on their system name. For example, mine is:



export PATH=$PATH:/home/boris/.local/bin


Enter fullscreen mode Exit fullscreen mode

Great! Now we just need to swap node version to v18.14.2 to ensure full compatibility with Wasp. We’ll install and switch to Node 18 in one go! To do this, simply run:



nvm install v18.14.2 && nvm use v18.14.2


Enter fullscreen mode Exit fullscreen mode

After setting up Wasp, we want to see how to run the app and access it from VS Code. Under the hood, you will still be using WSL for our development, but we’ll be able to use our VS Code from Host OS (Windows) for most of the things.

Image description

To get started, download the WSL extension to your VS Code in Windows. Afterward, let’s start a new Wasp project to see how it works in action. Open your VS Code Command Palette (ctrl + shift + P) and select the option to “Open Folder in WSL”.

Image description

The folder that I have opened is



\\wsl.localhost\Ubuntu\home\boris\Projects


Enter fullscreen mode Exit fullscreen mode

That is the “Projects” folder inside my home folder in WSL. There are 2 ways for us to know that we are in WSL: The top bar and in the bottom left corner of VS Code. In both places, we have WSL: Ubuntu written, as is shown on screenshots.

Image description

Image description

Once inside this folder, I will open a terminal. It will also be already connected to the proper folder in WSL, so we can get down to business! Let’s run the



wasp new


Enter fullscreen mode Exit fullscreen mode

command to create a new Wasp application. I have chosen the basic template, but you are free to create a project of your choosing, e.g. SaaS starter with GPT, Stripe and more preconfigured. As shown in the screenshot, we should change the current directory of our project to the proper one and then run our project with it.



wasp start


Enter fullscreen mode Exit fullscreen mode

Image description

And just like that, a new screen will open on my Windows machine, showcasing that my Wasp app is open. Cool! My address is still the default localhost:3000, but it is being run from the WSL. Congratulations, you’ve successfully started your first Wasp app through WSL. That wasn’t hard, was it?

Image description

For our final topic, I want to highlight Git workflow with WSL, as it is relatively painless to set up. You can always do the manual git config setup, but I have something cooler for you: Sharing credentials between Windows and WSL. To set up sharing Git credentials, we have to do the following. In Powershell (on Windows), configure the credential manager on Windows.



git config --global credential.helper wincred


Enter fullscreen mode Exit fullscreen mode

And let’s do the same inside WSL.



git config --global credential.helper "/mnt/c/Program\ Files/Git/mingw64/bin/git-credential-manager.exe"


Enter fullscreen mode Exit fullscreen mode

This allows us to share our Git username and password. Anything set up in Windows will work in WSL (and vice-versa) and we can use Git inside WSL as we prefer (via VS Code GUI or via shell).

Conclusion

Through our journey here, we have learned what WSL is, how it can be useful for enhancing our workflow with our Windows PC, but also how to set up your initial development environment on it. Microsoft has done a fantastic job with this tool and has really made Windows OS a much more approachable and viable option for all developers. We went through how to install the dev tools needed to kickstart development and how to get a handle on a basic dev workflow. Here are some important links if you want to dive deeper into the topic:

Top comments (22)

Collapse
 
brads profile image
Bradley Oliver

Awesome write up. I've been using WSL since its first release as dual-booting and (as you mentioned) Virtual Desktops just were not cutting it. Only thing that is throwing me for a loop here is I have never actually ran a GUI version of any linux app in WSL I was under the impression it was primarily a terminal thing. Sure you can access file explorer (but permissions are always complaining on my end) but how the hell did you RUN dolphin file manager? Installing it on WSL does not place that app within the programs menu anywhere and you didnt mention a command in the terminal to actually 'run' a graphical user interface of any specific App so did I miss something?
Excellent work!

Collapse
 
martinovicdev profile image
Boris Martinovic • Edited

First of all, thanks for the kind words!

I just installed it via apt with
sudo apt install dolphin
Afterwards, it just showed up in my start menu. If you don't see it there, just run dolphin in WSL and you should be seeing it. It could potentially do with the version of WSL/Ubuntu. Check the link for more info on how to update.

Collapse
 
srbhr profile image
Saurabh Rai

Not only VS Code but Jetbrains Suite supports WSL 2.0 and development is really fun. I hope to see more improvements and the WSL 3.0 Release.

Awesome work 🙌

Image description

Collapse
 
infomiho profile image
Mihovil Ilakovac

Developing on Windows with WSL makes you want to switch to Windows 😂 It's such an improvement!

Collapse
 
martinovicdev profile image
Boris Martinovic

It is better for sure with WSL!

Collapse
 
araaranomi profile image
Ara Ara no Mi

How so? I have WSL but to me development isn't as good as just using Windows.

Thread Thread
 
martinovicdev profile image
Boris Martinovic

I might have made a blanket statement there. It's not better everywhere, of course.
If you're developing with for example .Net, it doesn't make much sense to use WSL (although it's a valid option, if one is using it) and it might be slower experience.
If you need to do things that just work better on *nix environments, it is usually a better experience, at least for me.

Collapse
 
nevodavid profile image
Nevo David

Super detailed!
Thank you for posting it!

Collapse
 
fernandezbaptiste profile image
Bap

Really nice write up - thanks!

Collapse
 
shubham7894 profile image
Shubham Guleria

Can you create a guide for lamp stack on debian in wsl. I was facing issues with mysql installation when i tried it.

Collapse
 
martinsos profile image
Martin Šošić

Thanks Boris, I found especially useful the part with VSCode!

Collapse
 
martinovicdev profile image
Boris Martinovic

Thanks! I figured it would be nice to have an all-in-one article for this topic.

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Installing Linux on Windows is a must :)

Nice article!

Collapse
 
vincanger profile image
vincanger

Nice work, Boris. This should come in handy for a lot of devs!

Collapse
 
martinovicdev profile image
Boris Martinovic

Thanks, I hope so!

Collapse
 
matijasos profile image
Matija Sosic

Finally, the comprehensive guide to WSL on Windows. This will be of help to so many devs starting out their journey on Windows!

Collapse
 
oyal profile image
oyal

May I ask how to install it to the D drive?

Collapse
 
martinovicdev profile image
Boris Martinovic

By default, you can't install it to any other drive except C. There are some ways where you can move it after installation, but I can't attest to anything as I always had it in the default drive, so I'm not too comfortable recommending anything like that.

Collapse
 
damian_cyrus profile image
Damian Cyrus

What about using SSH? Do you set up separate for Windows and Linux or do you use Windows/Linux only? It look like you use Windows as main system for credentials, so I guess SSH is also on Windows? How do you set this up?

I switched to wincred, too, but I still have to separate my signed commits on both systems.

Collapse
 
xbandx68 profile image
Andrea Bandiera

If you have the Home edition, Hyper-V is not supported.

Collapse
 
martinovicdev profile image
Boris Martinovic

As far as I am aware, it is supported. Check this: github.com/MicrosoftDocs/Virtualiz...

Collapse
 
bytemaster profile image
Byte Master

But... Linux.