chore: wp-env backport nextjs apollo filesystem routing

examples/next/apollo-client-filesystem-routing/.gitignore

@@ -0,0 +1,3 @@
+example-app/package-lock.json
+package-lock.json
+wp-env/__MACOSX

examples/next/apollo-client-filesystem-routing/.wp-env.json

@@ -0,0 +1,24 @@
+{
+  "phpVersion": "7.4",
+  "plugins": [
+    "https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip",
+    "https://github.com/AdvancedCustomFields/acf/releases/download/6.3.12/advanced-custom-fields-6.3.12.zip",
+    "https://github.com/wp-graphql/wpgraphql-acf/releases/latest/download/wpgraphql-acf.zip"
+  ],
+  "config": {
+    "WP_DEBUG": true,
+    "SCRIPT_DEBUG": false,
+    "GRAPHQL_DEBUG": true,
+    "WP_DEBUG_LOG": true,
+    "WP_DEBUG_DISPLAY": false,
+    "SAVEQUERIES": false
+  },
+  "mappings": {
+    "db": "./wp-env/db",
+    "wp-content/uploads": "./wp-env/uploads",
+    ".htaccess": "./wp-env/setup/.htaccess"
+  },
+  "lifecycleScripts": {
+    "afterStart": "wp-env run cli -- wp plugin update wpgraphql-acf && wp-env run cli -- wp rewrite structure '/posts/%postname%/' && wp-env run cli -- wp rewrite flush"
+  }
+}

examples/next/apollo-client-filesystem-routing/README.md

@@ -0,0 +1,107 @@
+# Next.js + WPGraphQL Headless CMS
+
+This is a [Next.js](https://nextjs.org) project integrated with **WPGraphQL** and **WPGraphQL for ACF** to build a headless WordPress-powered site.
+
+## Screenshots
+
+After following the installation steps, you should have the example pages as shown in the screenshots below:
+
+|                                                           |                                                             |
+| :-------------------------------------------------------: | :---------------------------------------------------------: |
+|     ![homepage](./screenshots/home.png)<br>Home page      |         ![posts](./screenshots/posts.png)<br>Posts          |
+| ![categories](./screenshots/categories.png)<br>Categories | ![category](./screenshots/category.png)<br>Category archive |
+| ![cpt](./screenshots/single-cpt.png)<br>Custom post type  |    ![post](./screenshots/single-post.png)<br>Single post    |
+
+## Project Structure
+
+This project follows Next.js file-based routing. Based on the WordPress permalink structure, the key pages are:
+
+```bash
+src/pages
+├── [slug].js         # Dynamic page for general posts or pages
+├── _app.js           # Next.js global settings
+├── _document.js      # Document structure
+├── api
+│   └── hello.js      # Example API route
+├── category
+│   ├── [category].js # Dynamic page for categories
+│   └── index.js      # Categories index page
+├── index.js          # Homepage (lists latest posts, movies, categories)
+├── movies
+│   ├── [slug].js     # Dynamic page for individual movies
+│   └── index.js      # Movies listing page
+└── posts
+    ├── [slug].js     # Dynamic page for individual posts
+    └── index.js      # Posts listing page
+```
+
+## Running the example with wp-env
+
+### Prerequisites
+
+- Node.js (v18+ recommended)
+- [Docker](https://www.docker.com/) (if you plan on running the example see details below)
+
+**Note** Please make sure you have all prerequisites installed as mentioned above and Docker running (`docker ps`)
+
+### Setup Repository and Packages
+
+- Clone the repo `git clone https://github.com/wpengine/hwptoolkit.git`
+- Install packages `cd hwptoolkit && npm install`
+- Setup a .env file under `examples/next/apollo-client-filesystem-routing/example-app` and add these values inside:
+
+```
+NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8888
+```
+
+or run the command below:
+
+```bash
+echo "NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8888" > examples/next/apollo-client-filesystem-routing/example-app/.env
+```
+
+### Build and start the application
+
+- `cd examples/next/apollo-client-filesystem-routing`
+- Then run `npm run example:build` will build and start your application.
+- This does the following:
+  - Unzips `wp-env/uploads.zip` to `wp-env/uploads` which is mapped to the wp-content/uploads directory for the Docker container.
+  - Starts up [wp-env](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/)
+  - Imports the database from [wp-env/db/database.sql](wp-env/db/database.sql)
+  - Install Next.js dependencies for `example-app`
+  - Runs the Next.js dev script
+
+Congratulations, WordPress should now be fully set up.
+
+| Frontend                                         | Admin                                                              |
+| ------------------------------------------------ | ------------------------------------------------------------------ |
+| [http://localhost:3000/](http://localhost:3000/) | [http://localhost:8888/wp-admin/](http://localhost:8888/wp-admin/) |
+
+> **Note:** The login details for the admin is username "admin" and password "password"
+
+### Command Reference
+
+| Command               | Description                                                                                                             |
+| --------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `example:build`       | Prepares the environment by unzipping images, 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.                                                                    |
+| `example:stop`        | Stops the WordPress environment.                                                                                        |
+| `example:prune`       | Rebuilds and restarts the application by destroying and recreating the WordPress environment.                           |
+| `wp:start`            | Starts the WordPress environment.                                                                                       |
+| `wp:stop`             | Stops the WordPress environment.                                                                                        |
+| `wp:destroy`          | Completely removes the WordPress environment.                                                                           |
+| `wp:db:query`         | Executes a database query within the WordPress environment.                                                             |
+| `wp:db:export`        | Exports the WordPress database to `wp-env/db/database.sql`.                                                             |
+| `wp:db:import`        | Imports the WordPress database from `wp-env/db/database.sql`.                                                           |
+| `wp:images:unzip`     | Extracts the WordPress uploads directory.                                                                               |
+| `wp:images:zip`       | Compresses the WordPress uploads directory.                                                                             |
+
+> **Note** You can run `npm run 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`.
+
+### Database access
+
+If you need database access add the following to your wp-env `"phpmyadminPort": 11111,` (where port 11111 is not allocated).
+
+You can check if a port is free by running `lsof -i :11111`

examples/nextjs-pages-router/apollo-client-filesystem-routing/.gitignore → examples/next/apollo-client-filesystem-routing/example-app/.gitignore

@@ -39,3 +39,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+package-lock.json

examples/nextjs-pages-router/apollo-client-filesystem-routing/package.json → examples/next/apollo-client-filesystem-routing/example-app/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "apollo-client-filesystem-routing",
+  "name": "apollo-client-filesystem-routing-example-app",
   "version": "0.1.0",
   "private": true,
   "scripts": {

examples/next/apollo-client-filesystem-routing/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "apollo-client-filesystem-routing",
+  "version": "1.0.0",
+  "description": "A Next.js project integrated with WPGraphQL and WPGraphQL for ACF to build a headless WordPress-powered site.",
+  "scripts": {
+    "example:build": "npm run wp:images:unzip && 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:dev": "npm --prefix ./example-app run dev",
+    "wp:start": "npm install && wp-env start",
+    "wp:stop": "wp-env stop",
+    "wp:destroy": "wp-env destroy --config ./wp-env/wp-env.json",
+    "wp:db:query": "wp-env run cli -- wp db query",
+    "wp:db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql",
+    "wp:db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql",
+    "wp:images:unzip": "rm -rf wp-env/uploads/ && unzip wp-env/uploads.zip -d wp-env;",
+    "wp:images:zip": "zip -r wp-env/uploads.zip wp-env/uploads",
+    "wp-env": "wp-env"
+  },
+  "keywords": [
+    "headless",
+    "wordpress",
+    "nextjs",
+    "apollo-client",
+    "fullstack",
+    "headless-cms",
+    "wpgraphql",
+    "headless-wordpress",
+    "nextjs-pages-router",
+    "wp-env-configuration",
+    "fullstack-example"
+  ],
+  "author": "hwptoolkit",
+  "license": "BSD-0-Clause",
+  "dependencies": {
+    "@wordpress/env": "^10.20.0"
+  }
+}

examples/next/apollo-client-filesystem-routing/wp-env/setup/.htaccess

@@ -0,0 +1,21 @@
+<IfModule mod_headers.c>
+    Header set Access-Control-Allow-Origin "*"
+    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
+    Header set Access-Control-Allow-Headers "Authorization, Content-Type"
+</IfModule>
+
+# BEGIN WordPress
+# The directives (lines) between "BEGIN WordPress" and "END WordPress" are
+# dynamically generated, and should only be modified via WordPress filters.
+# Any changes to the directives between these markers will be overwritten.
+<IfModule mod_rewrite.c>
+RewriteEngine On
+RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
+RewriteBase /
+RewriteRule ^index\.php$ - [L]
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule . /index.php [L]
+</IfModule>
+
+# END WordPress