Skip to content

chore(examples): standardize npm scripts across examples - #857

Open
josephfusco wants to merge 6 commits into
mainfrom
chore/standardize-example-scripts
Open

josephfusco wants to merge 6 commits into
mainfrom
chore/standardize-example-scripts

Conversation

@josephfusco

@josephfusco josephfusco commented Oct 27, 2026 •

Copy link
Copy Markdown
Member

How to test

  1. Static check (no Docker): from the repo root, run pnpm check:examples. It checks every example has the standard scripts, that every script/--prefix/README link it references exists, and that assets:unzip matches each zip's layout. CI runs the same check (new Example Scripts workflow). It reports 699 problems on main and none here.
  2. Run an example (Docker): in any example directory, run npm run setup, then npm run dev. If port 8888 is taken, prefix both with WP_ENV_PORT=8977. Note: examples that read a WordPress URL from .env still need it created by hand until the .env.example follow-up lands.

Description

Standardizes the npm scripts across all 23 wp-env examples, using the names the team agreed in #330:

Script What it does
setup Installs dependencies, unzips media, starts WordPress, imports the DB. Doesn't start the front end.
dev Starts WordPress and the front end.
app:dev Starts only the front end, so you can restart the app without waiting on WordPress.
stop / clean Stops / removes WordPress.
wp:start, db:import, db:export, db:query, assets:zip, assets:unzip Scoped helpers.

Example-specific extras stay where needed: wp:multisite, app:styles:fetch (wp-theme-rendered-blocks), backend:dev (Angular). render-blocks-pages-router has no wp-env and is unchanged.

The scripts are documented once, in a new Running an example section of examples/README.md; each example's README links there instead of carrying its own copy.

Commits (one pass each)

  1. Standardize the scripts across examples and READMEs.
  2. Add a check (scripts/check-example-scripts.js, pnpm check:examples, CI workflow) and testing notes in examples/README.md.
  3. Fix setup failures found end to end: ACF's GitHub release zip is now versioned, so the unversioned latest/download URL 404'd in 8 examples; and wp theme delete --all failed in the 3 examples using Twenty Twenty-One.
  4. Install ACF from WordPress.org and pin WPGraphQL for ACF 2.4.1. afterStart ran wp plugin update wpgraphql-acf, which fails on a wp-env-mounted plugin whenever WordPress.org is newer, and WordPress.org is now on 3.0.0 (a major). Upgrading to 3.0 can be its own tested change.
  5. README accuracy pass: drops per-example "setup does the following" lists that had already drifted, plus two wording fixes.

Bugs fixed along the way

  • 9 examples ran without images: zips containing wp-env/uploads/... were unzipped with -d wp-env, extracting outside the mounted folder.
  • WooCommerce never unzipped its media, and its zip contains the uploads twice.
  • wp:destroy pointed at a config file that doesn't exist.
  • Angular never installed example-app's dependencies; setup now does, and copies backend/.env.example (which had an empty FRONTEND_URL).
  • webhooks-isr: pnpm → npm, wrong paths, and an echo > that overwrote the first .env line.

Related Issue

Closes #330. The .env.example suggestion from the thread follows in a separate PR.

Type of Change

  • ✅ Bug fix (non-breaking change which fixes an issue)
  • 📄 Example update (no functional changes)
  • 📝 Documentation update

How Has This Been Tested?

pnpm check:examples passes for all 23 examples.

End to end with WP_ENV_PORT=8977 on 14 examples covering every framework, both zip layouts, and each special case. Before the fixes in commits 3–4, 7 of them failed setup; now all pass:

Example setup GraphQL Media mounted Front end
next/apollo-client-data-fetch ✅ 200 152 —
angular/template-hierarchy ✅ 200 201 200
astro/template-hierarchy ✅ 200 — 200
nuxt/template-hierarchy ✅ 200 201 200
nuxt/gravity-forms ✅ 200 — 200
sveltekit/template-hierarchy ✅ 200 201 500¹
next/woocommerce ✅ 200 143 404²
next/client-multisite ✅ 302³ 113 500²
next/wp-theme-rendered-blocks ✅ 200 — 200
next/custom-sitemap-apollo ✅ 200 105 500²
hwp-previews/hwp-preview-rest ✅ 404⁴ 105 500²
hwp-previews/hwp-preview-wpgraphql ✅ 200 105 500²
webhooks/webhooks-isr ✅ 200 0⁵ 200

¹ Hardcodes localhost:8888, which on this machine is another site, so CORS fails. ² No .env, so the WordPress URL is undefined (the .env.example follow-up). ³ The multisite network is registered to localhost:8888. ⁴ REST example, no WPGraphQL. ⁵ Its zip contains only empty folders.

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5.5
Used for: Assisting with the script standardization, the check script, end-to-end testing and fixes, README updates, and this PR description.

@github-actions

github-actions Bot commented Oct 27, 2026 •

Copy link
Copy Markdown
Contributor

📦 Plugin Artifacts Ready!

Download from GitHub Actions run

Available plugins:

  • ✅ hwp-previews.zip
  • ✅ wpgraphql-logging.zip
  • ✅ wpgraphql-webhooks.zip

See the "Artifacts" section at the bottom of the Actions run page

…step

ACF's GitHub releases now attach a versioned zip, so the unversioned
releases/latest/download/advanced-custom-fields.zip URL returns 404 and
wp-env start failed in every example that installs ACF.

In the examples that install Twenty Twenty-One, 'wp theme delete --all'
can't remove the theme directory wp-env mounts, so afterStart failed.
WordPress.org now serves ACF itself, so use its latest-stable zip
instead of a pinned GitHub release.

afterStart ran 'wp plugin update wpgraphql-acf', which tries to replace
the plugin directory wp-env mounts and fails whenever WordPress.org has
a newer version. WordPress.org is now on 3.0.0, a major release, so pin
the 2.4.1 release the examples were built against and drop the update.
Drop the per-example lists of what setup does, which had already drifted
(they missed the media unzip and listed steps out of order); the shared
'Running an example' section describes setup. Also fix 'Astro' in the
Next.js template-hierarchy README and restore the dev server step in
proxied-graphql-debug, whose list follows both setup and dev.

@colinmurphy colinmurphy left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @josephfusco for fixing these issues 🚀

I ran pnpm check:examples locally and everything passed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

chore: Standardize NPM scripts across examples

2 participants