Creando un setup de Desarrollo Web en Windows con WSL2.
Tags: webdev, ubuntu, javascript
Published: 2020-10-11 20:41:35

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](https://dev.to/rjchirinos/setting-a-webdev-coding-environment-for-windows-users-with-wsl2-445e)


## Contenido

* 🔍 [¿Qué es WSL?](#what-is-wsl)
* ⚙  [Instalar y configurar WSL](#install-wsl)
* 🔧 [Configurar Zsh y Oh-my-zsh](#install-zsh)
* 👩‍💻 [Instalar Node.js y NPM](#install-node-npm)
* 📜 [Editor de Código](#vscode)

## 🔍 ¿Qué es WSL? <a name="what-is-wsl"></a>

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 <a name="install-wsl"></a>

### 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

```bash
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 <a name="install-zsh"></a>

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:

```bash
$ 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](#zsh-nvm).

## 👩‍💻 Instalar Node.js y NPM <a name="install-node-npm"></a>

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í:

```bash
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:

```bash
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 <a name="zsh-nvm"></a>

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.

```bash
plugins=(git zsh-nvm)
```

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

## 📜 Editor de Código <a name="vscode"></a>

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](https://code.visualstudio.com/Download)

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 <a name="para-terminar"></a>

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á.