From 6db8a067183272e5a722a4a994058012c884f86f Mon Sep 17 00:00:00 2001 From: Alex Castillo Date: Thu, 30 Apr 2026 17:32:15 +0000 Subject: [PATCH 1/5] fix node direct download to official install update devcontainer.json configuration to fit new style --- .devcontainer/Dockerfile | 7 +------ .devcontainer/devcontainer.json | 26 +++++++++++++++----------- 2 files changed, 16 insertions(+), 17 deletions(-) diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile index 1acec81..03db84a 100644 --- a/.devcontainer/Dockerfile +++ b/.devcontainer/Dockerfile @@ -9,14 +9,9 @@ RUN a2enmod rewrite #We don't inherit from it becase it has a VOLUME that causes issues RUN set -eux; \ apt-get update; \ - apt-get install -y --no-install-recommends ghostscript git less ssh-client mariadb-client; \ + apt-get install -y --no-install-recommends ghostscript git less ssh-client mariadb-client nodejs npm; \ rm -rf /var/lib/apt/lists/* -# install Node.js -RUN curl -sL https://deb.nodesource.com/setup_12.x | bash - ; \ - apt-get install -y nodejs; \ - rm -rf /var/lib/apt/lists/*; - # install the PHP extensions, including XDebug RUN set -ex; \ apt-get update; \ diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index b1661ef..dd7be9e 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -9,18 +9,22 @@ "workspaceFolder": "/var/www/html/wp-content/plugins/plugin-dev", //"workspaceFolder": "/var/www/html/wp-content/themes/theme-dev", - // Set *default* container specific settings.json values on container create. - "settings": { - "terminal.integrated.shell.linux": "/bin/bash", - "php.suggest.basic": false // avoids duplicate autocomplete - }, + "customizations": { + "vscode": { + // Set *default* container specific settings.json values on container create. + "settings": { + "terminal.integrated.shell.linux": "/bin/bash", + "php.suggest.basic": false // avoids duplicate autocomplete + }, - // Add the IDs of any extensions you want installed. - "extensions": [ - "felixfbecker.php-pack", - "wordpresstoolbox.wordpress-toolbox", - "johnbillion.vscode-wordpress-hooks" - ], + // Add the IDs of any extensions you want installed. + "extensions": [ + "felixfbecker.php-pack", + "wordpresstoolbox.wordpress-toolbox", + "johnbillion.vscode-wordpress-hooks" + ] + } + }, // Sets up WordPress on container start. "postCreateCommand": ".devcontainer/wp-setup.sh", From 1c501f764065380f1fb22b0798732226190fe8d3 Mon Sep 17 00:00:00 2001 From: Alex Castillo Date: Thu, 30 Apr 2026 18:34:50 +0000 Subject: [PATCH 2/5] generate user taked from the host --- .devcontainer/Dockerfile | 12 +++++++++--- .devcontainer/devcontainer.json | 3 ++- .devcontainer/docker-compose.yml | 7 ++++++- 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile index 03db84a..924b308 100644 --- a/.devcontainer/Dockerfile +++ b/.devcontainer/Dockerfile @@ -58,9 +58,15 @@ WORKDIR /tmp RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" \ && php composer-setup.php --quiet --install-dir=/usr/local/bin --filename=composer -#add vscode user -RUN useradd -ms /bin/bash vscode \ - && usermod -aG www-data vscode +ARG HOST_UID=1000 +ARG HOST_GID=1000 +ARG HOST_USER=vscode + +#add user using host UID/GID and username when provided +RUN groupadd -g ${HOST_GID} hostgroup || true && \ + getent group ${HOST_GID} >/dev/null 2>&1 || groupadd -g ${HOST_GID} hostgroup || true && \ + id -u ${HOST_USER} >/dev/null 2>&1 || useradd -m -u ${HOST_UID} -g ${HOST_GID} -s /bin/bash ${HOST_USER} || true && \ + usermod -aG www-data ${HOST_USER} || true WORKDIR /var/www/html USER www-data diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index dd7be9e..182070a 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -28,5 +28,6 @@ // Sets up WordPress on container start. "postCreateCommand": ".devcontainer/wp-setup.sh", - "remoteUser": "vscode" + "remoteUser": "${localEnv:USER}", + "updateRemoteUserUID": true } diff --git a/.devcontainer/docker-compose.yml b/.devcontainer/docker-compose.yml index 01ebaca..1f8a11b 100644 --- a/.devcontainer/docker-compose.yml +++ b/.devcontainer/docker-compose.yml @@ -1,7 +1,12 @@ version: '3' services: wordpress: - build: ./ + build: + context: ./ + args: + HOST_UID: ${HOST_UID:-1000} + HOST_GID: ${HOST_GID:-1000} + HOST_USER: ${USER:-vscode} ports: - 8080:80 depends_on: From 2c45441522e35242971c10a60ac9c0b9b636761d Mon Sep 17 00:00:00 2001 From: Alex Castillo Date: Thu, 30 Apr 2026 18:42:07 +0000 Subject: [PATCH 3/5] use sudo to set passwordless the host user into the devcontainer --- .devcontainer/Dockerfile | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile index 924b308..4236fef 100644 --- a/.devcontainer/Dockerfile +++ b/.devcontainer/Dockerfile @@ -8,9 +8,9 @@ RUN a2enmod rewrite #Most of this comes directly from the WordPress docker image #We don't inherit from it becase it has a VOLUME that causes issues RUN set -eux; \ - apt-get update; \ - apt-get install -y --no-install-recommends ghostscript git less ssh-client mariadb-client nodejs npm; \ - rm -rf /var/lib/apt/lists/* + apt-get update; \ + apt-get install -y --no-install-recommends ghostscript git less ssh-client mariadb-client nodejs npm sudo; \ + rm -rf /var/lib/apt/lists/* # install the PHP extensions, including XDebug RUN set -ex; \ @@ -66,7 +66,11 @@ ARG HOST_USER=vscode RUN groupadd -g ${HOST_GID} hostgroup || true && \ getent group ${HOST_GID} >/dev/null 2>&1 || groupadd -g ${HOST_GID} hostgroup || true && \ id -u ${HOST_USER} >/dev/null 2>&1 || useradd -m -u ${HOST_UID} -g ${HOST_GID} -s /bin/bash ${HOST_USER} || true && \ - usermod -aG www-data ${HOST_USER} || true + usermod -aG www-data ${HOST_USER} || true && \ + # add to sudo group and allow passwordless sudo for the host user + usermod -aG sudo ${HOST_USER} || true && \ + echo "${HOST_USER} ALL=(ALL) NOPASSWD:ALL" > /etc/sudoers.d/host_user && \ + chmod 0440 /etc/sudoers.d/host_user || true WORKDIR /var/www/html USER www-data From 95739139f8cc4a265f8b7a2fa68d844322a2c6a2 Mon Sep 17 00:00:00 2001 From: Alex Castillo Date: Thu, 30 Apr 2026 18:56:19 +0000 Subject: [PATCH 4/5] add reload command and improve readme file Co-authored-by: Copilot --- Makefile | 2 ++ README.md | 58 ++++++++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 49 insertions(+), 11 deletions(-) create mode 100644 Makefile diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..5771910 --- /dev/null +++ b/Makefile @@ -0,0 +1,2 @@ +reload: + @bash .devcontainer/wp-setup.sh diff --git a/README.md b/README.md index 9cdeeca..b4b29ea 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,63 @@ # vscode-devcontainer-wordpress -This contains the configuration necessary for setting up WordPress development using VSCode Dev Containers. -A MariaDB and WordPress devlopment container are started, and Wordpress is automatically installed and available at http://localhost:8080. +This repository contains a ready-to-use WordPress development environment powered by VS Code Dev Containers. +It starts WordPress and MariaDB automatically and makes the site available at http://localhost:8080. -## Configuration +## Requirements -By default the container is configured for plugin development, but you can switch to theme development by changing the volume for the WordPress service in `docker-compose.yml` +Before you begin, install these tools: -WordPress settings can be configured in `.devcontainer/wp-setup.sh`, i.e. the site name, and admin user account details. You can also specify a space-separated list of WordPress plugins to automatically install as well. By setting `WP_RESET` to `true`, the container will rebuild the WordPress instalation from scratch every time it is loaded. +- [Visual Studio Code](https://code.visualstudio.com/) +- [Docker](https://www.docker.com/products/docker-desktop/) +- [Dev Containers extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) -## Data folder +## Start The Environment -Any `.sql` files placed `.devcontainer/data` will be automatically imported when your site is built (using `wp db import`). It is up to you to ensure table name prefixes will match (defualt is wp_). +1. Open this folder in VS Code. +2. Install the Dev Containers extension if you do not have it already. +3. Run **Dev Containers: Reopen in Container** from the command palette, or use **Dev Containers: Rebuild Container** after making changes to the container configuration. +4. Wait for the container to finish building and for the WordPress setup script to complete. -Anything placed in the `plugins` folder (single files or folders) will be copied into the WordPress plugins folder and activated as a plugin. This enables things like defining custom post types relevant to your imported data set, but not part of the development process. +Once the container is ready, WordPress should be running at: + +- http://localhost:8080 +- http://localhost:8080/wp-admin + +## WordPress Setup + +WordPress is installed automatically when the devcontainer starts. +The initial site settings, admin user, and plugin list are defined in `.devcontainer/wp-setup.sh`. + +By default, this environment is configured for plugin development. +If you want to work on a theme instead, change the mounted volume in `.devcontainer/docker-compose.yml`. + +## Reset Or Reload Data + +The `Makefile` includes a `reload` target that runs the WordPress setup script again: + +```bash +make reload +``` + +Use it when you want to reset the local WordPress installation or re-apply your setup changes. + +Any `.sql` file placed in `.devcontainer/data` is imported during setup with `wp db import`, so you can seed the site with your own data. + +Files or folders placed in `.devcontainer/data/plugins` are copied into the WordPress plugins directory and activated automatically. ## Included Tools -- XDebug, configured +- Xdebug - WP-CLI - Composer -- NodeJS -- PHP/WordPress extensions for VSCode (see `devconatainer.json`) +- Node.js +- MariaDB client tools +- PHP and WordPress VS Code extensions + +## Notes + +- The environment is designed for local development, so it is safe to rebuild the container whenever you change the devcontainer configuration. +- If you update `.devcontainer/wp-setup.sh`, run `make reload` to apply the changes without rebuilding the whole container. ## TODO From 61cabb8e757abe8f5ae61003913903199e8cf6fc Mon Sep 17 00:00:00 2001 From: Alex Castillo Date: Thu, 30 Apr 2026 19:41:15 +0000 Subject: [PATCH 5/5] update to php 8.4 --- .devcontainer/Dockerfile | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile index 4236fef..ccbb5c0 100644 --- a/.devcontainer/Dockerfile +++ b/.devcontainer/Dockerfile @@ -1,4 +1,4 @@ -FROM php:7.4-apache +FROM php:8.4-apache RUN mv "$PHP_INI_DIR/php.ini-development" "$PHP_INI_DIR/php.ini" # Enable .htaccess files & mod_rewrite @@ -21,8 +21,9 @@ RUN set -ex; \ libmagickwand-dev \ libpng-dev \ libzip-dev \ - ; \ - docker-php-ext-configure gd --with-freetype --with-jpeg; \ + ; + +RUN docker-php-ext-configure gd --with-freetype --with-jpeg; \ docker-php-ext-install -j "$(nproc)" \ bcmath \ exif \ @@ -30,9 +31,10 @@ RUN set -ex; \ mysqli \ opcache \ zip \ - ; \ - pecl install imagick-3.4.4; \ - pecl install xdebug-2.8.1; \ + ; + +RUN pecl install imagick; \ + pecl install xdebug; \ docker-php-ext-enable imagick xdebug;\ rm -rf /var/lib/apt/lists/* @@ -48,6 +50,8 @@ RUN { \ echo 'opcache.fast_shutdown=1'; \ } > /usr/local/etc/php/conf.d/opcache-recommended.ini +RUN echo "memory_limit=512M" > /usr/local/etc/php/conf.d/memory-limit.ini; + #install WP-CLI RUN curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar \ && chmod +x wp-cli.phar \ @@ -73,12 +77,13 @@ RUN groupadd -g ${HOST_GID} hostgroup || true && \ chmod 0440 /etc/sudoers.d/host_user || true WORKDIR /var/www/html + USER www-data #Download WP RUN wp core download -#add dirs for plugin and theme dev +# add dirs for plugin and theme dev RUN mkdir -p /var/www/html/wp-content/plugins/plugin-dev; \ mkdir -p /var/www/html/wp-content/themes/theme-dev;