DEV Community: Raúl Chirinos

Setting a webdev coding environment for Windows Users with WSL2

Raúl Chirinos — Sun, 25 Oct 2020 14:09:34 +0000

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.

Léelo en español

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.

Creando un setup de Desarrollo Web en Windows con WSL2.

Raúl Chirinos — Sun, 11 Oct 2020 20:41:35 +0000

Por mucho tiempo desarrollar o programar desde Windows era algo casi impensable, la falta de una consola de comandos bash, un sistema de archivos tosco sumado a otros factores hacían que los programadores rápidamente se cambiaran a un SO de tipo Unix como Linux o MacOS. Pero este año los cambios que ha traído Microsoft con WSL en las últimas versiones de Windows 10 pueden hacer que esto empiece a cambiar.

Read this in English

Contenido

🔍 ¿Qué es WSL?
⚙ Instalar y configurar WSL
🔧 Configurar Zsh y Oh-my-zsh
👩‍💻 Instalar Node.js y NPM
📜 Editor de Código

🔍 ¿Qué es WSL?

Las siglas WSL vienen del inglés "Windows Subsystem for Linux" y básicamente eso es WSL, un subsistema que te permite correr una distribución minificada de un sistema operativo Linux dentro de tu Windows. WSL2, la versión más reciente de WSL funciona con la tecnología Hyper-V, lo cual te permite correr el kernel completo de Linux con un menor consumo de recursos que el que involucraría una maquina virtual convencional.

Con WSL tienes acceso a una consola de comandos bash (o zsh), al sistema de archivos de Linux y a casi todas las herramientas que una distro de Linux podría ofrecerte para desarrollar.

⚙ Instalar y Configurar WSL

Preparando Windows

Lo primero que debes hacer es asegurarte de que tu versión de Windows esté actualizada y que pueda soportar WSL2. Para esto debes dirigirte al Centro de Configuraciones de Windows, al que puedes acceder presionando al mismo tiempo la tecla Windows y la tecla i de tu teclado [Win + i].

Una vez dentro del Centro de Configuraciones debes dirigirte a la sección de Actualizaciones y Seguridad y allí hacer click en "Buscar Actualizaciones". Cuando ya estén instaladas todas las actualizaciones y tu sistema operativo esté up-to-date podrás habilitar WSL en tu sistema

Habilitando WSL

Para habilitar WSL deberás acceder al menú de características de Windows, lo puedes hacer usando la funcionalidad de búsqueda del Menú de Inicio y escribiendo "Activar o desactivar las características de Windows" y una vez allí asegurate de tildar las opciones "Plataforma de Máquina Virtual" y "Subsistema de Windows para Linux" y destildar la opción "Plataforma de Hipervisor de Windows". Luego de aceptar estas configuraciones tu PC va a reiniciarse y a configurarse con las nuevas características.

Una vez reiniciada abre la Powershell de Windows y corre el siguiente comando para setear WSL en la version 2 por defecto

wsl --set-default-version 2

Instalando Ubuntu y la Terminal de Windows

En la tienda de Microsoft debes buscar e instalar la ultima versión de Ubuntu LTS que al momento de escrito este post es la versión 20.04, luego estando en la tienda debes buscar e instalar también Windows Terminal, un emulador de terminal bastante potente creado por Microsoft y con el cual podrás acceder a tu consola de Ubuntu fácilmente.

Una vez instalado todo accederemos a nuestra consola bash de Ubuntu abriendo la terminal de Windows que por defecto debe abrirse con su perfil de CMD, en la barra de pestañas de la terminal podrás acceder al menú (la pestañita con flecha hacia abajo) y seleccionar tu versión de Ubuntu.

Configurando Ubuntu

Si quieres que al abrir la terminal se cargue Ubuntu por defecto deberás acceder a "Configuración" en el menú de la terminal, se abrirá un archivo de texto desde el cual podrás ver una lista de perfiles y sus configuraciones.

Cada perfil tiene un id en el campo "guid", a su vez al principio del archivo encontrarás un campo con nombre "defaultProfile", deberás reemplazar el valor de este campo por el guid del perfil de Ubuntu, guardar el archivo y al reiniciar la terminal esta se abrirá por defecto en la consola de Ubuntu.

Una vez dentro de la consola de Ubuntu te pedirá que asignes un nombre de usuario y una contraseña para tu sistema operativo.

Otro paso fundamental es hacer que la terminal abra por defecto en el home de tu sistema de archivos de Ubuntu (WSL funciona mejor dentro del sistema de archivos de Linux) para esto debes editar tu archivo de configuración bash. En la terminal ejecuta el comando nano ~/.bashrc y al final del archivo agrega una linea que diga cd ~, guarda el archivo con [Control + O] y reinicia la terminal.

🔧 Configurar Zsh y Oh-my-zsh

Este paso es completamente opcional pero súper recomendado. Zsh es una shell para sistemas de tipo Unix al igual que bash, pero con un montón de funcionalidades. Básicamente un bash con esteroides. Con Zsh y Oh-my-zsh podrás correr todos los comandos que usas en bash normalmente pero además podrás agregarle un montón de plugins, temas y funcionalidades, lo que hará subir de nivel tu experiencia con la terminal.

Para instalar Zsh y Oh-My-Zsh debes correr los siguientes comandos en la terminal:

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

Se te preguntará si quieres correr Zsh por defecto a lo que debes responder que sí. Luego de eso podrás reiniciar tu terminal y automáticamente estarás corriendo en Zsh en vez de bash.

Igual que en bash, en zsh deberás tocar el archivo de configuración para que este inicie en el home de Ubuntu, para esto tendrás que correr en la terminal el comando nano ~/.zshrc y agregar nuevamente una fila que diga cd ~ al final del archivo, guarda con [Control + O] y al reiniciar la terminal deberías estar en el home de Ubuntu.

Desde el archivo de configuración de Zsh podrás también seleccionar el tema y los plugins que quieras tener. Yo personalmente uso:

Git: muestra en que rama estás.
Z: útil para moverte entre tus archivos fácilmente.
Zsh-suggestions: te muestra sugerencias de comandos basado en los que usas normalmente.
Zsh-nvm: de esté les hablaré más adelante.

👩‍💻 Instalar Node.js y NPM

La forma más fácil de instalar alguna versión de Node.js es a través de NVM que es un manejador de versiones para Node, con el cual podrás descargar e instalar varias versiones de Node y saltar entre ellas.

Para descargar la última versión de Node estable deberás descargar NVM he instalar la version latest desde allí:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash
nvm install node # esto descargara la ultima versión estable

Si por el contrario quieres descargar una versión especifica, como la 6.14.4 puedes correr:

nvm install 6.14.4 # o 10.10.0, 8.9.1, etc

Luego de esto podrás correr node --version y npm --version para chequear que tu versión de Node y NPM se hayan instalado correctamente.

Paso adicional si usas ZSH

Muchas veces NVM no carga por defecto al abrir la consola de Zsh, esto se puede solucionar con un plugin de Oh-my-zsh llamado zsh-nvm. Para instalarlo basta con abrir el archivo de configuración de zsh haciendo nano ~/.zshrc y buscando la fila de plugins, que debería verse así: plugins=(git), debes agregar el nombre del plugin a instalar (en nuestro caso zsh-nvm) al lado de los ya listados.

plugins=(git zsh-nvm)

Al guardar y reiniciar la terminal, NVM, Node y NPM deberían funcionar correctamente.

📜 Editor de Código

Para este caso y por norma general recomiendo usar Visual Studio Code como editor de código, es un editor liviano y al mismo tiempo lo suficientemente potente para la mayoría de las tareas de desarrollo, además es bastante personalizable.

Descargaremos VS Code para Windows desde su pagina oficial

Una vez en VS Code iremos a la pestaña de plugins [Control + Shift + X] y buscaremos e instalaremos la extensión "Remote WSL", esta nos permitirá abrir cualquier directorio o archivo de Ubuntu en Visual Studio Code y usar todas sus funcionalidades.

Una vez instalada podemos correr code . en la terminal de Ubuntu desde cualquier directorio y este se abrirá automáticamente en Visual Studio Code.

🤟 Para terminar

Si completaste todos los pasos ya tendrás listo tu entorno de desarrollo hibrido dentro de Windows, con el cual podrás realizar la mayoría de tareas de programación sin extrañar los SO's de tipo Unix.

Con este setup no espero convencer a los usuarios fieles de Linux que se cambien a Windows ni mucho menos. Linux sigue teniendo un montón de características especiales que al día de hoy no son alcanzables con Windows. Sin embargo espero que esta guía sirva como opción para aquellas personas que quieran adentrarse en el mundo del desarrollo web y por alguna razón no puedan (o no quieran) cambiarse a Linux.

Este es el setup que al día de hoy utilizo para desarrollar y trabajar en frontend, principalmente con React, y me ha funcionado bastante bien, por tanto recomiendo que le den una probada si no están listos para cambiarse definitivamente a Linux o a Apple.

A esta guía pienso sumarle otro post explicando cómo levantar tus contenedores de Docker desde WSL en Windows con Docker Desktop, estén atentos que al subirlo agregaré un link desde acá.