Skip to content

Commit 474995e

Browse files
akirkbrandonpayton
akirk
and
brandonpayton
authored
[personal-wp] Add deployment workflow for my.wordpress.net (#3184)
Co-authored-by: Brandon Payton <[email protected]>
1 parent 98e7688 commit 474995e

File tree

3 files changed

+227
-21
lines changed

3 files changed

+227
-21
lines changed

‎.github/workflows/deploy-my-wordpress-net.yml‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
name: Deploy my.wordpress.net
2+
3+
on:
4+
workflow_dispatch:
5+
# Deploy every Wednesday at 11am UTC (same as main website)
6+
schedule:
7+
- cron: '0 11 * * 3'
8+
9+
concurrency:
10+
group: my-wordpress-net-deployment
11+
12+
jobs:
13+
build_and_deploy:
14+
# Only run this workflow from the trunk branch and when it's triggered by a Playground maintainer
15+
if: >
16+
github.ref == 'refs/heads/trunk' && (
17+
github.event_name == 'workflow_run' ||
18+
github.actor == 'adamziel' ||
19+
github.actor == 'akirk' ||
20+
github.actor == 'dmsnell' ||
21+
github.actor == 'bgrgicak' ||
22+
github.actor == 'brandonpayton' ||
23+
github.actor == 'zaerl' ||
24+
github.actor == 'janjakes' ||
25+
github.actor == 'mho22'
26+
)
27+
28+
runs-on: ubuntu-latest
29+
environment:
30+
name: my-wordpress-net-wp-cloud
31+
steps:
32+
- uses: actions/checkout@v5
33+
with:
34+
submodules: true
35+
ref: ${{ vars.GIT_REF_TO_DEPLOY }}
36+
- uses: ./.github/actions/prepare-playground
37+
- name: Build my-wordpress-net
38+
run: npx nx build playground-personal-wp
39+
env:
40+
CORS_PROXY_URL: ${{ vars.CORS_PROXY_URL }}
41+
- run: tar -czf my-wordpress-net.tar.gz dist/packages/playground/my-wordpress-net
42+
- uses: actions/upload-artifact@v4
43+
with:
44+
name: my-wordpress-net
45+
path: my-wordpress-net.tar.gz
46+
47+
- name: Deploy my.wordpress.net build
48+
shell: bash
49+
run: |
50+
mkdir -p ~/.ssh
51+
echo "${{ secrets.DEPLOY_MY_WORDPRESS_NET_HOST_KEY }}" >> ~/.ssh/known_hosts
52+
echo "${{ secrets.DEPLOY_MY_WORDPRESS_NET_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
53+
chmod 0600 ~/.ssh/*
54+
55+
# Website files (combined remote + personal-wp)
56+
rsync -avz -e "ssh -i ~/.ssh/id_ed25519" --delete \
57+
dist/packages/playground/my-wordpress-net/ \
58+
${{ secrets.DEPLOY_MY_WORDPRESS_NET_USER }}@${{ secrets.DEPLOY_MY_WORDPRESS_NET_HOST }}:'~/updated-playground-files'
59+
60+
# Include MIME types for use with PHP-served files
61+
cp packages/php-wasm/universal/src/lib/mime-types.json \
62+
packages/playground/website-deployment/
63+
64+
# Host-specific deployment scripts and server config (reuse website-deployment)
65+
rsync -avz -e "ssh -i ~/.ssh/id_ed25519" --delete \
66+
packages/playground/website-deployment/ \
67+
${{ secrets.DEPLOY_MY_WORDPRESS_NET_USER }}@${{ secrets.DEPLOY_MY_WORDPRESS_NET_HOST }}:'~/website-deployment'
68+
69+
# Apply update
70+
ssh -i ~/.ssh/id_ed25519 \
71+
${{ secrets.DEPLOY_MY_WORDPRESS_NET_USER }}@${{ secrets.DEPLOY_MY_WORDPRESS_NET_HOST }} \
72+
-tt -C '~/website-deployment/apply-update.sh'

‎packages/playground/personal-wp/README.md‎

Lines changed: 135 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,153 @@
1-
# WordPress Playground website
1+
# @wp-playground/personal-wp
22

3-
This package contains the playground.wordpress.net website. Most assets built in this package
4-
are pre-emptively downloaded and cached in the browser to support the offline mode. If you
5-
want to add a new, bulky page without increasing the required download size, add it in the
6-
`playground-website-extras` package instead.
3+
A user-focused WordPress Playground application for running a personal WordPress site in the browser. This package powers [my.wordpress.net](https://my.wordpress.net).
74

8-
## Development
5+
## Overview
6+
7+
Personal Playground is a streamlined, end-user focused version of WordPress Playground. While [playground.wordpress.net](https://playground.wordpress.net) targets developers with features like blueprint galleries, GitHub integration, and temporary sites, Personal Playground provides a simpler experience for users who want their own persistent WordPress site.
8+
9+
### Key Differences from playground.wordpress.net
10+
11+
**Removed:**
12+
13+
- Blueprint gallery and site list (replaced with a tailored welcome experience)
14+
- Import from file/URL/GitHub UI
15+
- Temporary site creation
16+
- Multiple saved sites management
17+
18+
**Added:**
19+
20+
- Single persistent site stored in OPFS by default
21+
- Welcome plugin with guided onboarding
22+
- Automatic language detection from browser settings
23+
- App catalog with pre-configured blueprints to install
24+
- Backup reminder system with history
25+
- Health Check integration for crash recovery
26+
- Multi-tab coordination (one worker per site, dependent tabs, takeover protocol)
27+
- Cross-tab sync for backup status
28+
29+
## Features
30+
31+
### Persistent Storage
32+
33+
Your WordPress site is automatically saved in the browser's Origin Private File System (OPFS). No setup required - just start using WordPress and your data persists across sessions.
34+
35+
### Welcome & Onboarding
36+
37+
A welcome plugin guides new users through the initial setup, making it easy to get started with WordPress.
38+
39+
### App Catalog
40+
41+
Browse and install apps from a curated catalog of pre-configured blueprints. Each app is a one-click install that extends your WordPress site with new functionality.
42+
43+
### Backup System
44+
45+
Automatic backup reminders help you keep your data safe. View backup history and export your site data when needed.
46+
47+
### Crash Recovery
48+
49+
Health Check integration detects and recovers from site crashes automatically, ensuring you never lose access to your WordPress site.
50+
51+
### Multi-Tab Support
52+
53+
Sophisticated tab coordination ensures only one worker runs per site. Dependent tabs connect automatically, and a takeover protocol handles tab conflicts gracefully.
954

10-
### Tests
55+
### Offline Support
1156

12-
To run the end to end tests locally, use the following command:
57+
Works as a Progressive Web App (PWA) for offline use. Install it on your device for a native app-like experience.
58+
59+
## Development
1360

1461
```bash
15-
npx nx run playground-website:e2e:dev:cypress
62+
# Start the development server (runs on port 5401)
63+
npx nx dev playground-personal-wp
64+
65+
# Build for production
66+
npx nx build playground-personal-wp
67+
68+
# Run tests
69+
npx nx test playground-personal-wp
70+
71+
# Type checking
72+
npx nx typecheck playground-personal-wp
73+
74+
# Linting
75+
npx nx lint playground-personal-wp
1676
```
1777

18-
### GitHub integration development
78+
## Build Output
79+
80+
The build process combines `playground-remote` and `playground-personal-wp` into a single deployable package at `dist/packages/playground/my-wordpress-net/`.
81+
82+
Build targets:
83+
84+
- `build` - Full build (runs `build:my-wordpress-net`)
85+
- `build:my-wordpress-net` - Combines remote + personal-wp into deployable package
86+
- `build:standalone` - Builds only personal-wp without combining
87+
88+
The combined output includes:
1989

20-
To test the GitHub integration with Playground you will need to connect to GitHub.
21-
You can skip the connection flow locally by setting your GitHub personal access token in the code.
90+
- `index.html` - Main entry point
91+
- `manifest.json` - PWA manifest
92+
- `blueprints/boot.json` - Default blueprint (auto-login to wp-admin)
93+
- `assets/` - Bundled JavaScript, CSS, and source maps
94+
- `remote.html` - The iframe that runs PHP (from playground-remote)
2295

23-
To set your token add the below code [after this line](https://github.com/WordPress/wordpress-playground/blob/86e8b2d6792259711a127382cb0d2542996915c8/packages/playground/website/src/github/github-export-form/form.tsx#L139).
96+
## Deployment
97+
98+
Personal Playground is deployed to my.wordpress.net via the `deploy-my-wordpress-net.yml` GitHub Actions workflow. The deployment:
99+
100+
1. Builds the package with `npx nx build playground-personal-wp`
101+
2. Uploads the build as an artifact
102+
3. Deploys to WP Cloud hosting via rsync/SSH
103+
4. Uses the shared `website-deployment/` scripts for server configuration
104+
105+
### Required Secrets
106+
107+
The deployment requires these GitHub secrets in the `my-wordpress-net-wp-cloud` environment:
108+
109+
- `DEPLOY_MY_WORDPRESS_NET_HOST_KEY` - SSH host key
110+
- `DEPLOY_MY_WORDPRESS_NET_PRIVATE_KEY` - SSH private key
111+
- `DEPLOY_MY_WORDPRESS_NET_USER` - SSH username
112+
- `DEPLOY_MY_WORDPRESS_NET_HOST` - SSH hostname
113+
114+
The deployment also requires these GitHub variables in the `my-wordpress-net-wp-cloud` environment:
115+
116+
- `CORS_PROXY_URL` - The URL prefix to use for CORS proxy requests, like `https://<cors-proxy-domain>/?`.
117+
- `GIT_REF_TO_DEPLOY` - The Git ref to deploy. Specify "trunk" to deploy the latest from the `trunk` branch.
118+
119+
## Architecture
24120

25121
```
26-
setOAuthToken('YOUR-TOKEN');
122+
personal-wp/
123+
├── src/
124+
│ ├── main.tsx # Application entry point
125+
│ ├── components/
126+
│ │ ├── layout/ # Main application layout
127+
│ │ ├── site-manager/ # Site info, files, and database panels
128+
│ │ ├── browser-chrome/ # Browser-like UI chrome
129+
│ │ ├── playground-viewport/ # WordPress iframe container
130+
│ │ └── ...
131+
│ └── lib/
132+
│ ├── state/
133+
│ │ ├── redux/ # Redux store and slices
134+
│ │ ├── opfs/ # OPFS storage utilities
135+
│ │ └── url/ # URL routing
136+
│ ├── health-check-recovery.ts
137+
│ └── ...
138+
├── public/
139+
│ └── blueprints/
140+
│ └── boot.json # Default boot blueprint
141+
└── index.html # HTML entry point
27142
```
28143

29-
Replace `YOUR-TOKEN` with your [Personal access token](https://github.com/settings/tokens) (with repo scope).
30-
31144
## Tracking
32145

33-
The WordPress Playground website uses Google Analytics to track user interactions. We use this data to better understand how Playground is being used. We do not track or store any personal information.
146+
Personal Playground uses Google Analytics to understand usage patterns. No personal information is tracked or stored.
34147

35-
### Custom tracking events
148+
## Related Packages
36149

37-
We also track custom events whenever a user loads Playground and what blueprint steps are they using. We only record names of steps.
150+
- `@wp-playground/client` - JavaScript API for embedding Playground
151+
- `@wp-playground/remote` - The iframe application that runs PHP
152+
- `@wp-playground/blueprints` - Blueprint execution engine
153+
- `@php-wasm/web` - Browser-based PHP runtime

‎packages/playground/personal-wp/project.json‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,25 @@
77
"targets": {
88
"build": {
99
"executor": "nx:noop",
10-
"dependsOn": ["build:standalone"]
10+
"dependsOn": ["build:my-wordpress-net"]
11+
},
12+
"build:my-wordpress-net": {
13+
"executor": "nx:run-commands",
14+
"outputs": [
15+
"{workspaceRoot}/dist/packages/playground/my-wordpress-net"
16+
],
17+
"options": {
18+
"commands": [
19+
"rm -rf ./my-wordpress-net",
20+
"mkdir ./my-wordpress-net",
21+
"cp -r ./remote/* ./my-wordpress-net/",
22+
"cp -r ./personal-wp/* ./my-wordpress-net/",
23+
"cat ./remote/.htaccess ./personal-wp/.htaccess > ./my-wordpress-net/.htaccess"
24+
],
25+
"cwd": "dist/packages/playground",
26+
"parallel": false
27+
},
28+
"dependsOn": ["build:standalone", "^build"]
1129
},
1230
"build:standalone": {
1331
"executor": "@nx/vite:build",
@@ -63,7 +81,7 @@
6381
"executor": "@nx/vite:preview-server",
6482
"options": {
6583
"buildTarget": "playground-personal-wp:build",
66-
"staticFilePath": "../../../dist/packages/playground/personal-wp"
84+
"staticFilePath": "../../../dist/packages/playground/my-wordpress-net"
6785
}
6886
},
6987
"test": {

0 commit comments

Comments
 (0)