Beginning My Experience with WSL (Windows Subsystem for Linux)
Tags: linux, windows, javascript, beginners
Published: 2024-04-02 07:00:00

I switched back to Windows two years ago due to the high prices of MacBooks and my company providing me with a Windows 11 Pro machine.

However, as a frontend developer, most of my code and my apps run on Linux servers with .Net Core, Node, or Docker. So, using Linux should be a good option, right?

### How I can use Linux if I have a Windows Machine ?

In the past, I used [VMware](https://www.vmware.com/) or [VirtualBox](https://www.virtualbox.org/) with a Linux distribution, dual-booted, or used another machine with Linux for my experiments with Linux. However, Canonical and Microsoft worked together to create WSL (and WSL2), which simplifies bringing Linux to Windows users. It removes complexity, makes collaboration between operating systems easier, and allows for easy integration between Linux and Windows hosts, taking advantage of the machine's resources.

The goal is to provide frontend developers using Windows and WSL with a basic understanding of Linux.

## **Install WSL**

First, ensure you have the Windows Pro version. Then, open the terminal and run the command `wsl --install` to install WSL on your Windows.

```bash
wsl --install
```

By default, it installs the Ubuntu Linux distro. Once the installation is complete, our terminal automatically switches to the Ubuntu environment and prompts us to create a user and password.

{% embed https://youtu.be/u06Xq2kxZG4 %}

Then, open the terminal and enter `wsl` to switch to the Ubuntu environment. However, Ubuntu isn't the only option. To view all available distributions online, use the command `wsl --list --online`.

```bash
C:\Users\DPAREDES>wsl --list --online
The following is a list of valid distributions that can be installed.
Install using 'wsl.exe --install <Distro>'.

NAME                                   FRIENDLY NAME
Ubuntu                                 Ubuntu
Debian                                 Debian GNU/Linux
kali-linux                             Kali Linux Rolling
Ubuntu-18.04                           Ubuntu 18.04 LTS
Ubuntu-20.04                           Ubuntu 20.04 LTS
Ubuntu-22.04                           Ubuntu 22.04 LTS
OracleLinux_7_9                        Oracle Linux 7.9
OracleLinux_8_7                        Oracle Linux 8.7
OracleLinux_9_1                        Oracle Linux 9.1
openSUSE-Leap-15.5                     openSUSE Leap 15.5
SUSE-Linux-Enterprise-Server-15-SP4    SUSE Linux Enterprise Server 15 SP4
SUSE-Linux-Enterprise-15-SP5           SUSE Linux Enterprise 15 SP5
openSUSE-Tumbleweed                    openSUSE Tumbleweed
```

To install a specific distro, we can run `wsl --install -d Ubuntu` command

```bash
wsl --install -d Ubuntu
```

or see all the distros installed on your machine with command `wsl --list` command.

```bash
C:\Users\DPAREDES>wsl --list
Windows Subsystem for Linux Distributions:
rancher-desktop-data (Default)
rancher-desktop
Ubuntu
```

You can remove a distro using the command `wsl --unregister Ubuntu`. If you have multiple distros, you can specify which one to remove with `wsl -d` followed by the distro's name, for example:

```bash
wsl -d Ubuntu
```

> If you want to set Ubuntu as default distro, run the command `wsl -s Ubuntu`

Ok, we have Linux ready on our machine, but how do we start with it?

## **WSL Basic**

Into the WSL, we have a linux, ready so we can install package like ngnix for run a local webserver.

```bash
sudo apt install nginx
```

After installing, we can edit the default HTML file located at `/var/www/html/index.nginx-debian.html`.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1711113462478/40a6b4a9-8e33-44b7-a2ab-4130e4140f41.gif align="center")

We can edit the file `index.nginx-debian.html`by using nano. Nginx runs on port 80, so we can access it via the URL `http://localhost`.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1710093398941/ccbc4cb3-665d-43a7-9279-fa6a9e7682c9.png align="center")

We can also install NVM and the latest version of Angular CLI.

```bash
dany@INNO-D0H:~$ nvm install --lts
Installing latest LTS version.
Downloading and installing node v20.11.1...
Downloading https://nodejs.org/dist/v20.11.1/node-v20.11.1-linux-x64.tar.xz...
############################################################# 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v20.11.1 (npm v10.2.4)
dany@INNO-D0H:~$ nvm use v20.11.1
dany@INNO-D0H:~$ npm install -g @angular/cli
```

After installing the Angular CLI, create a new app and access it from your local machine.

```bash
dany@INNO-D0H:~$ ng new lab
dany@INNO-D0H:~$ cd lab/
dany@INNO-D0H:~/lab$ ls
README.md     package-lock.json  tsconfig.app.json
angular.json  package.json       tsconfig.json
node_modules  src                tsconfig.spec.json
dany@INNO-D0H:~/lab$ ng serve
⠏ Building...
Initial chunk files | Names         |  Raw size
polyfills.js        | polyfills     |  83.60 kB |
main.js             | main          |  22.08 kB |
styles.css          | styles        |  95 bytes |

                    | Initial total | 105.78 kB
Application bundle generation complete. [0.772 seconds]
Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help
```

After running `ng serve`, access the application by opening `http://localhost:4200` in your browser.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1710094013733/a8e44a7a-0e97-4ae9-8328-7bb5ad25e604.png align="center")

## WSL Files

When we run WSL, Ubuntu operates in the same environment as our terminal. But how do we access Ubuntu files from Windows?

In the Windows File Explorer, type `\\wsl$` and it will display all installed WSL distributions.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1710093348734/5872d378-be7f-4d2c-981a-da1af1067d61.png align="center")

This seems straightforward, but what if I want to access my Windows system from Ubuntu?

By using the `ln` command, we create a link between Linux and our home directory.

```bash

dany@INNO-D0H:~$ ln -s /mnt/c/Users/DPAREDES/Desktop/projects/ ~/projects
```

When we return to the home directory, we can see the link to the project directory, for example.

```bash
dany@INNO-D0H:~$ cd
dany@INNO-D0H:~$ ls
lab  projects
dany@INNO-D0H:~$ cd projects
dany@INNO-D0H:~/projects$ ls
articles  challenge-frontend-master  lab  projects
```

Another way to access files is by using the WSL VSCode extension in VSCode.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1711115641039/027e62c6-e393-4d73-844e-59274cc1115c.png align="center")

> Checkout the full tutorial [https://code.visualstudio.com/docs/remote/wsl-tutorial](https://code.visualstudio.com/docs/remote/wsl-tutorial)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1710095693250/e300e4be-96ba-4c32-b5c6-0c94daf99d77.png align="center")

If you like me are Webstorm fan, it's have support 👇🏼

> [https://www.jetbrains.com/help/webstorm/how-to-use-wsl-development-environment-in-product.html#ws\_wsl\_node\_interpreter\_configure](https://www.jetbrains.com/help/webstorm/how-to-use-wsl-development-environment-in-product.html#ws_wsl_node_interpreter_configure)

## Recap

We learned how to use WSL to combine the best of Linux and the simplicity of Windows. WSL greatly simplifies creating a sandbox to experiment with our projects and test in a real Linux environment. It's much easier than installing VMware or VirtualBox, and you can run all Linux software from Windows.

If you want to learn more, check out the following links:

* [https://learn.microsoft.com/en-us/windows/wsl/install](https://learn.microsoft.com/en-us/windows/wsl/install)
    
* [https://code.visualstudio.com/docs/remote/wsl](https://code.visualstudio.com/docs/remote/wsl)