<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[55303] trunk: Build/Test Tools: Add a devcontainer for Codespaces support.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/55303">55303</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/55303","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>helen</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2023-02-10 02:59:04 +0000 (Fri, 10 Feb 2023)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>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 <a href="https://core.trac.wordpress.org/ticket/57187">#57187</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkgitignore">trunk/.gitignore</a></li>
<li><a href="#trunkREADMEmd">trunk/README.md</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li>trunk/.devcontainer/</li>
<li><a href="#trunkdevcontainerdevcontainerjson">trunk/.devcontainer/devcontainer.json</a></li>
<li><a href="#trunkdevcontainerdockercomposeyml">trunk/.devcontainer/docker-compose.yml</a></li>
<li><a href="#trunkdevcontainerinstalltoolssh">trunk/.devcontainer/install-tools.sh</a></li>
<li><a href="#trunkdevcontainersetupsh">trunk/.devcontainer/setup.sh</a></li>
<li><a href="#trunkdevcontainerwelcomemessagetxt">trunk/.devcontainer/welcome-message.txt</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkdevcontainerdevcontainerjson"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/.devcontainer/devcontainer.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/.devcontainer/devcontainer.json (rev 0)
+++ trunk/.devcontainer/devcontainer.json 2023-02-10 02:59:04 UTC (rev 55303)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,25 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+// 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"
+}
</ins><span class="cx" style="display: block; padding: 0 10px">Property changes on: trunk/.devcontainer/devcontainer.json
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="trunkdevcontainerdockercomposeyml"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/.devcontainer/docker-compose.yml</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/.devcontainer/docker-compose.yml (rev 0)
+++ trunk/.devcontainer/docker-compose.yml 2023-02-10 02:59:04 UTC (rev 55303)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,30 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+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:
</ins><span class="cx" style="display: block; padding: 0 10px">Property changes on: trunk/.devcontainer/docker-compose.yml
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="trunkdevcontainerinstalltoolssh"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/.devcontainer/install-tools.sh</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/.devcontainer/install-tools.sh (rev 0)
+++ trunk/.devcontainer/install-tools.sh 2023-02-10 02:59:04 UTC (rev 55303)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,11 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#!/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
</ins></span></pre></div>
<a id="trunkdevcontainersetupsh"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/.devcontainer/setup.sh</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/.devcontainer/setup.sh (rev 0)
+++ trunk/.devcontainer/setup.sh 2023-02-10 02:59:04 UTC (rev 55303)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,18 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#!/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
</ins></span></pre></div>
<a id="trunkdevcontainerwelcomemessagetxt"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/.devcontainer/welcome-message.txt</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/.devcontainer/welcome-message.txt (rev 0)
+++ trunk/.devcontainer/welcome-message.txt 2023-02-10 02:59:04 UTC (rev 55303)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,6 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+👋 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'.
+
</ins><span class="cx" style="display: block; padding: 0 10px">Property changes on: trunk/.devcontainer/welcome-message.txt
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="trunkgitignore"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/.gitignore</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/.gitignore 2023-02-09 16:33:36 UTC (rev 55302)
+++ trunk/.gitignore 2023-02-10 02:59:04 UTC (rev 55303)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -38,6 +38,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /src/wp-includes/blocks/**/*.js.map
</span><span class="cx" style="display: block; padding: 0 10px"> /packagehash.txt
</span><span class="cx" style="display: block; padding: 0 10px"> /artifacts
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/setup.log
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> # Files and folders that get created in wp-content
</span><span class="cx" style="display: block; padding: 0 10px"> /src/wp-content/blogs.dir
</span></span></pre></div>
<a id="trunkREADMEmd"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/README.md</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/README.md 2023-02-09 16:33:36 UTC (rev 55302)
+++ trunk/README.md 2023-02-10 02:59:04 UTC (rev 55303)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7,6 +7,22 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> ## Getting Started
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+### Using GitHub Codespaces
+
+To get started, create a codespace for this repository by clicking this 👇
+
+[](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
+
</ins><span class="cx" style="display: block; padding: 0 10px"> 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.
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> 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.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -108,6 +124,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * Username: `admin`
</span><span class="cx" style="display: block; padding: 0 10px"> * Password: `password`
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+**Note:** With Codespaces, open the portforwarded URL from the ports tab in the terminal, and append `/wp-admin` to login to the site.
+
</ins><span class="cx" style="display: block; padding: 0 10px"> To generate a new password (recommended):
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> 1. Go to the Dashboard
</span></span></pre>
</div>
</div>
</body>
</html>