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 [email protected]: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
Where is everything?
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 protected]: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:
$cd wordpress-develop && git pull && cd ../gutenberg && git pull
If you want pull in the latest Docker containers:
$ npm runenv:pull
No comments yet.
Leave a Comment
November’s Beaver Moon
According to Almanac.com, this is the time of year when beavers begin to take shelter in their lodges, having laid up sufficient food stores for the long winter ahead. During the fur trade in North America, it was also the season to trap beavers for their thick, winter-ready pelts.
October’s Hunter’s Moon
According to Almanac.com, it is believed that this name originates from the fact that it was a signal for hunters to prepare for the upcoming cold winter by going hunting. This is because animals were beginning to fatten up in preparation for the winter season. Moreover, since fields had recently been cleared out under the […]
Brightening the Frame: How Gain Maps Elevate HDR Photography
Greg explores the vibrant world of High Dynamic Range (HDR) photography enhanced by Gain Maps