wp-plugin-devcontainer

A simple dev container template for WordPress plugin development.

Features

• WP-CLI
• Composer
• Apache2
• Mock SMTP (Mailpit)
• PHP_CodeSniffer
• Ready to use NodeJS (NVM)
• Ready to use Playwright or Selenium (novnc)
• Xdebug
• phpinfo (http://localhost/phpinfo.php)
• adminer (http://localhost/adminer.php)

How to use

Important

Strongly recommend: if you use Linux, your uid should be 1000. Else docker may cause permission problems.

1. Install requirements:

   • Visual Studio Code
   • Dev Containers extension
   • Docker environment (Linux PC is recommend)

   Remote Development:

   1. Prepare Linux PC. Recommended RAM is 4GB or higher.
   2. Install requirements in your terminal PC:
      • Remote Development Extension Pack
   3. Configure server.
      • Install docker.
      • Setup Remote Tunnels or SSH (configure your router for forwarding ssh port).
      • Setup WoL or remote power-on method, if you need.
   4. Connect to server.
   5. Recommended: Install Container Tools in server.

2. Create your project directory.

3. Open terminal and cd /path/to/your-project.

4. Clone this repository. git clone https://github.com/chrono-meter/wp-plugin-devcontainer.git .devcontainer

5. Create sub directories. mkdir mysql wp-content

6. Open your project directory in Visual Studio Code.

7. Edit wp-config-extra.php, devcontainer.json, docker-compose.yml, wordpress-base.Dockerfile or others as necessary.

8. Open dev container: Ctrl+Shift+P (Command pallete) → Dev Containers: Open Folder in Container....

9. Check or open WordPress via forward port: Ctrl+Shift+P (Command pallete) → Forward a Ports → WordPress (80) → open link in Forwarded Address column

10. Login into WordPress. Default username is admin, password is password (If not set by environment variable).

Mock SMTP

To see emails that sent from WordPress, Ctrl+Shift+P (Command pallet) → Forward a Ports → Find forwarded 8025 port and open it in your browser.

Mailpit

See https://mailpit.axllent.org/.

MailHog

To check emails in your test, use MailHog API v1 or MailHog API v2. There are NodeJS and PHP client libraries.

References

• WordPress Image
  • Environment variables
  • docker-entrypoint.sh
  • wp-config-docker.php
• devcontainer.json
• devcontainer service in .devcontainer/common.yml
• docker-compose.yml

Tips

• Enter dev container console (shell): Shift+Esc or Ctrl+Shift+@ (new console)
• Forward a Ports: Ctrl+Shift+P (Command pallet) → Forward a Ports
• Exit/Reopen/Rebuild dev container: Ctrl+Shift+P (Command pallet) → type reopen
• Select and run task: Shift+Alt+F10 → Select task
• Run test: Ctrl+Shift+P (Command pallet) → Tasks: Run Test Task
• Run build tasks: Ctrl+F9
• Find your favorite key bindings.
• Reload apache (if you don't want to restart dev container): Run /etc/init.d/apache2 reload in dev container's console

Xdebug

1. Bookmark javascript:(function() {document.cookie='XDEBUG_TRIGGER='+'VSCODE'+';path=/;';document.location.reload();setTimeout(function() {document.cookie='XDEBUG_TRIGGER='+''+';expires=Mon, 05 Jul 2000 00:00:00 GMT;path=/;';}, 100);})()
2. Set breakpoint.
3. Start Xdebug: Shift+Alt+F9 or Run and Debug in Left sidebar → Listen for Xdebug
4. Open WordPress page that you want to debug.
5. Open bookmarked JavaScript.

Why don't my Xdebug breakpoints work?

Do you get frustrated when your breakpoints don't work in Xdebug? First, calm down, before you waste your precious time.

1. Install browser extension, then enable on your site.
2. Unfortunately, the breakpoint that you set will be never reached on your request or execute condition. Set new breakpoint on prior line or upper function calling.
3. Do ping `php -r 'echo ini_get("xdebug.client_host");'` to check Xdebug client is reachable.
4. Finally, try to call \xdebug_break(); on the breakpoint. If this method doesn't work then your Xdebug configuration is broken.

I can't access http://localhost or https://localhost.

Please check if another vscode or devcontainer is occupying the port 80/443.

wp db commands failed.

Add option --defaults for avoid wp db commands add --no-defaults option.

NOTE: This devcontainer adds ssl-verify-server-cert=FALSE into /etc/mysql/conf.d/ignore-ssl.cnf.

User Role Editor activation failure via wp-cli installation.

There are lacking caps:

• ure_create_roles
• ure_delete_roles
• ure_create_capabilities
• ure_delete_capabilities
• ure_manage_options # URE_KEY_CAPABILITY
• ure_reset_roles

So, we need to activate it manually:

wp plugin install --activate user-role-editor
wp eval 'do_action("activate_user-role-editor/user-role-editor.php");'

Links

• https://wordpress.org/plugins/tags/debug/
• https://wordpress.org/plugins/tags/development/