For a long time developing or programming in Windows was almost unthinkable, the lack of a bash command console, a crude file system and other factors made programmers quickly switch to a Unix-like OS such as Linux or MacOS. But this year the changes brought by Microsoft with WSL in the latest versions of Windows 10 may turn the tables.
Content
- 🔍 What is WSL?
- ⚙ Install and set up WSL
- 🔧 Config Zsh and Oh-my-zsh
- 👩💻 Install Node.js and NPM
- 📜 Code Editor
🔍 What is WSL?
WSL stands for "Windows Subsystem for Linux" and basically that is WSL, a subsystem that allows you to run a minified version of a Linux distriburion within your Windows. WSL2, the most recent version of WSL works with Hyper-V technology, which allows you to run the entire Linux kernel with less resource consumption than a conventional virtual machine.
With WSL you have access to a bash (or zsh) command console, the Linux file system and almost all the tools a Linux distro could offer you to code.
⚙ Install and Configure WSL
Preparing Windows
The first thing you should do is make sure your version of Windows is up-to-date and can support WSL2. To do this you must go to the Windows Settings Center, which you can access by pressing the Windows key and the i key on your keyboard [Win + i] at the same time.
Once inside the Settings Center you must go to the "Updates and Security" section and there click on "Check for Updates". When all the updates are installed and your operating system is up-to-date you can enable WSL on your system
Enabling WSL
To enable WSL you must access the Windows features menu, you can do it by using the search functionality of the Start Menu and typing "Turn Windows features on or off" and once there make sure to check the options "Virtual Machine Platform" and "Windows Subsystem for Linux" and disable the option "Windows Hypervisor Platform". After accepting these settings your PC will reboot and be configured with the new features.
Once restarted open the Windows Powershell and run the following command to set WSL to the default version 2
wsl --set-default-version 2
Installing Ubuntu and the Windows Terminal
In the Microsoft store you must search and install the latest version of Ubuntu LTS which at the time of writing this post is version 20.04, then being in the store you must also search and install Windows Terminal, a terminal emulator quite powerful created by Microsoft and with which you can access your Ubuntu console easily.
Once installed everything we will access to our Ubuntu bash console opening the Windows terminal that by default must be opened with its CMD profile, in the tab bar of the terminal you will be able to access the menu (the tab with the down arrow) and select your Ubuntu version.
Setting Ubuntu
If you want Ubuntu to be loaded by default when you open the terminal, you must go to "Settings" in the terminal menu, a text file will be opened from which you can see a list of profiles and their settings. Each profile has an id in the field "guid", at the beginning of the file you will find a field named "defaultProfile ", you must replace the value of this field by the Ubuntu profile guid, save the file and when you restart the terminal it will open by default in the Ubuntu console.
Once inside the Ubuntu console you will be asked to assign a username and password for your operating system.
Another fundamental step is to make the terminal open by default in the home of your Ubuntu file system (WSL works better inside the Linux file system) for doing this you must edit your bash configuration file. In the terminal execute the command nano ~/.bashrc and at the end of the file add a line with cd ~, save the file with [Control + O] and restart the terminal.
🔧 Configure Zsh and Oh-my-zsh
This step is completely optional but super recommended. Zsh is a shell for Unix-like systems just like bash, but with a lot of features. Basically a bash with steroids. With Zsh and Oh-my-zsh you will be able to run all the commands you use in bash normally but you will also be able to add a lot of plugins, themes and features, which will level-up your experience with the terminal.
To install Zsh and Oh-My-Zsh you must run the following commands in the terminal:
$ sudo apt install zsh
$ sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
You will be asked to confirm if you want to run Zsh by default. After that you will be able to restart your terminal and you will automatically be running in Zsh instead of bash.
As in bash, in zsh you must touch the configuration file so that it starts in the Ubuntu home, for this you will have to run in the terminal the command nano ~/.zshrc and add again a row that says cd ~ at the end of the file, save with [Control + O] and when you restart the terminal you should be in the Ubuntu home.
From the Zsh configuration file you can also select the theme and the plugins you want to have. I personally use:
- Git: shows which branch you're in.
- Z: useful to move between your files easily.
- Zsh-suggestions: shows you suggestions for commands based on the ones you normally use.
- Zsh-nvm: I'll tell you about this one later.
👩💻 Install Node.js and NPM
The easiest way to install some version of Node.js is through NVM which is a version manager for Node, with which you can download and install several versions of Node and jump between them.
To download the latest version of Node stable you must download NVM and install the latest version from there:
curl -or- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash
nvm install node # this will download the latest stable version
On the other hand, if you want to download a specific version, like 6.14.4, you can run this:
nvm install 6.14.4 # or 10.10.0, 8.9.1, etc
After that you can run node --version and npm --version to check that your Node and NPM version have been installed correctly.
Additional step if you use ZSH
Many times NVM does not load by default when opening the Zsh console, this can be solved with an Oh-my-zsh plugin called zsh-nvm. To install it, just open the zsh configuration file by doing nano ~/.zshrc and look for the row of plugins, which should look like this: plugins=(git), you must add the name of the plugin to be installed (in our case zsh-nvm) next to the ones already listed.
plugins=(git zsh-nvm)
By saving and restarting the terminal, NVM, Node and NPM should work properly.
📜 Code Editor
For this case and as a general rule I recommend using Visual Studio Code as code editor, it is a lightweight editor and at the same time powerful enough for most development tasks, plus it is quite customizable.
We will download VS Code for Windows from its official website
Once in VS Code we will go to the plugins tab [Control + Shift + X] and find and install the "Remote WSL" extension, this will allow us to open any Ubuntu directory or file in Visual Studio Code and use all its features.
Once installed we can run code . in the Ubuntu terminal from any directory and it will open automatically in Visual Studio Code.
🤟 Conclusions
If you have completed all the steps above you will have your hybrid development environment within Windows ready, with which you can perform most programming tasks without missing the Unix OS's.
With this setup I don't expect to convince the Linux faithful users to switch to Windows, far from it. Linux still has a lot of special features that today are not achievable with Windows. However I hope this guide will serve as an option for those people who want to get into the world of web development and for some reason can not (or don't want to) switch to Linux.
This is the setup that I use today to develop and work in frontend, mainly with React, and it has worked pretty well, so I recommend you to give it a try if you are not ready to switch to Linux or Apple.
To this guide I will add another post explaining how to lift your Docker containers from WSL on Windows with Docker Desktop.
Latest comments (0)