My WordPress Docker Setup in 2024

Web development is more complicated now than it was when WordPress first came on the scene in 2003. Now theme and plugin development involves tools like Composer, NPM, Javascript Frameworks, Docker and CI/CD tools (just to name a few). I’ve been spending a lot of time trying different things in my quest to create the perfect development set up for WordPress. I’m not quite there yet, but I’m making good progress and today I’ll share my WordPress Docker setup so far.

Docker

Almost every project I work on involves Docker in one or way or another. When it comes to WordPress Docker development I will sometimes create my own docker-compose.yml file which spins up Nginx, WordPress, Mysql and Mailhog containers. This is when I need a very customizable setup. Perhaps in the future I will go into this setup in more detail. Most of the time however, wp-env is a great tool for the job.

WP-env is a package that takes care of the Docker setup for you. The setup can be customized by using a wp-env.json file. You can learn more by reading their documentation. If you want to see a basic example of how I use WP-env for theme development, you can check this repo here.

Composer

If you took a look at my repo you will see that I use Composer to handle installing plugins. Using Composer requires a little bit of custom setup which can vary based on what plugins you are using. If you use Pro versions of plugins such as Advanced Custom Fields or WP Migrate DB Pro, you will need to checkout their documentation on how to install them via Composer. Many other free plugins are available through the https://wpackagist.org repository. You can also see that I set the location to install plugins in the extras.installer-paths option.

Composer can also be used for installing themes. This is helpful if you manage a site where you use a child theme. You can really strip down the amount of code you need to store in your own Git repository, since you can install everything you need locally with Composer.

Webpack

WordPress comes with React installed out of the box (although it is referred to as wp-element). If you like to use React in your projects, you can take advantage of that and not install it as an additional package. In your Webpack config you can add them as externals.

externals: {
    "react": "React",
    "react-dom": "ReactDOM"
}

Next, when you call wp_enqueue_script, be sure to add it to your dependency array like so:

wp_enqueue_script('your-handle-js', '/path/to/file'], ['wp-element'], 1.0, true);

Finally, to use it in your Javascript code you can do something like this.

const { createRoot, useState, useEffect } = wp.element;

const App = () => (
    <div>My App</div>
);

const renderTo = document.getElementById(`app`);
if (renderTo) {
  const root = createRoot(renderTo);
  root.render(<App />);
}

Obviously this is just a bare-bones example and isn’t meant to be a tutorial. I also currently use Sass in my WordPress development setup, which is also handled by Webpack. Perhaps I’ll go into my Webpack setup for WordPress in more depth in the future. Unless if I switch to something else in the future… (see below).

Makefile and Bash

Makefile and Bash scripts are great for automating things, and if you haven’t taken the time to play around with them, I recommend you do so! I use a Makefile for simple repetitive scripts that I run often, such as updating my Algolia indices or encrypting/decrypting my environment variables with SOPS. I also have a bash script that I use for packaging up my distributions. It grabs all the necessary files and copies them to a distributions folder for the current version I’m working on. It then creates a .zip file I can upload to update my theme (I know… manually upload? Ick! But read on my friend…).

Future Improvements

As I mentioned in the beginning, I’m not 100% happy with where my set up is at the moment. There are always improvements to be made! Below are some of the ones I want to tackle first.

CI/CD

In my limited free time I have been looking into options for using my distribution script for deploying updates for my themes and plugins automatically. I have used GitHub actions in the past, and I believe there is a way I can accomplish this. I just haven’t gotten around to figuring it out yet.

Vite?

I first learned about Vite when I was working on a new Laravel project and saw it was included by default, replacing the Laravel Mix I had been familiar with so far. It piqued my curiosity and it looks like a real slick tool for local development. I just need to play around with it and learn more about how it works before I can work it into my WordPress theme development set up.