chore: verification of examples

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.

examples/angular/template-hierarchy-data-fetching/backend/.env.example

@@ -0,0 +1 @@
+FRONTEND_URL=

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;

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"
   }
 }

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"],

examples/astro/previews/README.md

@@ -1,18 +1,25 @@
-# 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.
 
 > [!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.

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.                                |

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",

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.                       |

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",

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 |

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",

examples/sveltekit/template-hierarchy-data-fetching-urql/README.md

@@ -1,18 +1,18 @@
-# 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.
 
 > [!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.

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"
   }
 }