Setting Up a WordPress Development Environment with DDEV

#wordpress #development #docker #devtools

DDEV is a powerful tool that simplifies the process of setting up local development environments for PHP applications, including WordPress. In this guide, I'll walk you through the steps to install DDEV and configure a WordPress development environment.

Requirements:

DDEV
Docker

Once you have this, create your WordPress project directory:

mkdir wp-test-site

Into your directory run

ddev config

Then, choose the project name and the project type, which in this case will be WordPress. Run

ddev start

You will see the output with the path to access your WordPress installation: https://wp-test.ddev.site https://127.0.0.1:port

Access through your choose browser and finish WordPress install.

Simple as that! (Or should be).

Seems kind of dumb for looking at it now, but on the first time I came across it a few months ago, while setting the dev environment for a new project I was assigned to, in the agency I worked, I got stuck with the error: 403 forbidden nginx for quite some time.

It took me a few to me realize the thing was: there were no WordPress core files into my root project folder.

The solution?

Download the WordPress files to the root folder, duuh.But, it not practical do it everytime I had to start the project. So, my plan here:

Edit the config.yml on .ddev folder

Within the root project folder, find the ./ddev/config.yml file and add this:

hooks:
  post-start:
    - exec: "curl -O https://wordpress.org/latest.tar.gz"
    - exec: "tar -xzf latest.tar.gz --strip-components=1"
    - exec: "rm latest.tar.gz" on config.yml.

What this does is:

post-start: This hook runs commands after the DDEV project starts.

And the commands:

curl -O https://wordpress.org/latest.tar.gz: Downloads the latest version of WordPress.
tar -xzf latest.tar.gz --strip-components=1: Extracts the contents of the tar file into the current directory, removing the top-level directory from the extracted files.
rm latest.tar.gz: Cleans up by removing the downloaded tar file.

You can also add a conditional check to verify if the WordPress core files are present, otherwise, everytime you run ddev stop and then ddev start again, it will download the WordPress core files all over again, we don't need that.

Command updated with conditional checks:


hooks:
  post-start:
      - exec: '[ ! -f wp-load.php ] && (curl -O https://wordpress.org/latest.tar.gz && tar -xzf latest.tar.gz --strip-components=1 && rm latest.tar.gz) || echo "WordPress core files already present, skipping download."'

This ensures that the hooks only run the installation if WordPress is not already present. By run ddev start on your terminal, if the WordPress core files are present, you will see the message "WordPress core files already present, skipping download." instead.

Finally, start Your DDEV Project

Run:

ddev start

The first time, may take more time, depending on your internet connection, as it will need to install the core files. But the next times, will be easy peasy.

Important Note: Make sure to run ddev start from your project root directory, where the config.yaml file is located.

It's incredibly useful to share projects among teams, we can also add some other features like ddev pull, to pull the DB of a staging website your team is working for example. You can a*dd environment variables and so on*, but this is out of the scope of this article, which was simply to explain how to start a DDEV environment in a few steps.

I had an old docker environment I developed for personal use over time, wrote about it here. It was a such improvement for me back then (moving from ancient XAMPP), but now, it seems so poor compared to DDEV lol.

That's it for now. Start work with DDEV and Happy coding!