WordPress Development for Windows with WSL (part 4): Git, PHPStorm, xDebug and WP-CLI Integration

If you have reached this point, you have already completed the part 3 on the WordPress for Windows development guide with WSL. If you haven't done it yet, you're already late.

At this point we are already running our Apache server with its PHP and MariaDB database server.

To continue we are going to focus on the integration of some very necessary tools for WordPress development, which are:

Git, the world-renowned version control system.
PHPStorm, the best IDE for PHP development, whatever they say.
xDebug, the primary tool that every developer should use to debug their PHP code.
WP-CLI, if you don't know it, you should. If you know it and don't use it, start using it as soon as possible.

Important: as you may remember, Windows and WSL have separate file systems and for now WSL does not natively support running GUI applications. But this shouldn't be a problem, because any modern IDE already integrates with WSL2.

Install Git

If we have installed an Ubuntu distribution, it should be installed by default. To check it, launch in the Ubuntu console

git --version

If you get something like

git version 2.25.1

is that everything is correct. If not, we can install it with

sudo apt update
sudo apt install git

PHPStorm Integration

Integration is easy, as long as you have upgraded Windows 10 to version 2004 or higher. If this is not the case, check how to the WSL2 runtime requirements and upgrade your version of Windows with the Windows 10 Upgrade Assistant.

If you already have version 2004 or higher installed, you only have to open a project in PHPStorm indicating the WSL path where the files of your project are.

Ubuntu Terminal

Something that motivates me a lot is the amount of tools and panels that PHPStorm provides you without leaving the application. For this reason, I always like to integrate the Ubuntu console in the terminal, to have direct access to the terminal without leaving the application.

For it, inside PHPStorm, we follow the following steps:

Go to File > Settings > Tools > Terminal
In the Shell path field we only have to select the executable of the terminal, which is in C:\Windows\System32\wsl.exe
I also like to check Copy to clipboard on selection and Paste on middle mouse button click in Ubuntu style.

Database

If you have never used it before, the PHPStorm Database panel provides you with direct access to the database server. All you have to do is add a new connection:

In that button, add the project database and you will be able to access it directly, without having to use any other intermediate program. You can also raise consoles, run queries, examine the data, modify it... anything you want.

Git

When you have Git installed on WSL2, PHPStorm itself (VSCode does it too) integrates seamlessly with the Linux binary. Works like a charmander!

xDebug

And where does this go? Well, where our server is installed, in this case in our Ubuntu distribution:

sudo apt install php-xdebug

After installation, start or restart the Apache server (sudo service apache2 start Or sudo service apache2 reload) and executes php -v. You should see something like this:

Now comes an important step to perform the xDebug integration with PHPStorm on Windows. First you have to locate the xdebug.so:

cd usr/
find . -name xdebug.so

In my case, I was in /usr/lib/php/20190902/xdebug.so.

Next, we are going to look for our file php.ini.

cd etc/
find . -name php.ini

We go to the Apache2 directory and edit the file php.iniAdd the following lines at the end. Make sure that the path in zend_extension is the one we obtained in the previous step.

[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

The last step is to install the xDebug Helper extension for Firefox Or Chrome and configure it to work with PHPStorm as follows in its official documentation.

UPDATE: It hasn't even been a day and I already have to modify this part. The remote_host it is not 127.0.0.1. It turns out that WSL2 is running as a separate machine, which is not even on the same network as the Windows machine. Also, every time WSL2 restarts, its IP changes, so this configuration is invalid.

After going through the internet several times, I found the Workaround to automate the WSL2 IP registration.

First, we are going to export the IP of the WSL machine as an environment variable:

sudo vim /etc/apache2/envvars

At the end of this file, we add the following:

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

And finally, again in our php.ini, we leave the previous configuration as follows:

[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

And now everything would be ready.

WP-CLI

If you don't use WP-CLI yet, you don't know all the potential that this tool offers when developing your WordPress projects, not only for the amount of tasks that you can perform natively with it, but also for the potential it offers to create your own tasks and launch them via command line.

At this link you have all the necessary documentation for both installation and use, but let's focus on the installation process, which is really simple.

In your Ubuntu console, issue the following commands. The first one is to download the WP-CLI executable:

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

Then run this to check that it has downloaded correctly:

php wp-cli.phar --info

In order to be able to run WP-CLI from the console with the command wpWe are going to allow the file to be executable and we are going to move it to our user folder:

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

Finally, you execute wp --info to check that everything is correct. You should see a console output like this:

And that's all for now.

As I mentioned above, on the official WP-CLI site you have all the information about the tool as well as some very useful utilities that we are not going to go into for now, but we will see later.

Coming soon, Chapter 5: Tools and Tricks to Increase Productivity