Store WordPress "build" directory as an artifact to enable live previews with Playground #5481

adamziel · 2023-10-13T13:58:22Z

Creates a new GitHub workflow to expose WordPress build as a GitHub artifact. The goal is to enable previewing Pull Requests in WordPress Playground.

Related Playground PR WordPress/wordpress-playground#700

Trac Ticket: https://core.trac.wordpress.org/ticket/59416

cc @gziolo @youknowriad @peterwilsoncc @desrosj

…ews with Playground

This PR, paired with WordPress/wordpress-develop#5481, enables previewing WordPress Pull Requests. Changes: * Adds wordpress.html – an easy entrypoint to previewing PRs * Allows pulling GH artifacts from wordpress-develop repo * Patches the controlled iframe in JavaScript, not in Docker, to enable re-applying the patch in wordpress-develop branch #668 * Serves static files using the PHP instance when they exist, not based on heuristics like path.startsWith('/wp-content')

jeffpaul · 2023-10-13T18:20:44Z

Note that this is a foundational item for https://core.trac.wordpress.org/ticket/59416 and will hopefully make it dramatically easier for folks to help test PRs. Thanks for the work on this @adamziel. This is so great, I LOVE IT!!!

desrosj

I'm a little confused as to why we're uploading the artifacts 3 times. Could you clarify?

Also, I'm wondering if there is a benefit to create a new workflow that's specifically meant to just build the package and upload it as an artifact. That would open the door to perform any other additional steps we may need down the road as well.

.github/workflows/end-to-end-tests.yml

Add wordpress.html, a simple HTML form that enables previewing any WordPress core Pull Request. Technically, it's very similar to gutenberg.html – it just creates a tailored Blueprint and redirects to Playground with that Blueprint applied. *Caveats* This leans on storing WordPress builds as a GitHub artifact in CI. For now only one PR does that – WordPress/wordpress-develop#5481. Once it's merged, the previewer proposed in this PR will work for every wordpress-develop Pull Request! The downloaded WordPress bundle is ~45MB and takes a while to download without any visible progress information. Let's find a way to optimize it.

adamziel · 2023-10-16T13:27:08Z

I'm a little confused as to why we're uploading the artifacts 3 times. Could you clarify?

@desrosj that's what I meant by "it's overeager and tries to upload multiple times" in the description. No purpose in particular, I just ran out of time to fix it on Friday. I just corrected that so it only uploads the artifact once. I also applied the rest of your feedback, thank you!

Right now I'm trying to figure out why GitHub is not running the workflow after I moved it to a separate build.yml file.

desrosj · 2023-10-16T13:47:01Z

Right now I'm trying to figure out why GitHub is not running the workflow after I moved it to a separate build.yml file.

Hmm, looking at the commit you made above, I'm not sure either. The paths under the pull_request event are probably unnecessary. We want each change to trigger a build. With those paths defined, we may not get an artifact every time.

Another thing I've been thinking about. Will these artifacts need to be available more widely? I think the current intent is to share a link within the context of a PR. But if we'd need to use the artifact anywhere else, I'm not sure if it's easy to retrieve the artifact. it may be worth looking at publishing these as a package on GitHub, or something similar. This may be a problem for a different day, though.

adamziel · 2023-10-16T13:53:51Z

But if we'd need to use the artifact anywhere else, I'm not sure if it's easy to retrieve the artifact.

It's not easy and I'd love to make it easy at one point. At the same time, artifacts solve a lot of problems, like cleaning up old files. I'd say let's move forward with them for now and let's explore more accessible uploads separately.

adamziel · 2023-10-16T13:54:59Z

Also, I found the problem with a separate workflow file. I forgot about the required runs-on option. I fixed it and the build workflow now works as expected. Example run.

adamziel · 2023-10-16T14:06:52Z

And I just added a zip -r build.zip build line that sped up the upload step from 10 minutes to 19s. Woah!

Does this look good, or do you see any blockers @desrosj?

.github/workflows/build.yml

desrosj

Sorry, a few more thinks that I noticed!

.github/workflows/build.yml

desrosj · 2023-10-16T16:49:49Z

Added a few small requests. Also, thinking about this more, if the intent is for this workflow to run on any branch, we will need to backport this and should wait until after WP 6.4 is branched to commit to avoid having to backport frequent changes to the 6.3 branch as we refine.

I think it's fair to say we should only run this for PRs to and commits to trunk for now. Added a comment inline about that.

desrosj · 2023-10-16T17:07:35Z

And I just added a zip -r build.zip build line that sped up the upload step from 10 minutes to 19s. Woah!

One thing to keep in mind here is that this results in the zip file that is uploaded as an artifact being zipped again. It's not immediately apparent, but it may require an additional step when using the artifact.

Co-authored-by: Jonathan Desrosiers <desrosj@users.noreply.github.com>

…all PRs

adamziel · 2023-10-17T07:25:00Z

@desrosj good feedback, thank you! I just addressed all your notes.

I think it's fair to say we should only run this for PRs to and commits to trunk for now. Added a comment inline about that.

Yes, I only want to run this for PRs so we're good.

One thing to keep in mind here is that this results in the zip file that is uploaded as an artifact being zipped again.

This is fine, Playground can handle that – the Gutenberg repo does the same thing.

ockham · 2023-10-17T12:13:24Z

And I just added a zip -r build.zip build line that sped up the upload step from 10 minutes to 19s. Woah!

That's due to a somewhat familiar issue with the upload-artifact action: Uploading multiple files takes significantly more time than uploading a single file 😕

One thing to keep in mind here is that this results in the zip file that is uploaded as an artifact being zipped again. It's not immediately apparent, but it may require an additional step when using the artifact.

FWIW, the same tradeoff applies to Gutenberg (where it has confused users that uploaded the "double-zipped" gutenberg-plugin.zip to their WP, expecting it to work like a "regular" plugin zip file); there's also an issue in the upload-artifact repo about the double-zip. We even attempted removing that extraneous zipping at some point (WordPress/gutenberg#32780) but concluded that it wasn't worth the negative performance impact.

.github/workflows/build.yml

Co-authored-by: Bernie Reiter <96308+ockham@users.noreply.github.com>

.github/workflows/build.yml

Co-authored-by: Bernie Reiter <96308+ockham@users.noreply.github.com>

ockham

LGTM!

Shall we wait for 6.4 to be branched from trunk before landing this? 🤔 (That should happen shortly after RC1, which is scheduled for later tonight.)

adamziel · 2023-10-17T13:31:53Z

Shall we wait for 6.4 to be branched from trunk before landing this?

This change matters for trunk Pull Requests and even if the workflow file changes, I don't think we'll need to backport that. I'll go ahead and merge. Feel free to revert if I'm wrong here.

adamziel · 2023-10-17T13:41:17Z

https://core.trac.wordpress.org/changeset/56958

Add wordpress.html, a simple HTML form that enables previewing any WordPress core Pull Request. Technically, it's very similar to gutenberg.html – it just creates a tailored Blueprint and redirects to Playground with that Blueprint applied. *Caveats* This leans on storing WordPress builds as a GitHub artifact in CI. For now only one PR does that – WordPress/wordpress-develop#5481. Once it's merged, the previewer proposed in this PR will work for every wordpress-develop Pull Request! The downloaded WordPress bundle is ~45MB and takes a while to download without any visible progress information. Let's find a way to optimize it.

@spacedmonkey

## What is this PR doing? Support for previewing wordpress-develop Pull Requests. <img width="1133" alt="CleanShot 2023-10-13 at 18 53 52@2x" src="https://github.com/WordPress/wordpress-playground/assets/205419/e30e9ac6-c99e-4e81-b68f-45e14116f6c9"> The previewer lives in `/wordpress.html` and supports a few query parameters: * `?pr=5481` – preview that PR * `?url=/wp-admin/post-new.php` – load that URL in WordPress * `?mode=seamless` – redirect to a full-screen Playground without the browser chrome and any other extra UI elements ## Caveats The downloaded WordPress bundle is ~45MB and takes a while to download without any visible progress information. Let's find a way to optimize it. ## Testing instructions 1. Go to http://localhost:5400/website-server/wordpress.html 2. Preview PR 5481 (no other PR works yet, see WordPress/wordpress-develop#5481) 3. Confirm in wp-admin the WordPress version is 6.4 dev ## Screenshots <img width="1286" alt="CleanShot 2023-10-13 at 18 58 36@2x" src="https://github.com/WordPress/wordpress-playground/assets/205419/ca25a714-4491-4f63-b82c-b2178a2828b5"> cc @spacedmonkey @fabiankaegy @dmsnell @jonathanbossenger @dawidurbanski

adamziel added 5 commits October 13, 2023 15:55

Store WordPress "build" directory as an artifact to enable live previ…

ded6c4d

…ews with Playground

Upload artifacts in e2e workflow, not test-npm workflow

c293049

No, use test-npm.ml after all :D

21268e4

Upload the build directory

d2988a8

Adjust paths

af935e3

adamziel mentioned this pull request Oct 13, 2023

wordpress-develop Pull Request previewer WordPress/wordpress-playground#700

Merged

desrosj reviewed Oct 13, 2023

View reviewed changes

.github/workflows/end-to-end-tests.yml Outdated Show resolved Hide resolved

.github/workflows/end-to-end-tests.yml Outdated Show resolved Hide resolved

.github/workflows/end-to-end-tests.yml Outdated Show resolved Hide resolved

Use a dedicated workflow to build WordPress

3619be7

adamziel force-pushed the upload-build-for-playground branch from 8c55316 to 3619be7 Compare October 16, 2023 13:07

adamziel added 3 commits October 16, 2023 15:30

Move the build workflow to test-npm.yml – will it work now?

bbf690d

Adjust the workflow name

f7174a5

Move the workflow back to a separate file

cc8a7b4

Zip the WordPress build to hopefully make the upload faster

6226e22

desrosj requested changes Oct 16, 2023

View reviewed changes

.github/workflows/build.yml Show resolved Hide resolved

.github/workflows/build.yml Outdated Show resolved Hide resolved

desrosj requested changes Oct 16, 2023

View reviewed changes

.github/workflows/build.yml Outdated Show resolved Hide resolved

.github/workflows/build.yml Outdated Show resolved Hide resolved

adamziel and others added 4 commits October 17, 2023 09:16

Update .github/workflows/build.yml

0fe99e6

Co-authored-by: Jonathan Desrosiers <desrosj@users.noreply.github.com>

Document the purpose of the workflow

72748f7

Remove "on push:" and "paths:" filters to create these artifacts for …

0be11e1

…all PRs

Remove branch filter for pull_request

e9c37f8

Adjust ternary to use PR number

b327885

ockham reviewed Oct 17, 2023

View reviewed changes

.github/workflows/build.yml Outdated Show resolved Hide resolved

Rename build.zip to wordpress.zip

98fdc30

ockham reviewed Oct 17, 2023

View reviewed changes

.github/workflows/build.yml Outdated Show resolved Hide resolved

Update .github/workflows/build.yml

b5fdc6e

Co-authored-by: Bernie Reiter <96308+ockham@users.noreply.github.com>

ockham reviewed Oct 17, 2023

View reviewed changes

.github/workflows/build.yml Outdated Show resolved Hide resolved

Update .github/workflows/build.yml

30929c7

Co-authored-by: Bernie Reiter <96308+ockham@users.noreply.github.com>

ockham approved these changes Oct 17, 2023

View reviewed changes

adamziel closed this Oct 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Store WordPress "build" directory as an artifact to enable live previews with Playground #5481

Store WordPress "build" directory as an artifact to enable live previews with Playground #5481

adamziel commented Oct 13, 2023 •

edited

Loading

jeffpaul commented Oct 13, 2023

desrosj left a comment

adamziel commented Oct 16, 2023

desrosj commented Oct 16, 2023

adamziel commented Oct 16, 2023

adamziel commented Oct 16, 2023 •

edited

Loading

adamziel commented Oct 16, 2023

desrosj left a comment

desrosj commented Oct 16, 2023

desrosj commented Oct 16, 2023

adamziel commented Oct 17, 2023

ockham commented Oct 17, 2023

ockham left a comment

adamziel commented Oct 17, 2023

adamziel commented Oct 17, 2023

Store WordPress "build" directory as an artifact to enable live previews with Playground #5481

Store WordPress "build" directory as an artifact to enable live previews with Playground #5481

Conversation

adamziel commented Oct 13, 2023 • edited Loading

jeffpaul commented Oct 13, 2023

desrosj left a comment

Choose a reason for hiding this comment

adamziel commented Oct 16, 2023

desrosj commented Oct 16, 2023

adamziel commented Oct 16, 2023

adamziel commented Oct 16, 2023 • edited Loading

adamziel commented Oct 16, 2023

desrosj left a comment

Choose a reason for hiding this comment

desrosj commented Oct 16, 2023

desrosj commented Oct 16, 2023

adamziel commented Oct 17, 2023

ockham commented Oct 17, 2023

ockham left a comment

Choose a reason for hiding this comment

adamziel commented Oct 17, 2023

adamziel commented Oct 17, 2023

adamziel commented Oct 13, 2023 •

edited

Loading

adamziel commented Oct 16, 2023 •

edited

Loading