README.md

wp-plugin-devcontainer

A simple dev container template for WordPress plugin development.

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 Docker for Visual Studio Code in server.

2. Clone this repository. git clone https://github.com/chrono-meter/wp-plugin-devcontainer.git YOUR-PROJECT-NAME

3. Open cloned folder named YOUR-PROJECT-NAME in Visual Studio Code.

4. Edit devcontainer-docker-compose-options.yml, and edit test-docker-compose-options.yml.

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

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

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

Dev container settings

Dev container is inherited from WordPress official image.

This container execute following steps on startup:

1. Build image. See .devcontainer/wordpress-base.Dockerfile.

   1. Configure user settings for www-data console operation.
   2. Configure "php.ini".
   3. Install composer.
   4. Install WP-CLI.
   5. wp core download like operation.
   6. Set default user as www-data.
   7. Set default directory as /var/www/html.
   8. Install Xdebug.
   9. Install phpinfo() file, location is http://localhost:80/phpinfo.php.
   10. Install Adminer, location is http://localhost:80/adminer.php.

2. Wait for MySQL ready.

3. Configure wp-config.php.

4. wp core install with environment variables.

5. Run shell script file for WordPress first installation. Set $WORDPRESS_SETUP_SCRIPT environment variable.

Mailhog

Dev container's smtp environment is provided by Mailhog.

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.

To check emails in your test, use MailHog API v1 or MailHog API v2.

References

• WordPress Image
  • Environment variables
  • docker-entrypoint.sh
  • wp-config-docker.php
• .devcontainer/devcontainer.json
• devcontainer service in .devcontainer/common.yml
• .devcontainer/devcontainer-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.

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/

todo: Test envinronment settings

• .devcontainer/run-test.sh
• test-docker-compose-options.yml
• .devcontainer/test-docker-compose.yml
• .devcontainer/common.yml