Setup a Local WordPress Development Environment on Docker
December 17, 2019
As I continue to explore Docker, this post will serve as my notes. I assume assume you already have the following technologies on your computer or know how to install them:
$ git clone firstname.lastname@example.org:WordPress/wordpress-develop.git
$ cd wordpress-develop && npm i
Start Docker containers:
$ npm run env:start
$ npm run env:install
Build WordPress assets:
$ npm run build:dev
Once you’re up and running, you can view the local instance of WordPress: http://localhost:8889/
Logging into WordPress is easy enough:
You can also open VS Code and inspect the file and directory structure. You should see something similar:
├── src│ ├── js│ ├── wp-admin│ ├── wp-content│ └── wp-includes├── tests│ ├── e2e│ ├── phpunit│ └── qunit└── tools├── local-env└── webpack├── .editorconfig├── .env├── .gitignore├── etc....
/src directory is where WordPress is located. Here, you can work as you normally did using other local development applications like XAMPP, MAMP, or Local by Flywheel.
/tests directory houses all unit tests used by @wordpress/scripts. You can run tests using NPM.
/tools and root directory are where the scripts for setting up Docker, along with other development related configs are located. You can ignore those.
Watch for changes:
$ npm run watch
Run PHP unit tests:
$ npm run test:php
$ npm run test:e2e
$ npm run env:cli
Note: Where the documentation mentions running
npm run env:cli instead. For example,
npm run env:cli scaffold plugin my-plugin --activate
Check out all the useful WP-CLI commands.
View Docker log files:
$ npm run env:logs
Pull the latest versions of containers:
$ npm run env:pull
Stop the containers:
$ npm run env:stop
Reset the containers:
$ npm run env:reset && npm run env:start
Note: this will destroy the Docker containers and create new ones. Make sure you back up your data first!
Pruning dangling Docker stuffs:
$ docker system prune
Learn more about cleaning up dangling Docker containers, images, volumes, and networks.
If you want to contribute to the development of Gutenberg, connecting it to your new local is very easy.
Clone Gutenberg in a new directory outside of
$ git clone email@example.com:WordPress/gutenberg.git && cd gutenberg
$ npm i && npm run build
Set the path to WordPress:
$ export WP_DEVELOP_DIR=../wordpress-develop
Connect Gutenberg and WordPress:
$ npm run env connect
If you open up the WordPress dashboard, you should now see the Gutenberg plugin, tests, and example blocks.
Because both WordPress and Gutenberg are version controlled, you can simply use
git pull to bring in the latest changes:
If you want pull in the latest Docker containers:
$ npm run