Crea un ambiente de desarrollo de Laravel usando WSL 2 y Laravel Valet

En un tutorial anterior aprendimos como instalar WSL 2 y Ubuntu en Windows 10 y utilizar todas las bondades de un sistema de Linux sin salir del sistema operativo de Microsoft. En este post nos toca aprender a crear un ambiente de desarrollo para Laravel utilizando la potencia de esta nueva versión de WSL.

Instalando dependencias

Para iniciar, ejecutaremos los siguientes comandos para tener nuestra distro actualizada

sudo apt update && sudo apt upgrade -y

Una vez actualizado, vamos a requerir instalar las dependencias para un desarrollo de Laravel, la lista de dependencias que utilizaremos son:

• PHP
• MySQL
• Nginx
• Y otros

Para ello ejecutamos:

sudo apt-get install network-manager libnss3-tools jq xsel build-essential libssl-dev zip unzip dnsmasq nginx mysql-server php-fpm php-cli php-mysql php-sqlite3 php-intl php-zip php-xml php-curl php-mbstring redis-server php-redis php-pear php-dev pkg-config libz-dev libzip-dev libmemcached-dev libmemcached11 libmemcachedutil2 libmagickwand-dev imagemagick memcached

Algo elemental y básico dentro del desarrollo backend es contar un servidor de base de datos para crear conexiones y gestionar la información a través del código que realizamos en el backend, en este caso utilizaremos MySQL, para no tener mucha dificultad en el desarrollo realizamos los siguientes pasos:

1. Ejecutamos sudo usermod -d /var/lib/mysql/ mysql
2. Luego ejecutamos sudo service mysql start <- para echar andar el servicio de mysql (muy importante 😅)
3. Ahora ejecutamos sudo mysql
4. El siguiente comando nos ayuda establecer el login del user root con contraseña y establecemos la contraseña: ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'tu_contraseña_va_aqui';
5. Vaciamos los privilegios con FLUSH PRIVILEGES;
6. Y nos salimos con exit y reiniciamos el servicio de mysql sudo service mysql restart

Con estos pasos dejamos un setup de MySQL para que podamos acceder vía password desde nuestros proyectos de Laravel, también funciona para phpmyadmin.

Si quieres combinar el desarrollo de Laravel con JavaScript para tu frontend en tu mismo proyecto, podremos necesitar de NodeJS, su instalación es sencilla usando los siguientes pasos:

1. cd ~ <- Nos vamos al directorio home de nuestro usuario
2. curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - <- Descargamos el binario del LTS de Node.js (puede variar con el paso del tiempo)
3. sudo apt-get install nodejs -y

Y con esto dejamos listo Node para ser utilizado dentro de nuestra distro de WSL.

Setup para Laravel Valet

Para realizar la instalación de nuestro setup de Laravel necesitamos de Composer el gestor de dependencias de PHP

1. Nuevamente nos dirigimos a la carpeta home de nuestro usuario con cd ~
2. Descargamos el binario con wget https://getcomposer.org/installer
3. Lo instalamos con php installer
4. Y movemos a composer de manera global con sudo mv composer.phar /usr/local/bin/composer
5. Modificamos o creamos nuestro archivo ~/.bash_aliases con nano ~/.bash_aliasesy exportamos dentro del archivo la siguiente linea, así hacemos composer accesible de manera global en el sistema: export PATH=~/.config/composer/vendor/bin:$PATH
6. Y reiniciamos nuestro bash con source ~./bashrc

Listo, ya tenemos Composer!

La versión de Valet que utilizaremos es una versión especial para WSL que fue creado para WSL 1, pero te preguntaras ¿por qué utilizar esta versión modificada? La Razón es porque al utilizar la versión normal de Valet de Ubuntu este nos bloquea el puerto que requiere nuestra distro para tener salida a internet (ya sea npm, git, etc).

Claro, este problema solo sucede con WSL 2, si sigues la mayoria de estos pasos en una distro normal no dará problema alguno.

Para instalar Valet seguimos los siguientes pasos:

1. Ejecutamos composer global require valeryan/valet-wsl
2. Ahora con valet install
3. Necesitamos establecer un directorio base donde dejaremos nuestros proyectos de php, en mi caso yo lo tengo en ~/development/php, cuando ya te encuentras en tu carpeta, ejecuta valet park, este último comando hace que valet siempre lea los proyectos en ese directorio.
4. (Opcional) - Si deseas cambiar el dominio solo ejecuta valet domain tu_dominio

De lado de Windows solo necesitamos modificar el archivo por cada proyecto que vayamos agregando, dicho archivo se encuentra en C:\Windows\System32\drivers\etc, el archivo que necesitamos modificar se llama hosts (sin extensiones), para ello editamos dicho archivo en modo administrador.

La estructura de dicho archivo es, procura no modificar nada más lo que vayamos agregando al final:

# Copyright (c) 1993-2009 Microsoft Corp.## This is a sample HOSTS file used by Microsoft TCP/IP for Windows.## This file contains the mappings of IP addresses to host names. Each# entry should be kept on an individual line. The IP address should# be placed in the first column followed by the corresponding host name.# The IP address and the host name should be separated by at least one# space.## Additionally, comments (such as these) may be inserted on individual# lines or following the machine name denoted by a '#' symbol.## For example:##      102.54.94.97     rhino.acme.com          # source server#       38.25.63.10     x.acme.com              # x client host# localhost name resolution is handled within DNS itself.#	127.0.0.1       localhost#	::1             localhost# Aquí agrega los proyectos que necesitas con el paso del tiempo con127.0.0.1 tu_proyecto.tu_dominio

Y listo, al acceder con tu navegador con tu URL ya puedes navegar tus proyectos de Laravel de lado de Windows y tener tu ambiende de desarrollo en WSL!