Desarrollo WordPress para Windows con WSL (parte 4): Integración de Git, PHPStorm, xDebug y WP-CLI

Inicio / Desarrollo web / Desarrollo WordPress para Windows con WSL (parte 4): Integración de Git, PHPStorm, xDebug y WP-CLI
21febrero 2021

Si has llegado hasta aquí es que ya has completado la parte 3 sobre la guía de desarrollo WordPress para Windows con WSL. Si aún lo lo has hecho, ya estás tardando.

En este punto en el que nos encontramos ya tenemos funcionando nuestro servidor Apache con su PHP y el servidor de bases de datos de MariaDB.

Para continuar nos vamos a centrar en la integración de algunas herramientas muy necesarias para el desarrollo con WordPress, que son:

  • Git, el mundialmente conocido sistema de control de versiones.
  • PHPStorm, el mejor IDE para desarrollar con PHP, digan lo que digan.
  • xDebug, la herramienta primordial que todo desarrollador debería usar para depurar su código PHP.
  • WP-CLI, si no lo conoces, deberías. Si lo conoces y no lo usas, empieza a hacerlo cuanto antes.

Importante: como recordarás, Windows y WSL tienen sistemas de archivos separados y por ahora WSL no permite, de forma nativa, ejecutar aplicaciones con interfaz gráfica. Pero esto no debería suponernos ningún problema, porque cualquier IDE moderno ya se integra con WSL2.

Instalar Git

Si hemos instalado una distribución de Ubuntu, debería venir instalado por defecto. Para comprobarlo, lanza en la consola de Ubuntu

git --version

Si te aparece algo como

git version 2.25.1

es que todo está correcto. Si no es así, lo podemos instalar con

sudo apt update
sudo apt install git

Integración con PHPStorm

La integración es sencilla, siempre y cuando hayamos actualizado Windows 10 a la versión 2004 o superior. Si no es el caso, revisa cómo los requisitos de ejecución de WSL2 y actualiza tu versión de Windows con el Asistente de actualización de Windows 10.

Si ya tienes la versión 2004 o superior instalada, sólo has de abrir un projecto en PHPStorm indicando la ruta de WSL donde estén los archivos de tu proyecto.

Terminal de Ubuntu

Algo que me motiva mucho es la cantidad de herramientas y paneles que te provee PHPStorm sin salir de la aplicación. Por ello, siempre me gusta integrar la consola de Ubuntu en la terminal, para tener acceso directo a la terminal sin salir de la aplicación.

Para ello, dentro de PHPStorm, seguimos los siguientes pasos:

  1. Vamos a File > Settings > Tools > Terminal
  2. En el campo Shell path sólo hemos de seleccionar el ejecutable de la terminal, que está en C:\Windows\System32\wsl.exe
  3. Además me gusta marcar Copy to clipboard on selection y Paste on middle mouse button click al más puro estilo Ubuntu.

Base de datos

Si no lo has usado nunca, el panel de Database de PHPStorm te provee un acceso directo al servidor de base de datos. Sólo has de añadir una nueva conexión:

En ese botón, añade la base de datos del proyecto y podrás acceder a ella directamente, sin tener que usar ningún otro programa intermedio. También puedes levantar consolas, ejecutar consultas, examinar los datos, modificarlos… todo lo que quieras.

Git

Cuando tengas Git instalado en WSL2, el propio PHPStorm (VSCode también lo hace) se integra perfectamente con el binario de Linux. Works like a charmander!

xDebug

¿Y esto donde va? Pues donde esté instalado nuestro servidor, en este caso en nuestra distribución de Ubuntu:

sudo apt install php-xdebug

Tras la instalación, arranca o reinicia el servidor Apache (sudo service apache2 start o sudo service apache2 reload) y ejecuta php -v. Deberías ver algo como esto:

Ahora viene un paso importante para realizar la integración de xDebug con PHPStorm en Windows. Primero hay que localizar el archivo xdebug.so:

cd usr/
find . -name xdebug.so

En mi caso, estaba en /usr/lib/php/20190902/xdebug.so.

Posteriormente, vamos a buscar nuestro archivo php.ini.

cd etc/
find . -name php.ini

Nos vamos al directorio de Apache2 y editamos el archivo php.ini, añadiendo al final del todo las siguientes líneas. Asegúrate de que la ruta en zend_extension es la que hemos obtenido en el paso anterior.

[Xdebug]
zend_extension = "/usr/lib/php/20190902/xdebug.so"
xdebug.idekey = "PHPSTORM"
xdebug.remote_enable = 1
xdebug.remote_host = "127.0.0.1"
xdebug.remote_port = 9000

El último paso es instalar la extensión xDebug Helper para Firefox o Chrome y configurarla para trabajar con PHPStorm como se explica en su documentación oficial.

ACTUALIZACIÓN: No ha pasado ni un día y ya tengo que modificar esta parte. El remote_host no es 127.0.0.1. Resulta que WSL2 se ejecuta como una máquina aparte, que ni siquiera está en la misma red de la máquina Windows. Además, cada vez que WSL2 se reinicia, su IP cambia, por lo que esta configuración no es válida.

Tras pasarme internet varias veces, he encontrado el Workaround para automatizar el registro de la IP de WSL2.

Primero, vamos a exportar como variable de entorno la IP de la máquina de WSL:

sudo vim /etc/apache2/envvars

Al final de este archivo, añadimos lo siguiente:

export CURRENT_IP="$(cat /etc/resolv.conf | grep nameserver | awk '{print $2; exit;}')"

Y por último, de nuevo en nuestro php.ini, dejamos la configuración anterior tal que así:

[Xdebug]
zend_extension = "/usr/lib/php/20190902/xdebug.so"
xdebug.idekey = "PHPSTORM"
xdebug.remote_enable = 1
xdebug.remote_host = ${CURRENT_IP}
xdebug.remote_port = 9000

Y ahora sí que estaría todo listo.

WP-CLI

Si aún no usas WP-CLI es que no conoces todo el potencial que te ofrece esta herramienta a la hora de desarrollar tus proyectos con WordPress, no sólo por la cantidad de tareas que de forma nativa puedes llevar a cabo con ella, sino por el potencial que ofrece para crear tus propias tareas y lanzarlas por línea de comandos.

En este enlace tienes toda la documentación necesaria tanto para la instalación como para su uso, pero vamos a centrarnos en el proceso de instalación, que es realmente sencillo.

En tu consola de Ubuntu, lanza los siguientes comandos. El primero es para descargar el ejecutable de WP-CLI:

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

Después, ejecuta este para comprobar que se ha descargado correctamente:

php wp-cli.phar --info

Para poder ejecutar WP-CLI desde la consola con el comando wp, vamos a permitir que el archivo sea ejecutable y lo vamos a mover a nuestra carpeta de usuario:

chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp

Por último, ejecuta wp --info para comprobar que todo está correcto. Deberías ver una salida de consola tal que así:

Y eso es todo por ahora.

Como he comentado más arriba, en el sitio oficial de WP-CLI tienes toda la información relativa a la herramienta así como algunas utilidades muy útiles en las que por ahora no vamos a entrar, pero que veremos más adelante.

Próximamente, el capítulo 5: Herramientas y trucos para aumentar la productividad