WSL for a developer environment

Hi all! I’ve been absent in this blog for a while. So I guess this new entry is a good way to back to the road.

First of all, this is my first entry in English. I’m trying to practice, so if you find errors please let me know.

Brief story and why?

At the University, when I started programming, I used Linux environments to get work in all my developer environment. Then, since I started to work as a developer, always I’ve been using macOS, with all its virtues and defects.

But, in a previous project in my work, they decided to give me a PC to work with this stack:

NodeJS in the backend
Angular in the frontend

So, my first thought was back to the origins and install Ubuntu in that PC. Problems? Yes, drivers: graphic card and trackpad. I said: Ok, no problem. I will work on this. But, was my fault. I couldn’t work in a weird resolution and with a trackpad that was deciding for me where to place.

So, the solution was clear: that PC will work fine only with Windows

WSL

After doing research about the best way to have commands that I already use in macOS and Linux, I read that there is a Linux embedded in Windows, called Windows Subsystem for Linux. Basically, you can have a Linux bash without the limitations of virtualization, and the problems I had with drivers.

I´ve worked with CentOS and Ubuntu, but I decided to use the last one. So, let´s start

Enable WSL for Windows 10. You need to open PowerShell as admin and run

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

2. Go to Microsoft Store and choose your favourite distro. As I said, I will use Ubuntu.

Click on Get and Install it.

3. After that, start Ubuntu. It will take a time to finish the installation, and the first time will ask you for a UNIX user and password.

And now you have Linux in your Windows PC!!!

GIT, NODE, Angular

After you have installed, you would like to test a local environment.

First of all, you need to setup your local git. So, run:

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

For this example, I will install Node and create a sample project in Angular.

For Node, I usually use NVM. So:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

If you are using the default bash, it will add the env vars directly. Otherwise, add

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

to your rc bash file. Close and re open your terminal.

I will use the latest LTS version

nvm install 14

And I will install Angular for a test project.

npm install -g @angular/cli

And create a new project

ng new test-app

Angular creates a project with all the things you would need to start. Go to the created folder and start the server

cd test-app
npm start

Go to your browser at go to `http://localhost:4200/` and you will see your app

VSCODE

Everything is fine, but in the real life you need to modify your code. So, VSCode will help us using the code in WSL and modifying in Windows.

First of all, download and install the Windows version of VSCode

Open a new terminal of WSL and go to the folder you would like to open in VSCODE, and type

code .

That will open Windows’ VSCode with the content of your WSL folder.

You will see also a recommended install about WSL, please install it. Close VSCODE and open it again from the terminal. It will finish the installation and you will see that is connected and also is taking WSL git configuration.

You will see that hot reload works.