Running wp-env on WSL

Sabtu, 30 November 2024, 7:45 pm

Two new things I learned this month:

• Run #Linux on Windows using Windows Subsystem for Linux (WSL).
• Develop #Wordpress plugin using wp-env.

By using WSL, I can use Linux tools & environment on Windows without using virtual machine or container. It seamlessly integrated with the OS, just launch the WSL terminal and you’re ready to work.

Also for wp-env, since I develop WordPress plugins, the main advantage using wp-env over my previous setup is to be able to get started develop locally without configuring too many things.

• Previously whenever I wanted to develop a WP plugin, I’d host it directly on my blog, which is on production server. It’s risky, as in if I made some mistake, the website will become inaccessible to visitors.
• To develop locally, previously I setup local environment using XAMPP, which is Windows only. If wanted to use Mac or Linux, then I have to setup a different environment there.

That’s where wp-env become beneficial. This tool depends on #NodeJS & #Docker – which can be installed on all desktop OS – made it easier to get the local development environment started and running.

wp-env creates at least two main container – one for webserver (Apache), another for database server (MySQL), and several other containers for wp-cli and tests environment. We just need to run the wp-env command to start the dev environment, and then access the WordPress instance at http://localhost:8888.

To run wp-env on WSL however, there are some extra steps to be taken:

Use WSL’s NodeJS

If your Windows already installed NodeJS, when running wp-env on WSL terminal, it will use the Windows’ NodeJS, which has issue in recognizing path in WSL environment.

So we have to use WSL’s NodeJS to run wp-env. Install it using command sudo apt install nodejs npm. Then, in Windows Powershell, run wsl --shutdown to restart WSL.

wp-env require Docker service to be running

If you encounter wp-env reports that Docker is not running, eventhough you already run Docker Desktop, then need to change its settings:

Open Docker Desktop, go to Settings > Resources > WSL Integration > Enable integration with additional distros. Then click Apply & restart Docker Desktop.

Performance

Initially I put my WP plugin source code in Windows’ Documents folder (/mnt/c/Users/username/Documents). Then I created symlink to WSL user’s home folder. This cause wp-env containers to start up very slow, it took 15+ minutes to start the environments on my 6th gen Intel laptop.

It is a known performance bottleneck for WSL to read files outside of its filesystem, so it is better to put the source code directly in the user’s home folder (/home/username/Documents). This speeds up the start up to just about 2-3 minutes.

Now whenever I wanted to continue develop on different OS, whether Windows, Mac or Linux, I can just SVN update the source code, then run wp-env and quickly access WordPress at http://localhost:8888.

P.s: I tried to add phpMyAdmin container, it works using docker compose override method (docker-compose -f docker-compose.yml -f docker-compose.override.yml), but couldn’t figure out how to make it work with wp-env start|stop command.

#webdev