Fix node issue and update devcontainer customizations to new guidelines

.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
@@ -8,14 +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; \
-	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/*;
+    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; \
@@ -26,18 +21,20 @@ 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 \
 		gd \
 		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/*
 
@@ -53,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 \
@@ -63,17 +62,28 @@ 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 && \
+	# 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
 
 #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;
 

.devcontainer/devcontainer.json

@@ -9,20 +9,25 @@
 	"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",
-	"remoteUser": "vscode"
+	"remoteUser": "${localEnv:USER}",
+	"updateRemoteUserUID": true
 }

.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:

Makefile

@@ -0,0 +1,2 @@
+reload:
+	@bash .devcontainer/wp-setup.sh

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