Skip to content

Commit 0defaee

Browse files
theodesptheodesp
authored
Merge pull request #468 from wpengine/chore-examples-verification-1
chore: verification of examples
2 parents dfa9e2f + 3ebc59c commit 0defaee

File tree

15 files changed

+60
-41
lines changed

15 files changed

+60
-41
lines changed

‎examples/angular/template-hierarchy-data-fetching/README.md‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,29 @@
11
# Angular Template Hierarchy and Data fetching Example
22

3-
In this example we show how to implement the WordPress Template Hierarchy in Angular for use with a Headless WordPress backend using WPGraphQL.
3+
In this example we show how to implement the **WordPress Template Hierarchy in Angular** for use with a Headless WordPress backend using WPGraphQL.
44

5-
## Getting Started
5+
## Getting Started 🚀
66

77
> [!IMPORTANT]
8-
> Docker Desktop needs to be installed to run WordPress locally.
8+
> **Docker Desktop** needs to be installed to run WordPress locally.
99
1010
1. Run `npm run example:setup` to install dependencies and configure the local WP server.
11-
2. Run `npm run backend:start` starts the backend server for template fetching at http://localhost:3000/api/templates
12-
3. Run `npm run example:start` to start the WordPress server and Angular development server.
11+
2. **Configure CORS:** Create a file named **`.env`** inside the **`/backend`** directory and add the following content to set the allowed frontend URL:
12+
```
13+
FRONTEND_URL=http://localhost:4200
14+
```
15+
*(For more details on the backend service, please refer to the **`/backend/README.md`** file.)*
16+
3. Run `npm run backend:start` starts the backend server for template fetching at **http://localhost:3000/api/templates**
17+
4. Run `npm run example:start` to start the WordPress server and Angular development server.
1318
1419
> [!NOTE]
1520
> 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.
1621
17-
## Trouble Shooting
22+
## Trouble Shooting 🛠️
23+
1824
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.
19-
- Run `npm run backend:start` and verify that http://localhost:3000/api/templates returns correct data.
20-
- Verify if you have added `/backend/.env` file with correct `FRONTEND_URL`.
21-
- check for any errors in the console
22-
2. In some cases, you might have to install @angluar/cli globally. In /example-app/ run `npm install -g @angular/cli@latest`
25+
- Run `npm run backend:start` and verify that **http://localhost:3000/api/templates** returns correct data.
26+
- **Verify that you have created the `/backend/.env` file with the correct `FRONTEND_URL`** to resolve CORS issues.
27+
- Check for any errors in the console.
28+
2. In some cases, you might have to install **`@angular/cli`** globally. In `/example-app/` run `npm install -g @angular/cli@latest`
2329
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‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
FRONTEND_URL=

‎examples/angular/template-hierarchy-data-fetching/example-app/src/main.server.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import { bootstrapApplication } from '@angular/platform-browser';
1+
import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
22
import { App } from './app/app';
33
import { config } from './app/app.config.server';
44

5-
const bootstrap = () => bootstrapApplication(App, config);
6-
5+
const bootstrap = (context: BootstrapContext) => bootstrapApplication(App, config, context);
76
export default bootstrap;

‎examples/angular/template-hierarchy-data-fetching/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,6 @@
2020
"wp:uploads:zip": "zip -r wp-env/uploads.zip wp-env/uploads"
2121
},
2222
"devDependencies": {
23-
"@wordpress/env": "^10.21.0"
23+
"@wordpress/env": "^10.34.0"
2424
}
2525
}

‎examples/astro/previews/.wp-env.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"phpVersion": "8.3",
33
"plugins": [
44
"https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip",
5-
"https://github.com/wpengine/hwptoolkit/releases/download/%40wpengine%2Fhwp-previews-wordpress-plugin-0.0.8/hwp-previews.zip",
5+
"https://github.com/wpengine/hwptoolkit/releases/download/%40wpengine%2Fhwp-previews-wordpress-plugin-0.0.12/hwp-previews.zip",
66
"https://github.com/wp-graphql/wpgraphql-ide/releases/latest/download/wpgraphql-ide.zip"
77
],
88
"themes": ["https://downloads.wordpress.org/theme/nude.1.2.zip"],

‎examples/astro/previews/README.md‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
1-
# Astro Template HIerarchy and Data fetching w/URQL Example
1+
# Astro Headless WordPress Previews Example 🚀
22

3-
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.
3+
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.
44

55
## Getting Started
66

77
> [!IMPORTANT]
8-
> Docker Desktop needs to be installed to run WordPress locally.
8+
> **Docker Desktop** needs to be installed to run WordPress locally.
99
1010
1. Run `npm run example:setup` to install dependencies and configure the local WP server.
1111
2. Run `npm run example:start` to start the WP server and Astro development server.
1212

1313
> [!NOTE]
1414
> 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.
1515
16-
## Trouble Shooting
16+
## How to Test Previews
1717

18-
To reset the WP server and re-run setup you can run `npm run example:prune` and confirm "Yes" at any prompts.
18+
1. After running `npm run example:start`, navigate to the WordPress Admin at **http://localhost:8888/wp-admin**.
19+
2. Log in using the credentials specified in the example's `wp-env.json`.
20+
3. Edit any draft post.
21+
4. In the editor, click the **"Preview"** button. The post should open in the Astro frontend, displaying the draft content.
22+
23+
## Trouble Shooting 🛠️
24+
25+
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‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ npm install
7777

7878
```
7979
cd examples/next/graphql-proxy-debug
80-
npm run example:build
80+
npm run example:setup
8181
```
8282

8383
This will:
@@ -97,7 +97,7 @@ This will:
9797

9898
| Command | Description |
9999
|------------------------|-----------------------------------------------------------------------------|
100-
| `example:build` | Prepares the environment, starts WordPress, imports the database, and starts the application. |
100+
| `example:setup` | Prepares the environment, starts WordPress, imports the database, and starts the application. |
101101
| `example:dev` | Runs the Next.js development server. |
102102
| `example:dev:install` | Installs required Next.js packages. |
103103
| `example:start` | Starts WordPress and the Next.js dev server. |

‎examples/next/proxied-graphql-debug/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
"version": "1.0.0",
44
"description": "A debugging utility for proxied GraphQL APIs with enhanced query complexity estimation and WordPress headless integration.",
55
"scripts": {
6-
"example:build": "npm run example:dev:install && npm run wp:start && npm run wp:db:import && npm run example:start",
6+
"example:setup": "npm run example:dev:install && npm run wp:start && npm run wp:db:import && npm run example:start",
77
"example:dev:install": "cd example-app && npm install && cd ..",
88
"example:start": "npm run wp:start && npm run example:dev",
99
"example:stop": "npm run wp:stop",
10-
"example:prune": "wp-env destroy && npm run example:build && npm run example:start",
10+
"example:prune": "wp-env destroy && npm run example:setup && npm run example:start",
1111
"example:dev": "npm --prefix ./example-app run dev",
1212
"wp:start": "npm install && wp-env start",
1313
"wp:stop": "wp-env stop",

‎examples/next/proxied-sitemap-apollo/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ http://localhost:3000/sitemap.xml
9494

9595
| Command | Description |
9696
|------------------------|-----------------------------------------------------------------------------|
97-
| `example:build` | Prepares the environment by starting WordPress, importing the database, and starting the application. |
97+
| `example:setup` | Prepares the environment by starting WordPress, importing the database, and starting the application. |
9898
| `example:dev` | Runs the Next.js development server. |
9999
| `example:dev:install` | Installs the required Next.js packages. |
100100
| `example:start` | Starts WordPress and the Next.js development server. |

‎examples/next/proxied-sitemap-apollo/example-app/package-lock.json‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)