From bc459f7c4be987b54470d7c664ec11e23c36cabf Mon Sep 17 00:00:00 2001 From: Theo <328805+theodesp@users.noreply.github.com> Date: Tue, 4 Nov 2025 12:20:35 +0000 Subject: [PATCH 1/4] fix: fix angular example --- .../README.md | 26 ++++++++++++------- .../backend/.env.example | 1 + .../example-app/src/main.server.ts | 5 ++-- .../package.json | 2 +- 4 files changed, 20 insertions(+), 14 deletions(-) create mode 100644 examples/angular/template-hierarchy-data-fetching/backend/.env.example diff --git a/examples/angular/template-hierarchy-data-fetching/README.md b/examples/angular/template-hierarchy-data-fetching/README.md index d0bca361..92eb0d25 100644 --- a/examples/angular/template-hierarchy-data-fetching/README.md +++ b/examples/angular/template-hierarchy-data-fetching/README.md @@ -1,23 +1,29 @@ # Angular Template Hierarchy and Data fetching Example -In this example we show how to implement the WordPress Template Hierarchy in Angular for use with a Headless WordPress backend using WPGraphQL. +In this example we show how to implement the **WordPress Template Hierarchy in Angular** for use with a Headless WordPress backend using WPGraphQL. -## Getting Started +## Getting Started ๐Ÿš€ > [!IMPORTANT] -> Docker Desktop needs to be installed to run WordPress locally. +> **Docker Desktop** needs to be installed to run WordPress locally. 1. Run `npm run example:setup` to install dependencies and configure the local WP server. -2. Run `npm run backend:start` starts the backend server for template fetching at http://localhost:3000/api/templates -3. Run `npm run example:start` to start the WordPress server and Angular development server. +2. **Configure CORS:** Create a file named **`.env`** inside the **`/backend`** directory and add the following content to set the allowed frontend URL: + ``` + FRONTEND_URL=http://localhost:4200 + ``` + *(For more details on the backend service, please refer to the **`/backend/README.md`** file.)* +3. Run `npm run backend:start` starts the backend server for template fetching at **http://localhost:3000/api/templates** +4. Run `npm run example:start` to start the WordPress server and Angular development server. > [!NOTE] > When you kill the long running process this will not shutdown the local WP instance, only Angular. You must run `npm run example:stop` to kill the local WP server. -## Trouble Shooting +## Trouble Shooting ๐Ÿ› ๏ธ + 1. I get "Page Not Found. Sorry, the page you are looking for does not exist. Please check the URL." when opening the Angular app and trying to navigate through it. -- Run `npm run backend:start` and verify that http://localhost:3000/api/templates returns correct data. -- Verify if you have added `/backend/.env` file with correct `FRONTEND_URL`. -- check for any errors in the console -2. In some cases, you might have to install @angluar/cli globally. In /example-app/ run `npm install -g @angular/cli@latest` +- Run `npm run backend:start` and verify that **http://localhost:3000/api/templates** returns correct data. +- **Verify that you have created the `/backend/.env` file with the correct `FRONTEND_URL`** to resolve CORS issues. +- Check for any errors in the console. +2. In some cases, you might have to install **`@angular/cli`** globally. In `/example-app/` run `npm install -g @angular/cli@latest` 3. To reset the WP server and re-run setup you can run `npm run example:prune` and confirm "Yes" at any prompts. \ No newline at end of file diff --git a/examples/angular/template-hierarchy-data-fetching/backend/.env.example b/examples/angular/template-hierarchy-data-fetching/backend/.env.example new file mode 100644 index 00000000..fb5123e1 --- /dev/null +++ b/examples/angular/template-hierarchy-data-fetching/backend/.env.example @@ -0,0 +1 @@ +FRONTEND_URL= \ No newline at end of file diff --git a/examples/angular/template-hierarchy-data-fetching/example-app/src/main.server.ts b/examples/angular/template-hierarchy-data-fetching/example-app/src/main.server.ts index 154ce1c8..b2c2404c 100644 --- a/examples/angular/template-hierarchy-data-fetching/example-app/src/main.server.ts +++ b/examples/angular/template-hierarchy-data-fetching/example-app/src/main.server.ts @@ -1,7 +1,6 @@ -import { bootstrapApplication } from '@angular/platform-browser'; +import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser'; import { App } from './app/app'; import { config } from './app/app.config.server'; -const bootstrap = () => bootstrapApplication(App, config); - +const bootstrap = (context: BootstrapContext) => bootstrapApplication(App, config, context); export default bootstrap; diff --git a/examples/angular/template-hierarchy-data-fetching/package.json b/examples/angular/template-hierarchy-data-fetching/package.json index 87c1992f..53e7797e 100644 --- a/examples/angular/template-hierarchy-data-fetching/package.json +++ b/examples/angular/template-hierarchy-data-fetching/package.json @@ -20,6 +20,6 @@ "wp:uploads:zip": "zip -r wp-env/uploads.zip wp-env/uploads" }, "devDependencies": { - "@wordpress/env": "^10.21.0" + "@wordpress/env": "^10.34.0" } } From d35f81d144f3777ec70d91545b5ee4bd451633f0 Mon Sep 17 00:00:00 2001 From: Theo <328805+theodesp@users.noreply.github.com> Date: Tue, 4 Nov 2025 12:47:32 +0000 Subject: [PATCH 2/4] chore: update sveltekit readme --- .../template-hierarchy-data-fetching-urql/README.md | 10 +++++----- .../template-hierarchy-data-fetching-urql/package.json | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/examples/sveltekit/template-hierarchy-data-fetching-urql/README.md b/examples/sveltekit/template-hierarchy-data-fetching-urql/README.md index 076d924d..cde7188a 100644 --- a/examples/sveltekit/template-hierarchy-data-fetching-urql/README.md +++ b/examples/sveltekit/template-hierarchy-data-fetching-urql/README.md @@ -1,11 +1,11 @@ -# SvelteKit Template HIerarchy and Data fetching w/URQL Example +# SvelteKit Template Hierarchy and Data fetching w/URQL Example ๐Ÿš€ -In this example we show how to implement the WP Template Hierarchy in SvelteKit for use with a Headless WordPress backend using WPGraphQL. We use URQL for all routing and fetching page content. +In this example we show how to implement the **WordPress Template Hierarchy in SvelteKit** for use with a Headless WordPress backend using WPGraphQL. We use **URQL** for all routing and fetching page content. ## Getting Started > [!IMPORTANT] -> Docker Desktop needs to be installed to run WordPress locally. +> **Docker Desktop** needs to be installed to run WordPress locally. 1. Run `npm run example:setup` to install dependencies and configure the local WP server. 2. Run `npm run example:start` to start the WP server and SvelteKit development server. @@ -13,6 +13,6 @@ In this example we show how to implement the WP Template Hierarchy in SvelteKit > [!NOTE] > When you kill the long running process this will not shutdown the local WP instance, only SvelteKit. You must run `npm run example:stop` to kill the local WP server. -## Trouble Shooting +## Trouble Shooting ๐Ÿ› ๏ธ -To reset the WP server and re-run setup you can run `npm run example:prune` and confirm "Yes" at any prompts. +To reset the WP server and re-run setup you can run `npm run example:prune` and confirm "Yes" at any prompts. \ No newline at end of file diff --git a/examples/sveltekit/template-hierarchy-data-fetching-urql/package.json b/examples/sveltekit/template-hierarchy-data-fetching-urql/package.json index aeacc8e3..7b596119 100644 --- a/examples/sveltekit/template-hierarchy-data-fetching-urql/package.json +++ b/examples/sveltekit/template-hierarchy-data-fetching-urql/package.json @@ -19,6 +19,6 @@ "wp:images:zip": "zip -r wp-env/uploads.zip wp-env/uploads" }, "devDependencies": { - "@wordpress/env": "^10.21.0" + "@wordpress/env": "^10.34.0" } } From 13bed5fa793c3149ed7f990168898b5a6249cb34 Mon Sep 17 00:00:00 2001 From: Theo <328805+theodesp@users.noreply.github.com> Date: Tue, 4 Nov 2025 14:46:11 +0000 Subject: [PATCH 3/4] chore: update astro previews readme --- examples/astro/previews/.wp-env.json | 2 +- examples/astro/previews/README.md | 17 ++++++++++++----- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/examples/astro/previews/.wp-env.json b/examples/astro/previews/.wp-env.json index 029eb757..35bbe82b 100644 --- a/examples/astro/previews/.wp-env.json +++ b/examples/astro/previews/.wp-env.json @@ -2,7 +2,7 @@ "phpVersion": "8.3", "plugins": [ "https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip", - "https://github.com/wpengine/hwptoolkit/releases/download/%40wpengine%2Fhwp-previews-wordpress-plugin-0.0.8/hwp-previews.zip", + "https://github.com/wpengine/hwptoolkit/releases/download/%40wpengine%2Fhwp-previews-wordpress-plugin-0.0.12/hwp-previews.zip", "https://github.com/wp-graphql/wpgraphql-ide/releases/latest/download/wpgraphql-ide.zip" ], "themes": ["https://downloads.wordpress.org/theme/nude.1.2.zip"], diff --git a/examples/astro/previews/README.md b/examples/astro/previews/README.md index ad71d533..4ef83fa3 100644 --- a/examples/astro/previews/README.md +++ b/examples/astro/previews/README.md @@ -1,11 +1,11 @@ -# Astro Template HIerarchy and Data fetching w/URQL Example +# Astro Headless WordPress Previews Example ๐Ÿš€ -In this example we show how to implement the WP Template Hierarchy in Astro for use with a Headless WordPress backend using WPGraphQL. We use URQL for all routing and fetching page content. +In this example, we show how to implement **Headless WordPress Previews in Astro** using the **`hwp-previews`** plugin and WPGraphQL. This setup allows content creators to preview draft posts directly in the Astro frontend from the WordPress admin panel. We use **URQL** for all routing and fetching page content. ## Getting Started > [!IMPORTANT] -> Docker Desktop needs to be installed to run WordPress locally. +> **Docker Desktop** needs to be installed to run WordPress locally. 1. Run `npm run example:setup` to install dependencies and configure the local WP server. 2. Run `npm run example:start` to start the WP server and Astro development server. @@ -13,6 +13,13 @@ In this example we show how to implement the WP Template Hierarchy in Astro for > [!NOTE] > When you kill the long running process this will not shutdown the local WP instance, only Astro. You must run `npm run example:stop` to kill the local WP server. -## Trouble Shooting +## How to Test Previews -To reset the WP server and re-run setup you can run `npm run example:prune` and confirm "Yes" at any prompts. +1. After running `npm run example:start`, navigate to the WordPress Admin at **http://localhost:8888/wp-admin**. +2. Log in using the credentials specified in the example's `wp-env.json`. +3. Edit any draft post. +4. In the editor, click the **"Preview"** button. The post should open in the Astro frontend, displaying the draft content. + +## Trouble Shooting ๐Ÿ› ๏ธ + +To reset the WP server and re-run setup you can run `npm run example:prune` and confirm "Yes" at any prompts. \ No newline at end of file From 3ebc59c9bc33e186a560ee8927dd4336923981d7 Mon Sep 17 00:00:00 2001 From: Theo <328805+theodesp@users.noreply.github.com> Date: Wed, 5 Nov 2025 12:36:39 +0000 Subject: [PATCH 4/4] chore: standardise examples readmes --- examples/next/proxied-graphql-debug/README.md | 4 ++-- examples/next/proxied-graphql-debug/package.json | 4 ++-- examples/next/proxied-sitemap-apollo/README.md | 2 +- .../example-app/package-lock.json | 8 ++++++++ examples/next/proxied-sitemap-apollo/package.json | 4 ++-- examples/nuxt/nuxt-headlesswp-gravity-forms/README.md | 10 ++++------ .../nuxt/nuxt-headlesswp-gravity-forms/package.json | 4 ++-- 7 files changed, 21 insertions(+), 15 deletions(-) diff --git a/examples/next/proxied-graphql-debug/README.md b/examples/next/proxied-graphql-debug/README.md index dffa7ff0..bd95b0dd 100644 --- a/examples/next/proxied-graphql-debug/README.md +++ b/examples/next/proxied-graphql-debug/README.md @@ -77,7 +77,7 @@ npm install ``` cd examples/next/graphql-proxy-debug -npm run example:build +npm run example:setup ``` This will: @@ -97,7 +97,7 @@ This will: | Command | Description | |------------------------|-----------------------------------------------------------------------------| -| `example:build` | Prepares the environment, starts WordPress, imports the database, and starts the application. | +| `example:setup` | Prepares the environment, starts WordPress, imports the database, and starts the application. | | `example:dev` | Runs the Next.js development server. | | `example:dev:install` | Installs required Next.js packages. | | `example:start` | Starts WordPress and the Next.js dev server. | diff --git a/examples/next/proxied-graphql-debug/package.json b/examples/next/proxied-graphql-debug/package.json index 9ccd729a..5882808b 100644 --- a/examples/next/proxied-graphql-debug/package.json +++ b/examples/next/proxied-graphql-debug/package.json @@ -3,11 +3,11 @@ "version": "1.0.0", "description": "A debugging utility for proxied GraphQL APIs with enhanced query complexity estimation and WordPress headless integration.", "scripts": { - "example:build": "npm run example:dev:install && npm run wp:start && npm run wp:db:import && npm run example:start", + "example:setup": "npm run example:dev:install && npm run wp:start && npm run wp:db:import && npm run example:start", "example:dev:install": "cd example-app && npm install && cd ..", "example:start": "npm run wp:start && npm run example:dev", "example:stop": "npm run wp:stop", - "example:prune": "wp-env destroy && npm run example:build && npm run example:start", + "example:prune": "wp-env destroy && npm run example:setup && npm run example:start", "example:dev": "npm --prefix ./example-app run dev", "wp:start": "npm install && wp-env start", "wp:stop": "wp-env stop", diff --git a/examples/next/proxied-sitemap-apollo/README.md b/examples/next/proxied-sitemap-apollo/README.md index 503e580e..8b0b2133 100644 --- a/examples/next/proxied-sitemap-apollo/README.md +++ b/examples/next/proxied-sitemap-apollo/README.md @@ -94,7 +94,7 @@ http://localhost:3000/sitemap.xml | Command | Description | |------------------------|-----------------------------------------------------------------------------| -| `example:build` | Prepares the environment by starting WordPress, importing the database, and starting the application. | +| `example:setup` | Prepares the environment by starting WordPress, importing the database, and starting the application. | | `example:dev` | Runs the Next.js development server. | | `example:dev:install` | Installs the required Next.js packages. | | `example:start` | Starts WordPress and the Next.js development server. | diff --git a/examples/next/proxied-sitemap-apollo/example-app/package-lock.json b/examples/next/proxied-sitemap-apollo/example-app/package-lock.json index 9005266e..832ebda8 100644 --- a/examples/next/proxied-sitemap-apollo/example-app/package-lock.json +++ b/examples/next/proxied-sitemap-apollo/example-app/package-lock.json @@ -1236,6 +1236,7 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.29.0.tgz", "integrity": "sha512-8C0+jlNJOwQso2GapCVWWfW/rzaq7Lbme+vGUFKE31djwNncIpgXD7Cd4weEsDdkoZDjH0lwwr3QDQFuyrMg9g==", "dev": true, + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.29.0", "@typescript-eslint/types": "8.29.0", @@ -1675,6 +1676,7 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2476,6 +2478,7 @@ "integrity": "sha512-RNCHRX5EwdrESy3Jc9o8ie8Bog+PeYvvSR8sDGoZxNFTvZ4dlxUB3WzQ3bQMztFrSRODGrLLj8g6OFuGY/aiQg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.12.1", @@ -2643,6 +2646,7 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz", "integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==", "dev": true, + "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.8", @@ -3197,6 +3201,7 @@ "version": "16.10.0", "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.10.0.tgz", "integrity": "sha512-AjqGKbDGUFRKIRCP9tCKiIGHyriz2oHEbPIbEtcSLSs4YjReZOIPQQWek4+6hjw62H9QShXHyaGivGiYVLeYFQ==", + "peer": true, "engines": { "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0" } @@ -4619,6 +4624,7 @@ "version": "19.1.0", "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz", "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -4627,6 +4633,7 @@ "version": "19.1.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz", "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==", + "peer": true, "dependencies": { "scheduler": "^0.26.0" }, @@ -5288,6 +5295,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz", "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", "dev": true, + "peer": true, "engines": { "node": ">=12" }, diff --git a/examples/next/proxied-sitemap-apollo/package.json b/examples/next/proxied-sitemap-apollo/package.json index b60eb1d8..7e3d684a 100644 --- a/examples/next/proxied-sitemap-apollo/package.json +++ b/examples/next/proxied-sitemap-apollo/package.json @@ -3,11 +3,11 @@ "version": "1.0.0", "description": "A Next.js application that proxies WordPress sitemaps to a headless site and transforms them with clean URL formatting using Apollo Client.", "scripts": { - "example:build": "npm run example:dev:install && npm run wp:start && npm run wp:db:import && npm run example:start", + "example:setup": "npm run example:dev:install && npm run wp:start && npm run wp:db:import && npm run example:start", "example:dev:install": "cd example-app && npm install && cd ..", "example:start": "npm run wp:start && npm run example:dev", "example:stop": "npm run wp:stop", - "example:prune": "wp-env destroy && npm run example:build && npm run example:start", + "example:prune": "wp-env destroy && npm run example:setup && npm run example:start", "example:dev": "npm --prefix ./example-app run dev", "wp:start": "npm install && wp-env start", "wp:stop": "wp-env stop", diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/README.md b/examples/nuxt/nuxt-headlesswp-gravity-forms/README.md index 9c7a29c3..d61cd8cc 100644 --- a/examples/nuxt/nuxt-headlesswp-gravity-forms/README.md +++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/README.md @@ -23,8 +23,6 @@ This example shows you how to wire up a full headless WordPress backendโ€”comple ``` -``` - example-app/ โ”œโ”€โ”€ components/ # Vue form-field components & barrel file โ”œโ”€โ”€ composables/ # useGravityForm.js & useFormFields.js @@ -51,8 +49,8 @@ wp-env/ ### Setup Repository and Install ```bash -git clone https://github.com/your-org/nuxt-gravityforms-example.git -cd nuxt-gravityforms-example +git clone https://github.com/wpengine/hwptoolkit.git +cd examples/nuxt/nuxt-headlesswp-gravity-forms npm install echo "NUXT_PUBLIC_WORDPRESS_URL=http://localhost:8888" > example-app/.env @@ -63,7 +61,7 @@ echo "NUXT_PUBLIC_WORDPRESS_URL=http://localhost:8888" > example-app/.env 1. Start WP, import DB, then launch Nuxt: ```bash - npm run example:build + npm run example:setup ``` 2. Or run steps separately: @@ -89,7 +87,7 @@ By the end, you will have: | Command | Description | | ------------------------- | ---------------------------------------------------------------- | -| `npm run example:build` | Start WP env โ†’ import DB โ†’ launch Nuxt dev server | +| `npm run example:setup` | Start WP env โ†’ import DB โ†’ launch Nuxt dev server | | `npm run example:start` | Start WP env, then Nuxt dev server | | `npm run example:stop` | Stop the WordPress environment (wp-env stop) | | `npm run example:prune` | Destroy & rebuild the WP environment, then restartโ€”all in one go | diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/package.json b/examples/nuxt/nuxt-headlesswp-gravity-forms/package.json index 29344406..52dd56fb 100644 --- a/examples/nuxt/nuxt-headlesswp-gravity-forms/package.json +++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/package.json @@ -2,11 +2,11 @@ "name": "headlesswp-gravity-forms-nuxt-env", "version": "1.0.0", "scripts": { - "example:build": "npm run example:dev:install && npm run wp:start && npm run example:start", + "example:setup": "npm run example:dev:install && npm run wp:start && npm run example:start", "example:dev:install": "cd example-app && npm install && cd ..", "example:start": "npm run wp:start && npm run example:dev", "example:stop": "npm run wp:stop", - "example:prune": "wp-env destroy && npm run example:build && npm run example:start", + "example:prune": "wp-env destroy && npm run example:setup && npm run example:start", "example:dev": "npm --prefix ./example-app run dev", "wp:start": "npm install && wp-env start", "wp:stop": "wp-env stop",