Build/Test Tools: Add a devcontainer for Codespaces support.

This adds a devcontainer configuration tested for use with GitHub Codespaces. It is currently built on top of the Docker `wordpress` image for initial trial purposes. We should eventually be using our own containers to fully own the environment.

This should be considered a beta run to get a sense of how well cloud dev containers work for core contributors, in particular at contributor day events with limited bandwidth and mobile devices.

Props samruddhikhandale, dinhtungdu, helen, craiglpeters, sam1el, wirecat.
See #57187.



git-svn-id: https://develop.svn.wordpress.org/trunk@55303 602fd350-edb4-49c9-b593-d223f7449a82

.devcontainer/devcontainer.json

@@ -0,0 +1,25 @@
+// For format details, see https://aka.ms/devcontainer.json.
+{
+    "name": "WordPress Core Development",
+    "dockerComposeFile": "docker-compose.yml",
+    "service": "wordpress",
+	"workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
+
+    // Features to add to the dev container. More info: https://containers.dev/features.
+    "features": {
+        "ghcr.io/devcontainers/features/common-utils:2": {
+            "username": "wordpress"
+        },
+        "ghcr.io/devcontainers/features/node:1": {
+            "version": "14"
+        },
+        "ghcr.io/devcontainers/features/docker-in-docker:2": {},
+        "ghcr.io/devcontainers/features/git:1": {}
+    },
+    "onCreateCommand": "sudo chmod +x .devcontainer/install-tools.sh && .devcontainer/install-tools.sh",
+    "postCreateCommand": "sudo chmod +x .devcontainer/setup.sh && .devcontainer/setup.sh",
+    "forwardPorts": [
+        8080
+    ],
+    "remoteUser": "wordpress"
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,30 @@
+version: '3.1'
+
+services:
+  wordpress:
+    image: wordpress
+    restart: always
+    ports:
+      - 8080:80
+    environment:
+      WORDPRESS_DB_HOST: db
+      WORDPRESS_DB_USER: exampleuser
+      WORDPRESS_DB_PASSWORD: examplepass
+      WORDPRESS_DB_NAME: exampledb
+    volumes:
+      - ../src:/var/www/html
+
+  db:
+    image: mariadb
+    restart: always
+    environment:
+      MYSQL_DATABASE: exampledb
+      MYSQL_USER: exampleuser
+      MYSQL_PASSWORD: examplepass
+      MYSQL_RANDOM_ROOT_PASSWORD: '1'
+    volumes:
+      - db:/var/lib/mysql
+
+volumes:
+  wordpress:
+  db:

.devcontainer/install-tools.sh

@@ -0,0 +1,11 @@
+#!/bin/sh
+
+set -eux
+
+echo "Installing wp-cli..."
+curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
+sudo chmod +x wp-cli.phar
+sudo mv wp-cli.phar /usr/local/bin/wp
+
+# Copy the welcome message
+sudo cp .devcontainer/welcome-message.txt /usr/local/etc/vscode-dev-containers/first-run-notice.txt

.devcontainer/setup.sh

@@ -0,0 +1,18 @@
+#!/bin/sh
+
+set -eux
+
+if [ "${CODESPACE_NAME}" = "" ]; then
+	SITE_HOST="http://localhost:8080"
+else
+	SITE_HOST="https://${CODESPACE_NAME}-8080.${GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}"
+fi
+
+# Install dependencies
+cd /workspaces/wordpress-develop
+npm install && npm run build:dev
+
+# Install WordPress and activate the plugin/theme.
+cd /var/www/html
+echo "Setting up WordPress at $SITE_HOST"
+wp core install --url="$SITE_HOST" --title="WordPress Trunk" --admin_user="admin" --admin_email="admin@example.com" --admin_password="password" --skip-email

.devcontainer/welcome-message.txt

@@ -0,0 +1,6 @@
+👋 Welcome to "WordPress Core Development" in Codespaces!
+
+🛠️  Your environment is fully setup with all the required software.
+
+🚀 To get started, wait for the "postCreateCommand" to finish setting things up, then open the portforwarded URL and append '/wp-admin'.
+

.gitignore

@@ -38,6 +38,7 @@ wp-tests-config.php
 /src/wp-includes/blocks/**/*.js.map
 /packagehash.txt
 /artifacts
+/setup.log
 
 # Files and folders that get created in wp-content
 /src/wp-content/blogs.dir

README.md

@@ -7,6 +7,22 @@ Welcome to the WordPress development repository! Please check out the [contribut
 
 ## Getting Started
 
+### Using GitHub Codespaces
+
+To get started, create a codespace for this repository by clicking this 👇 
+
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new?hide_repo_select=true&ref=trunk&repo=75645659)
+
+A codespace will open in a web-based version of Visual Studio Code. The [dev container](.devcontainer/devcontainer.json) is fully configured with softwares needed for this project.
+
+**Note**: Dev containers is an open spec which is supported by [GitHub Codespaces](https://github.com/codespaces) and [other tools](https://containers.dev/supporting).
+
+In some browsers the keyboard shortcut for opening the command palette (Ctrl/Command + Shift + P) may collide with a browser shortcut. The command palette can be opened via the `F1` key or via the cog icon in the bottom left of the editor.
+
+When opening your codespace, be sure to wait for the `postCreateCommand` to finish running to ensure your WordPress install is successfully set up. This can take a few minutes.
+
+### Local development
+
 WordPress is a PHP, MySQL, and JavaScript based project, and uses Node for its JavaScript dependencies. A local development environment is available to quickly get up and running.
 
 You will need a basic understanding of how to use the command line on your computer. This will allow you to set up the local development environment, to start it and stop it when necessary, and to run the tests.
@@ -108,6 +124,8 @@ To login to the site, navigate to http://localhost:8889/wp-admin.
 * Username: `admin`
 * Password: `password`
 
+**Note:** With Codespaces, open the portforwarded URL from the ports tab in the terminal, and append `/wp-admin` to login to the site.
+
 To generate a new password (recommended):
 
 1. Go to the Dashboard