[Blueprints] Use the local worker in Builder in development mode #2495

mho22 · 2025-08-12T09:21:21Z

Motivation for the change, related issues

In order to find a solution to issue #2466. I struggled to go through the worker-thread run on port 4400 as the one used in the builder is the playground.wordpress.net one when running npm run dev.

Implementation details

If import.meta.env.MODE === 'production then use the remote worker, else use the local one.

Additionally, due to complex caching, other steps should be taken into account to get a fresh worker during page refresh. Explained below.

I didn't modify the following files :

packages/playground/website/src/github/preview-pr/form.tsx
packages/playground/website/src/components/error-report-modal.tsx

And possible errors can occur in these tests :

packages/playground/website/playwright/e2e/blueprints.spec.ts
packages/playground/php-cors-proxy.tests/ProxyFunctionsTests.php

Testing Instructions

Add a test log inside the boot method in worker-thread.ts.
Run npm run dev
Go to http://127.0.0.1:5400/website-server/builder/builder.html
Unregister the http://127.0.0.1:4400 service worker.
Delete the playground-cache- in CacheStorage data in the CacheStorage section in Application tab from the browser developer tools.
Refresh page.

You should see the log.

Modify the previous test log inside the boot method in worker-thread.ts and reproduce the steps 3 to 5.

You should see the modified log.

Extra steps if the service worker stops running unexpectedly :

enable Bypass for network in the Service Worker section in the Application tab from the browser developer tools and unregister the service worker from http://127.0.0.1:4400.
Do a hard Refresh the page.
Disable Bypass for network in the Service Worker section in the Application tab from the browser developer tools and do a hard refresh the page again.

brandonpayton

Hi @mho22, thank you for working on this. This issue has bothered me for a while, but I haven't taken the time to fix it.

I left some questions and suggestions below, but this looks like a good thing for us to do.

brandonpayton · 2025-08-13T20:35:32Z

packages/playground/client/src/index.ts

@@ -215,6 +215,8 @@ const validRemoteOrigins = [
 	'https://localhost',
 	'http://127.0.0.1',
 	'https://127.0.0.1',
+	'http://127.0.0.1:4400',
+	'http://localhost:4400',


Is there any downside to using
import { remoteDevServerHost, remoteDevServerPort } from '../../build-config';
in this module and defining these string using those imports?

No, you're right I should use these configs instead. On it.

brandonpayton · 2025-08-13T20:42:28Z

packages/playground/website/vite.config.ts

+			target:
+				mode === 'production'
+					? 'https://playground.wordpress.net'
+					: `http://${remoteDevServerHost}:${remoteDevServerPort}`,


IIRC, the purpose of this bit is to forward requests to playground.wordpress.net/plugin-proxy.php when a plugin-proxy.php request is received by the the dev server. The plugin-proxy.php script requires PHP and a GH_TOKEN environment var, so I think maybe we want to keep forwarding such requests to playground.wordpress.net where there is both a PHP server and that secret defined.

brandonpayton · 2025-08-13T20:47:07Z

packages/playground/website/builder/builder.ts

+					import.meta.env.MODE === 'production'
+						? `https://playground.wordpress.net/plugin-proxy.php?${proxyParams}`
+						: `http://${remoteDevServerHost}:${remoteDevServerPort}/plugin-proxy.php?${proxyParams}`


Could we conditionally define the target origin once in this module and replace these ternaries with a single template str? For example:

Suggested change

import.meta.env.MODE === 'production'

? `https://playground.wordpress.net/plugin-proxy.php?${proxyParams}`

: `http://${remoteDevServerHost}:${remoteDevServerPort}/plugin-proxy.php?${proxyParams}`

`${playgroundServerOrigin}/plugin-proxy.php?${proxyParams}`

On a related note, what if we default to the current origin when in production so both of the following could work?

https://playground.wordpress.net/builder/builder.html
https://my.favorite.self.hosted.playground.domain/builder/builder.html

done. It is way more readable!

mho22 · 2025-08-15T10:03:42Z

@brandonpayton Thank you for your review! I added the corrections you suggested.

brandonpayton · 2025-08-18T20:49:41Z

packages/playground/website/builder/builder.ts

@@ -542,7 +538,7 @@ const runBlueprint = async (editor) => {
 		const blueprintCopy = JSON.parse(blueprintString);
 		await startPlaygroundWeb({
 			iframe: playgroundIframe,
-			remoteUrl: `https://playground.wordpress.net/remote.html`,
+			remoteUrl: 'remote.html',


@mho22, when I test this now, it just uses https://playground.wordpress.net/remote.html again. I think we might need to conditionally set a root URL at the top of this module and use throughout instead of just using relative URIs.

@brandonpayton I missed that one, sorry. I managed to add a ternary operator to separate the officialRemoteOrigin with the new devRemoteOrigin.

If import.meta.env.MODE is not equal to development it will fall back to https://playground.wordpress.net. I am not sure about the use of import.meta.env.MODE but I think it is fine here.

brandonpayton · 2025-08-19T20:43:05Z

Hi @mho22, I tested a bit more and discovered a couple of bugs:

The "Open in New Tab" feature wasn't opening the Playground web app
The plugin-proxy.php requests would be making local requests which would not work unless we did additional work to declare a local GH token secret and handle the PHP execution.

I pushed a commit to fix both of those issues by:

Using the parent dir of the /builder/ dir as the website root, and opening a new Playground tab using that root.
Always making the plugin-proxy.php requests to playground.wordpress.net.

Do these changes look OK to you? If so, please feel free to merge this.

brandonpayton

Approved if @mho22 is OK with the latest changes

mho22 · 2025-08-20T18:06:25Z

@brandonpayton I have just one question. After that, we can squash and merge based on your answer.

brandonpayton · 2025-08-20T20:57:53Z

@brandonpayton I have just one question. After that, we can squash and merge based on your answer.

@mho22, I'm sorry if I am missing something obvious, but where can I find your question?

packages/playground/website/builder/builder.ts

mho22 · 2025-08-20T21:06:50Z

@brandonpayton Aha! I think I messed something up. You’re seeing it now, right?

brandonpayton · 2025-08-20T23:31:05Z

@brandonpayton Aha! I think I messed something up. You’re seeing it now, right?

@mho22 yep! Thanks! I made the fix and tested locally, and I'll go ahead and merge this as long as there are no build errors.

mho22 · 2025-08-21T07:38:49Z

Thank you @brandonpayton 🎉 !

Use the local server during development mode

6ef294b

brandonpayton reviewed Aug 13, 2025

View reviewed changes

mho22 added 2 commits August 15, 2025 11:41

Merge branch 'trunk' into add-local-worker-in-development-mode

42908ec

Use relative paths and config variables

d1bf607

Lint

8617531

mho22 added [Type] Developer Experience [Focus] Developer Tools [Package][@wp-playground] Blueprints [Feature] Blueprints Builder labels Aug 15, 2025

mho22 marked this pull request as ready for review August 15, 2025 11:08

brandonpayton reviewed Aug 18, 2025

View reviewed changes

mho22 changed the title ~~[Blueprints] Use the local worker in Builder during development mode~~ [Blueprints] Use the local worker in Builder in development mode Aug 19, 2025

mho22 force-pushed the add-local-worker-in-development-mode branch from e9c28f1 to 73d2708 Compare August 19, 2025 07:46

Add ternary operator for remote origin

ec31db0

mho22 force-pushed the add-local-worker-in-development-mode branch from 73d2708 to ec31db0 Compare August 19, 2025 08:11

Fix new-tab and plugin-proxy URLs

bcd4f60

brandonpayton self-requested a review August 19, 2025 20:43

brandonpayton approved these changes Aug 19, 2025

View reviewed changes

mho22 commented Aug 20, 2025

View reviewed changes

packages/playground/website/builder/builder.ts Outdated Show resolved Hide resolved

Remove unnecessary origin from remoteUrl

ebb1df6

Fix lint error

31000ac

brandonpayton merged commit dc958af into trunk Aug 21, 2025
51 of 52 checks passed

brandonpayton deleted the add-local-worker-in-development-mode branch August 21, 2025 03:05

[Blueprints] Use the local worker in Builder in development mode #2495

[Blueprints] Use the local worker in Builder in development mode #2495

Uh oh!

Conversation

mho22 commented Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation for the change, related issues

Implementation details

Testing Instructions

Uh oh!

brandonpayton left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mho22 Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mho22 commented Aug 15, 2025

Uh oh!

brandonpayton Aug 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brandonpayton commented Aug 19, 2025

Uh oh!

brandonpayton left a comment

Choose a reason for hiding this comment

Uh oh!

mho22 commented Aug 20, 2025

Uh oh!

brandonpayton commented Aug 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

mho22 commented Aug 20, 2025

Uh oh!

brandonpayton commented Aug 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

mho22 commented Aug 21, 2025

Uh oh!

Uh oh!

mho22 commented Aug 12, 2025 •

edited

Loading

mho22 Aug 15, 2025 •

edited

Loading

brandonpayton Aug 18, 2025 •

edited

Loading

brandonpayton commented Aug 20, 2025 •

edited

Loading

brandonpayton commented Aug 20, 2025 •

edited

Loading