Docker + wordpress + xdebug + webpack live-reload (css,js,php)

Description of installation and use of Docker and Docker Compose to create a temporary environment for creating a new wordpress theme in vscode. The environment consist of:

wordpress:latest
XDebug
mysql 5.7
phpmyadmin
webpack 5

You should also install the plugin PHP Debug

Each change in the scss/js files loads the generated css and js into wordpress and automatically refreshes the page view.

Main folders are:

.vscode
└── launch.json

listen for XDebug

config
├── mysqldump.js
├── postcss.config.js
├── webpack.common.js
├── webpack.dev.js
└── webpack.prod.js

webpack, postcss and mysqldump - the ability to do a database dump from the command line yarn dump

database

database always used when starting the environment

docker
└── wordpress
    └── wordpress.Dockerfile

configuration for wordpress and xdebug

dump

folder into which the database is being dumped yarn dump

frontend
├── images
├── js
│   ├── index.js
│   └── post.js
└── scss
    ├── global.scss
    ├── index.scss
    ├── normalize.scss
    └── post.scss

the folder contains scss/js files that are compiled and saved in the folder wp-content/themes/assets/(css|js)

wp-content
├── themes
│   ├── newTemplate
│   │   ├── assets
│   │   │   ├── css
│   │   │   └── js
│   │   ├── inc
│   │   │   └── themename_styles.scripts.php
│   │   ├── 404.php
│   │   ├── footer.php
│   │   ├── functions.php
│   │   ├── header.php
│   │   ├── index.php
│   │   ├── sidebar.php
│   │   └── style.css
└── ...

new template, the most important file themename_styles.scripts.php he gets the css and js generated and places it in a wordpress template

VSCODE + XDebug

Build the application

Install the Docker, manual can be found here -> Docker. Linux users must also install Docker Compose separately.

Clone the repo and install dependencies

git clone https://github.com/tomik23/docker-wordpress.git
cd docker-wordpress
yarn

How to start the process of building the environment

In the created docker-wordpress folder there is docker-compose.yml Start the console and ...

docker-compose up

all dependencies will be incurred, this may take a while.

yarn down

all docker containers will be removed

yarn dev

runs the development environment at http://localhost:3000, js/css files are generated and loaded into wordpress in the folder wp-content/themes/assets/(css|js)

yarn prod

finally generated css/js files with separate portions, in the same folder as dev wp-content/themes/assets/(css|js), but this time they are compressed

yarn dump

dumps the database,

Additional information

wordpress http://localhost:3000
wp-admin http://localhost/wp-admin (user/password test)
phpMyAdmin http://localhost:8001 (user root, password test)

Docker Compose

Example configuration file docker-compose.yml:

version: '3.7'
services:

  db:
    image: mysql:5.7
    container_name: mysql
    volumes:
      - ./database:/docker-entrypoint-initdb.d
    ports:
      - 3306:3306
    restart: on-failure
    environment:
      MYSQL_ROOT_PASSWORD: test
      MYSQL_DATABASE: wp

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    container_name: phpmyadmin
    depends_on:
      - db
    ports:
      - 8001:80
    environment:
      MYSQL_ROOT_PASSOWRD: test

  app:
    container_name: wordpress
    build:
      context: ./docker/wordpress/
      dockerfile: wordpress.Dockerfile
    depends_on:
      - db
    links:
      - db:mysql
    ports:
      - 80:80
    restart: always
    volumes:
      - ./wordpress:/var/www/html
    environment:
      WORDPRESS_DB_NAME: wp
      WORDPRESS_DB_USER: root
      WORDPRESS_DB_PASSWORD: test
      WORDPRESS_DEBUG: 1
      XDEBUG_CONFIG: remote_host=host.docker.internal

Visual Studio Code

Example configuration file .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for XDebug",
      "type": "php",
      "request": "launch",
      "port": 9000,
      "pathMappings": {
        "/var/www/html": "${workspaceFolder}"
      },
    }
  ]
}

tomickigrzegorz/docker-wordpress-xdebug