Skip to content

Commit 0cd81cd

Browse files
theodesptheodesp
authored
Merge pull request #125 from wpengine/next-hybrid-sitemaps-apollo-example
feat: add example hybrid sitemap support
2 parents e6bc5d4 + 094e4cc commit 0cd81cd

36 files changed

+8888
-0
lines changed

Diff for: ‎examples/next/hybrid-sitemap-apollo/.wp-env.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"phpVersion": "7.4",
3+
"plugins": [
4+
"https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip",
5+
"https://github.com/AdvancedCustomFields/acf/releases/download/6.3.12/advanced-custom-fields-6.3.12.zip",
6+
"https://github.com/wp-graphql/wpgraphql-acf/releases/latest/download/wpgraphql-acf.zip"
7+
],
8+
"config": {
9+
"WP_DEBUG": true,
10+
"SCRIPT_DEBUG": false,
11+
"GRAPHQL_DEBUG": true,
12+
"WP_DEBUG_LOG": true,
13+
"WP_DEBUG_DISPLAY": false,
14+
"SAVEQUERIES": false
15+
},
16+
"mappings": {
17+
"db": "./wp-env/db",
18+
"wp-content/uploads": "./wp-env/uploads",
19+
".htaccess": "./wp-env/setup/.htaccess"
20+
},
21+
"lifecycleScripts": {
22+
"afterStart": "wp-env run cli -- wp plugin update wpgraphql-acf && wp-env run cli -- wp rewrite structure '/%postname%/' && wp-env run cli -- wp rewrite flush"
23+
}
24+
}

Diff for: ‎examples/next/hybrid-sitemap-apollo/README.md

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
# WordPress to Next.js Sitemap Integration
2+
## Overview
3+
A Next.js application that fetches and transforms WordPress sitemaps with clean URL formatting, providing a seamless integration between WordPress content and Next.js frontend.
4+
5+
## Features
6+
7+
* XML Sitemap Transformation - Fetches WordPress sitemaps and transforms URLs to match your frontend
8+
* Clean URL Structure - Presents sitemap links with clean, user-friendly URLs
9+
* XSL Styling Support - Custom XSL stylesheets for better presentation of sitemap data
10+
* Sitemap Index Support - Handles both individual sitemaps and sitemap index files
11+
* SEO Friendly - Maintains all SEO benefits of XML sitemaps while using your frontend domain
12+
13+
## Prerequisites
14+
15+
* Node.js (v18+ recommended)
16+
* Next.js project
17+
* WordPress site with XML sitemaps enabled (core functionality or via plugin)
18+
19+
## Setup
20+
21+
### Environment Variables
22+
23+
Create or update your .env.local file with:
24+
```
25+
NEXT_PUBLIC_WORDPRESS_URL=http://your-wordpress-site.com
26+
NEXT_PUBLIC_FRONTEND_URL=http://your-nextjs-site.com
27+
```
28+
29+
Create API Route
30+
31+
Create a file at `pages/sitemap.xml.js` with the code provided in this repository.
32+
33+
## Add XSL Stylesheet
34+
35+
Place the `sitemap.xsl` file in your public directory.
36+
37+
## How It Works
38+
This integration:
39+
40+
* Intercepts requests to `/sitemap.xml` on your Next.js site
41+
* Fetches the corresponding sitemap from your WordPress site
42+
* Transforms all URLs from WordPress domain to your frontend domain
43+
* Applies custom XSL styling for better presentation
44+
* Returns the transformed XML to the client
45+
46+
For sitemap index files, it also:
47+
48+
* Creates clean, friendly URLs for each child sitemap
49+
* Maintains proper linking through custom attributes
50+
51+
## API Routes examples
52+
53+
`/sitemap.xml` - Main sitemap endpoint that fetches and transforms WordPress sitemaps
54+
`/sitemap.xml?sitemap=/wp-sitemap-posts-post-1.xml` - Direct access to specific WordPress sitemaps
55+
56+
# Running the example with wp-env
57+
58+
## Prerequisites
59+
60+
**Note** Please make sure you have all prerequisites installed as mentioned above and Docker running (`docker ps`)
61+
62+
## Setup Repository and Packages
63+
64+
- Clone the repo `git clone https://github.com/wpengine/hwptoolkit.git`
65+
- Install packages `cd hwptoolkit && pnpm install`
66+
- Setup a .env file under `examples/next/hybrid-sitemap-apollo/example-app` with `NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8888`
67+
e.g.
68+
69+
```bash
70+
echo "NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8888" > examples/next/hybrid-sitemap-apollo/example-app/.env
71+
```
72+
73+
## Build and start the application
74+
75+
- `cd examples/next/hybrid-sitemap-apollo`
76+
- Then run `pnpm example:build` will build and start your application.
77+
- This does the following:
78+
- Unzips `wp-env/uploads.zip` to `wp-env/uploads` which is mapped to the wp-content/uploads directory for the Docker container.
79+
- Starts up [wp-env](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/)
80+
- Imports the database from [wp-env/db/database.sql](wp-env/db/database.sql)
81+
- Install Next.js dependencies for `example-app`
82+
- Runs the Next.js dev script
83+
84+
Congratulations, WordPress should now be fully set up.
85+
86+
| Frontend | Admin |
87+
|----------|------------------------------|
88+
| [http://localhost:3000/](http://localhost:3000/) | [http://localhost:8888/wp-admin/](http://localhost:8888/wp-admin/) |
89+
90+
91+
> **Note:** The login details for the admin is username "admin" and password "password"
92+
93+
94+
## Command Reference
95+
96+
| Command | Description |
97+
|------------------------|-----------------------------------------------------------------------------|
98+
| `example:build` | Prepares the environment by unzipping images, starting WordPress, importing the database, and starting the application. |
99+
| `example:dev` | Runs the Next.js development server. |
100+
| `example:dev:install` | Installs the required Next.js packages. |
101+
| `example:start` | Starts WordPress and the Next.js development server. |
102+
| `example:stop` | Stops the WordPress environment. |
103+
| `example:prune` | Rebuilds and restarts the application by destroying and recreating the WordPress environment. |
104+
| `wp:start` | Starts the WordPress environment. |
105+
| `wp:stop` | Stops the WordPress environment. |
106+
| `wp:destroy` | Completely removes the WordPress environment. |
107+
| `wp:db:query` | Executes a database query within the WordPress environment. |
108+
| `wp:db:export` | Exports the WordPress database to `wp-env/db/database.sql`. |
109+
| `wp:db:import` | Imports the WordPress database from `wp-env/db/database.sql`. |
110+
| `wp:images:unzip` | Extracts the WordPress uploads directory. |
111+
| `wp:images:zip` | Compresses the WordPress uploads directory. |
112+
113+
114+
>**Note** You can run `pnpm wp-env` and use any other wp-env command. You can also see <https://www.npmjs.com/package/@wordpress/env> for more details on how to use or configure `wp-env`.
115+
116+
### Database access
117+
118+
If you need database access add the following to your wp-env `"phpmyadminPort": 11111,` (where port 11111 is not allocated).
119+
120+
You can check if a port is free by running `lsof -i :11111`

Diff for: ‎examples/next/hybrid-sitemap-apollo/example-app/.gitignore

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.*
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/versions
12+
13+
# testing
14+
/coverage
15+
16+
# next.js
17+
/.next/
18+
/out/
19+
20+
# production
21+
/build
22+
23+
# misc
24+
.DS_Store
25+
*.pem
26+
27+
# debug
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
.pnpm-debug.log*
32+
33+
# env files (can opt-in for committing if needed)
34+
.env*
35+
36+
# vercel
37+
.vercel
38+
39+
# typescript
40+
*.tsbuildinfo
41+
next-env.d.ts

Diff for: ‎examples/next/hybrid-sitemap-apollo/example-app/README.md

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/pages/api-reference/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
# or
14+
bun dev
15+
```
16+
17+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18+
19+
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
20+
21+
[API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
22+
23+
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) instead of React pages.
24+
25+
This project uses [`next/font`](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
26+
27+
## Learn More
28+
29+
To learn more about Next.js, take a look at the following resources:
30+
31+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
32+
- [Learn Next.js](https://nextjs.org/learn-pages-router) - an interactive Next.js tutorial.
33+
34+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
35+
36+
## Deploy on Vercel
37+
38+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
39+
40+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/pages/building-your-application/deploying) for more details.

Diff for: ‎examples/next/hybrid-sitemap-apollo/example-app/eslint.config.mjs

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { dirname } from "path";
2+
import { fileURLToPath } from "url";
3+
import { FlatCompat } from "@eslint/eslintrc";
4+
5+
const __filename = fileURLToPath(import.meta.url);
6+
const __dirname = dirname(__filename);
7+
8+
const compat = new FlatCompat({
9+
baseDirectory: __dirname,
10+
});
11+
12+
const eslintConfig = [...compat.extends("next/core-web-vitals")];
13+
14+
export default eslintConfig;

Diff for: ‎examples/next/hybrid-sitemap-apollo/example-app/jsconfig.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"compilerOptions": {
3+
"paths": {
4+
"@/*": ["./src/*"]
5+
}
6+
}
7+
}

Diff for: ‎examples/next/hybrid-sitemap-apollo/example-app/next.config.mjs

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {
3+
reactStrictMode: true,
4+
};
5+
6+
export default nextConfig;

0 commit comments

Comments
 (0)