Forem: truthseekers

How to Setup an ideal WordPress Development Environment

truthseekers — Thu, 02 Jul 2020 03:48:12 +0000

WordPress is not my primary development environment. I only go in when I need certain functionality or design fixes for my own site, and by far the most painful part is getting set up. (Maybe I'm just a N00b). The biggest problem I had with my former development environments was not being able to access the source code and poke around.

Learn to code with our beginner friendly tutorials on programming, Linux, Docker, and more

Sure, I can READ it on Github, but it's hard for me to figure out what's going on by just reading. I need to be able to interact with the WordPress source code. Also, being the large beast that WordPress has become, documentation can't keep up, so it's necessary to access the source code... So here's how I've been able to do that by setting up an "ideal WordPress Development Environment".

Edit: I spent way too many hours debugging NPM errors on a new windows machine to get this setup working. The solution I found here appears to be npm install --global --production windows-build-tools and if your install failed before doing this, you'll probably have to DELETE the $HOME/.node-gyp folder (when you install something that needs it, it will automatically be re-installed.

What you need:

WordPress-Develop Github Repository

Gutenberg Github Repository

Step 1. Setup the WordPress-Develop repository locally.

go through their instructions. Currently you just need Node.js and Docker installed and running. So do that and come back.

clone the wordpress-develop repository. I created a folder on my Desktop where the entire setup will go called "hello-wordpress" and then inside "hello-wordpress" is where I cloned the wordpress-develop repository. Then cd in and setup the environment as it explains in the readme:

mkdir hello-wordpress
cd hello-wordpress
git clone https://github.com/WordPress/wordpress-develop.git
cd wordpress-develop
npm install
npm run watch

Note that we skip a lot of instructions on the wordpress-develop docs page because we're going to be using Gutenberg for the Docker setup. If we were to run the other commands in the wordpress-develop then they would interfere with Gutenberg.

npm run watch is important because it gives us the "build" folder inside wordpress-develop that the gutenberg code relies on.

that's as far as we go in these instructions for now. Next step is to download and install Gutenberg Core.

Now change OUT of the wordpress-develop folder and back INTO hello-wordpress... Then clone gutenberg:

cd ../
git clone https://github.com/WordPress/gutenberg.git
cd gutenberg
npm install

Now we'll want to setup where our plugin code goes. Make another folder inside the "hello-wordpress" folder called "plugins", and create your plugins in there. Mine will be "my-cool-plugin" So here's my basic plugin code in this file: hello-wordpress/plugins/my-cool-plugin/my-cool-plugin.php

<?php
/**
 * Plugin Name: My cool plugin
 * Plugin URI: https://truthseekers.io
 * Description: cool plugin stuff
 * Author: John
 * Author URI: https://truthseekers.io
 */

That should be enough to activate our plugin.

Next, we need to "connect" our plugins folder with Gutenberg. We do that in .wp-env.override.json inside our gutenberg folder. This file doesn't exist by default (as of writing this) so we'll need to create it. (in the same level as the package.json file)

{
    "core": "../wordpress-develop/build",
    "plugins": [
        ".",
        "../plugins/my-cool-plugin"
    ]
}

The "core" line tells the Gutenberg plugin that the rest of the wordpress project is located in the wordpress-develop/build folder. That's where it will grab all the source...

Each element in the "plugins" array is a directory for each plugin that you want activated. So.. "." for the gutenberg plugin, and then the location of the plugin you're developing.

Almost done. Now we just need to go back to the gutenberg folder and start things up.

npx wp-env start
npm run dev

Now you can access the WP dashboard area by visiting localhost:8888 and use "admin" and "password" as the credentials. Go visit the "plugins" section to see your plugin is activated. To test, go to the "wordpress-develop" folder, and run a die statement in wp-includes/blocks.php

And refresh your admin area and hopefully you'll see it:

Now test Gutenberg code. In the gutenberg folder, inside packages/blocks/src/index.js run a console.log...

and you should see the results of your console.log inside the dev tools when you're in the gutenberg editor area.

When you're done coding, kill everything with CTRL+C to kill npm run dev.. Then npx wp-env stop to kill Gutenberg/Docker. Finally,

hit CTRL+C in wordpress-develop to kill wordpress-develop.

To start everything back up, npm run watch in wordpress-develop, then inside "gutenberg" run npx wp-env start and then npm run dev

You should have access to wp-cli utilities within the Gutenberg folder.

Don't miss our next tutorials!

Setup a basic Local PHP Development Environment in Docker

truthseekers — Sat, 27 Jun 2020 00:29:48 +0000

In this post we'll learn how to setup a basic local PHP development environment in Docker. We'll be using docker-compose and Dockerfile to achieve this. We'll use PHP, Apache, and Mysql. Setting up a comprehensive environment with things like task runners, composer, etc... will come in later tutorials.

Learn to code with our beginner friendly tutorials

If you just want the quick and dirty source code, then skip to the bottom. We're going to take this nice and slowly going step-by-step.

Pre-Requisites: Docker & Docker-compose installed.

First step: Get a simple PHP script to run with Dockerfile.

If you take a look at the PHP Docker docs you won't see anything about a docker-compose file, but we can figure out how to do it with what they do give us. At the very beginning they give us a simple Dockerfile setup. Let's use that for our Dockerfile in the root of our project directory: I'm calling my project "php-docker". Then inside make a Dockerfile with this code:

FROM php:7.4-cli
COPY . /usr/src/myapp
WORKDIR /usr/src/myapp
CMD [ "php", "./index.php" ]

This code is the setup to create the image we'll use. This setup pulls in PHP 7.4 with some command line stuff.

The COPY . /usr/src/myapp copies the contents of the current directory into /usr/src/myapp inside the Docker container. The next line: WORKDIR /usr/src/myapp sets the /usr/src/myapp as the "working directory", kind of like you would cd /to/your/project.

Then from inside the /usr/src/myapp folder we run the command $ php ./index.php where index.php is our script. So that means we need a PHP script. Let's create our index.php file inside the project directory like this:

<?php

echo "Hello from the docker container";

Now we can continue with their instructions, which is to build and run the docker image:

$ docker build -t my-php-app .
$ docker run -it --rm --name my-running-app my-php-app

The first command is going to build the image with the name "my-php-app" on your computer using the contents of the current directory. The second command prepares a container called "my-running-app based off the image we just created "my-php-app". We setup to run the index.php script, so our script runs in the command line. We should get something like this:

First step accomplished! But simple PHP scripts aren't very useful. Let's set this up on an Apache web server. If you scroll further down the documentation you'll see an "Image variants" section with one of them being php-apache. This image has Apache bundled with PHP. This will allow us to easily get our script running on a webserver and display the script results in a browser. Again, let's follow the directions. To run the Apache/php image WITHOUT a dockerfile, run this command: (Note the first line is for Linux/Mac users and the 2nd line is for the lonely Windows users

docker run -d -p 80:80 --name my-apache-php-app -v "$PWD":/var/www/html php:7.2-apache # This line for *nix users
docker run -d -p 80:80 --name my-apache-php-app -v C:\Users\fastp\Desktop\Code\tutorials\php-docker:/var/www/html php:7.2-apache   # For Windows users

This line is basically saying RUN the container and set the name as "my-apache-php-app. -p is to set the PORT mapping from our local machine to the port on the container. the left side is our local port, the right side is the port on the container. Then use -v to set the VOLUME, or... basically bind our present working directory to the /var/www/html folder. This essentially puts the contents of our current directory into the html directory on the container so our code can run inside it. At the end we define the image we build from, which is php:7.2-apache

Note that Windows doesn't have a $PWD command, so I had to manually put my path for this to work.

Okay, so we setup to have our script run on port 80, so go ahead and visit http://localhost:80 and you should see your script running in the browser.

PHP and docker-compose

Now let's start moving stuff into a docker-compose file, but first let's stop that container we just created. You can run a docker ps to get the container id and then run $ docker stop container_id but I'm just going to stop all containers like this:

docker stop $(docker ps -a -q)

Now create a docker-compose.yml file in the root of your project and put the following inside:

version: '3.1'

services:
  php:
    image: php:7.4-apache
    ports:
      - 80:80
    volumes:
      - ./src:/var/www/html/

The top line just sets the version number of docker-compose we're using. Then we have the "services" which is the list of containers to setup. We'll be giving this container the name of "php" so other containers can connect via that name. The "image" will be php:7.4-apache (even though our previous command line experiment used 7.2)

Then just like in our command line trial we're setting up the PORT mapping from 80 on our local machine to 80 on the container. Finally we'll stuff the contents of our ./src folder into the containers /var/www/html folder. Now let's move our script into the ./src folder on our local machine. My project structure now looks like this:

Now run docker-compose up -d from inside the project root and visit localhost:80 and see the script running n the browser. Because we're using volumes to stick our code in the container we should be able to change the script and have it update automatically. Give that a try.

Now let's shut down our container with docker-compose down.

The next step is to setup MySQL and Adminer (a DB access tool) Luckily their docs give us a docker-compose example so we don't have to think as much. We do need to modify the settings a tiny bit though because to connect PHP to MySQL we need to install a few missing pieces to our PHP environment. Here's what our docker-compose.yml file should look like now:

# Use root/example user/password credentials
version: '3.1'

services:
  php:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - 80:80
    volumes:
      - ./src:/var/www/html/

  db:
    image: mysql
    command: --default-authentication-plugin=mysql_native_password
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: example

  adminer:
    image: adminer
    restart: always
    ports:
      - 8080:8080

Our PHP service looks different because to connect PHP to the database using mysqli we need to install some mysqli stuff. That means we need to use a Dockerfile to customize our php7.4-apache image. So now we're using "build" to use the contents of the current directory (the dot) and using our Dockerfile to create the image. (Dockerfile image code below)

So now we've added a "db" service which is the mysql image. They use some weird command that has something to do with the password :-) and a restart policy. They also setup an environment variable which sets the root password to "example", so that's how we'll log in.

Then adminer gets the adminer image and sets that port mapping to 8080:8080. Just like in XAMPP how you go to localhost/phpmyadmin to get the database management tool, well... with this you go to localhost:8080 to get to the adminer db tool.

Let's also setup Mysqli to work inside our PHP container. Here's my Dockerfile code:

FROM php:7.4-apache
RUN docker-php-ext-install mysqli

I know that's a lot of code to process.... So let's take it line-by-line. The first line uses the php:7.4-apache image to build the container. The second line runs a command to install the mysqli extension inside the container. From here we have everything we need to have a super basic PHP development environment. So let's run docker-compose up -d again.

Now we should be able access Adminer and log in. I'll just use a few images to speed things up. Just note that the name of the "server" is "db" in our case based on the dockerfile. We could have named it "pie" or anything we wanted.

Select "Create Database"

Name it and hit save. I named mine "company1"

Then select "new item" to add a few items to your table.

Now we just need the PHP to connect to our database. This isn't a PHP tutorial so I won't explain it all, but it just connects to our database and runs some queries and prints them on the screen. The important part is the third line that connects MySQL to PHP.

<?php

echo "Hello from the docker yooooo container";

$mysqli = new mysqli("db", "root", "example", "company1");

$sql = "INSERT INTO users (name, fav_color) VALUES('Lil Sneazy', 'Yellow')";
$result = $mysqli->query($sql);
$sql = "INSERT INTO users (name, fav_color) VALUES('Nick Jonas', 'Brown')";
$result = $mysqli->query($sql);
$sql = "INSERT INTO users (name, fav_color) VALUES('Maroon 5', 'Maroon')";
$result = $mysqli->query($sql);
$sql = "INSERT INTO users (name, fav_color) VALUES('Tommy Baker', '043A2B')";
$result = $mysqli->query($sql);


$sql = 'SELECT * FROM users';

if ($result = $mysqli->query($sql)) {
    while ($data = $result->fetch_object()) {
        $users[] = $data;
    }
}

foreach ($users as $user) {
    echo "<br>";
    echo $user->name . " " . $user->fav_color;
    echo "<br>";
}

Now here is the result of our code when we run it in the browser. :

Persistent Mysql using Volumes:

You're probably not going to build your entire app in one sitting so we'll want to use volumes for persistent data like the stuff inside your database. Without a volume your data will be erased every time you stop the containers. In order to do that you just need to add a few more lines to your code. The code from db: and down will look like this: (The important lines are at the end of the "db" section where it says volumes, and the VERY end where it says "volumes"

  db:
    image: mysql
    command: --default-authentication-plugin=mysql_native_password
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: example
    volumes:
      - mysql-data:/var/lib/mysql

  adminer:
    image: adminer
    restart: always
    ports:
      - 8080:8080

volumes:
  mysql-data:

Note the indentation. volumes will be at the same indentation level as "services".

I won't go deep into volumes right now. (To be honest I'm no expert yet lol) but in this code we're setting up a volume on our system (managed by docker) called mysql-data. All our database tables and junk gets stored inside the "mysql-data". Then we map that data to /var/lib/mysql on the container.

So that's pretty much it y'all. If you want to get in some practice you should try to swap out MySQL for Postgres. Or Apache for Nginx, or try to install some other tools like Composer using the Dockerfile. Please let me know if the article helped or not. Would love some feedback so I can make these better.

Here's the source code

Learn to code with our beginner friendly tutorials