From 5c6ec861710e8e594530d4a4b7dc344ffe074bea Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Tue, 27 Oct 2026 09:15:15 -0400 Subject: [PATCH 1/5] chore(examples): standardize npm scripts across examples --- examples/README.md | 49 +++++++++++----- .../README.md | 16 +++--- .../backend/.env.example | 2 +- .../package.json | 25 ++++---- .../README.md | 8 +-- .../package.json | 19 +++---- examples/next/apollo-authentication/README.md | 24 ++------ .../next/apollo-authentication/package.json | 22 +++---- .../next/apollo-client-data-fetch/README.md | 24 ++------ .../apollo-client-data-fetch/package.json | 26 ++++----- .../README.md | 24 ++------ .../package.json | 26 ++++----- .../client-app-router-fetch-data/README.md | 24 ++------ .../client-app-router-fetch-data/package.json | 26 ++++----- .../README.md | 29 +++------- .../package.json | 28 ++++----- examples/next/custom-sitemap-apollo/README.md | 24 ++------ .../next/custom-sitemap-apollo/package.json | 26 ++++----- .../README.md | 24 ++------ .../package.json | 26 ++++----- examples/next/hybrid-sitemap-apollo/README.md | 24 ++------ .../next/hybrid-sitemap-apollo/package.json | 54 ++++++++---------- examples/next/proxied-graphql-debug/README.md | 28 +++------ .../next/proxied-graphql-debug/package.json | 54 ++++++++---------- .../next/proxied-sitemap-apollo/README.md | 24 ++------ .../next/proxied-sitemap-apollo/package.json | 22 +++---- examples/next/template-hierarchy/README.md | 8 +-- examples/next/template-hierarchy/package.json | 19 +++---- examples/next/woocommerce/README.md | 27 +++------ examples/next/woocommerce/package.json | 24 ++++---- .../next/wp-theme-rendered-blocks/README.md | 5 +- .../wp-theme-rendered-blocks/package.json | 24 ++++---- .../nuxt-headlesswp-gravity-forms/README.md | 29 ++++------ .../package.json | 22 +++---- .../README.md | 8 +-- .../package.json | 23 ++++---- .../README.md | 8 +-- .../package.json | 23 ++++---- .../examples/hwp-preview-astro/README.md | 10 ++-- .../examples/hwp-preview-astro/package.json | 19 +++---- .../examples/hwp-preview-rest/README.md | 24 ++------ .../examples/hwp-preview-rest/package.json | 26 ++++----- .../examples/hwp-preview-wpgraphql/README.md | 24 ++------ .../hwp-preview-wpgraphql/package.json | 26 ++++----- .../wpgraphql-logging-nextjs/README.md | 24 ++------ .../wpgraphql-logging-nextjs/package.json | 26 ++++----- .../examples/webhooks-isr/README.md | 34 +++-------- .../examples/webhooks-isr/package.json | 57 +++++++++---------- 48 files changed, 442 insertions(+), 726 deletions(-) diff --git a/examples/README.md b/examples/README.md index 804e34eb7..233e80458 100644 --- a/examples/README.md +++ b/examples/README.md @@ -39,6 +39,29 @@ This directory contains examples demonstrating how to use various features of th | ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [nuxt-headlesswp-gravity-forms](nuxt/nuxt-headlesswp-gravity-forms) | Shows you how to wire up a full headless WordPress backend—complete with Gravity Forms, WPGraphQL, and a pre-built "Questionnaire" form—alongside a Nuxt 3 front end. | +## Running an example + +Every example has the same npm scripts. Run them from the example's directory (the one containing `.wp-env.json`). You'll need [Docker](https://www.docker.com/) for the local WordPress. + +```bash +npm run setup # once: install dependencies, start WordPress, import the database +npm run dev # start WordPress and the front end +``` + +| Script | What it does | +| --- | --- | +| `setup` | Installs dependencies, unzips any media into `wp-env/uploads`, starts WordPress and imports `wp-env/db/database.sql`. Doesn't start the front end. | +| `dev` | Starts WordPress and the front end. | +| `app:dev` | Starts only the front end. Use it to restart the app while WordPress keeps running. | +| `stop` | Stops WordPress. Stopping the front end doesn't stop WordPress. | +| `clean` | Removes the WordPress environment. Run `setup` again to start fresh. | +| `wp:start` | Starts only WordPress. | +| `db:import` / `db:export` | Imports or exports `wp-env/db/database.sql`. | +| `db:query` | Runs a SQL query against the WordPress database, e.g. `npm run db:query -- "SELECT 1"`. | +| `assets:unzip` / `assets:zip` | Unzips or re-zips `wp-env/uploads.zip`, for examples that include media. | + +Some examples add their own scripts on top; their READMEs list them. For any other wp-env command, use `npx wp-env`. + ## Contributing If you feel like something is missing or you want to add an example for another framework, we encourage you to contribute! Please check out our [Contributing Guide](https://github.com/wpengine/hwptoolkit/blob/main/CONTRIBUTING.md) for more details. @@ -85,26 +108,24 @@ You can copy on of existing examples to use it as a _skeleton_ of your new examp 3. **Scripts** - Scripts in your package.json help automate common tasks. You can use our standard scripts to achieve the recommended workflow.. + Scripts in your package.json help automate common tasks. Use the standard scripts so every example works the same way: ```json "scripts": { - "example:build": "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-env": "wp-env" + "setup": "npm install && npm --prefix ./example-app install && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", + "wp:start": "wp-env start", + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query" }, ``` + If the example includes media in `wp-env/uploads.zip`, add `assets:unzip` and `assets:zip`, and run `npm run assets:unzip` in `setup` before `wp:start`. See [Running an example](#running-an-example) for what each script does. + 4. **Documentation (README.md)** A clear README.md with essential information would guide the new developers effectively and reduce the errors. Consider including the information below: diff --git a/examples/angular/template-hierarchy-data-fetching/README.md b/examples/angular/template-hierarchy-data-fetching/README.md index 85636c2f3..42aabce76 100644 --- a/examples/angular/template-hierarchy-data-fetching/README.md +++ b/examples/angular/template-hierarchy-data-fetching/README.md @@ -12,23 +12,23 @@ In this example we show how to implement the **WordPress Template Hierarchy in A > [!IMPORTANT] > **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. **Configure CORS:** Create a file named **`.env`** inside the **`/backend`** directory and add the following content to set the allowed frontend URL: +1. Run `npm run setup` to install dependencies and configure the local WP server. +2. **Configure CORS:** `setup` copies **`/backend/.env.example`** to **`/backend/.env`**, which sets the allowed frontend URL. Change it if your Angular app runs elsewhere: ``` 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. +3. Run `npm run backend:dev` to start the backend server for template fetching at **http://localhost:3000/api/templates** +4. Run `npm run dev` 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. +> When you kill the long running process this will not shutdown the local WP instance, only Angular. Run `npm run app:dev` to restart only the front end, or `npm run stop` to stop the local WP server. ## 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 that you have created the `/backend/.env` file with the correct `FRONTEND_URL`** to resolve CORS issues. +- Run `npm run backend:dev` and verify that **http://localhost:3000/api/templates** returns correct data. +- **Verify that `/backend/.env` exists and has 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 +3. To reset the WP server, run `npm run clean` and confirm "Yes" at the prompt, then run `npm run setup` again. \ 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 index fb5123e1b..5bafe04f8 100644 --- a/examples/angular/template-hierarchy-data-fetching/backend/.env.example +++ b/examples/angular/template-hierarchy-data-fetching/backend/.env.example @@ -1 +1 @@ -FRONTEND_URL= \ No newline at end of file +FRONTEND_URL=http://localhost:4200 diff --git a/examples/angular/template-hierarchy-data-fetching/package.json b/examples/angular/template-hierarchy-data-fetching/package.json index cf578246c..ba10d2d3c 100644 --- a/examples/angular/template-hierarchy-data-fetching/package.json +++ b/examples/angular/template-hierarchy-data-fetching/package.json @@ -3,21 +3,18 @@ "type": "module", "version": "1.0.0", "scripts": { - "example:bootstrap": "npm install & npm run app:install", - "example:start": "npm run wp:start && npm run app:dev", - "example:setup": "npm run example:bootstrap && npm run wp:uploads:unzip && npm run wp:start && npm run wp:db:import && npm run example:stop", - "example:stop": "npm run wp:stop", - "example:prune": "npm run wp:destroy && npm run example:setup && npm run example:start", - "app:dev": "cd example-app && ng serve --open", - "app:install": "npm install && cd backend && npm install", - "backend:start": "cd backend && npm run dev", + "setup": "npm install && npm --prefix ./example-app install && npm --prefix ./backend install && node -e \"const fs=require('fs');fs.existsSync('backend/.env')||fs.copyFileSync('backend/.env.example','backend/.env')\" && npm run assets:unzip && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app start", + "stop": "wp-env stop", + "clean": "wp-env destroy", "wp:start": "wp-env start", - "wp:stop": "wp-env stop", - "wp:destroy": "wp-env destroy --config ./wp-env/wp-env.json", - "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:uploads:unzip": "rm -rf wp-env/uploads/ && unzip wp-env/uploads.zip;", - "wp:uploads:zip": "zip -r wp-env/uploads.zip wp-env/uploads" + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query", + "assets:zip": "zip -r wp-env/uploads.zip wp-env/uploads", + "assets:unzip": "rm -rf wp-env/uploads && unzip -oq wp-env/uploads.zip", + "backend:dev": "npm --prefix ./backend run dev" }, "devDependencies": { "@wordpress/env": "^12.0.0" diff --git a/examples/astro/template-hierarchy-data-fetching-urql/README.md b/examples/astro/template-hierarchy-data-fetching-urql/README.md index 9f01c09c1..af1cc9f27 100644 --- a/examples/astro/template-hierarchy-data-fetching-urql/README.md +++ b/examples/astro/template-hierarchy-data-fetching-urql/README.md @@ -12,12 +12,12 @@ In this example we show how to implement the WP Template Hierarchy in Astro for > [!IMPORTANT] > 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. +1. Run `npm run setup` to install dependencies and configure the local WP server. +2. Run `npm run dev` 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. +> When you kill the long running process this will not shutdown the local WP instance, only Astro. Run `npm run app:dev` to restart only the front end, or `npm run stop` to stop the local WP server. ## 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, run `npm run clean` and confirm "Yes" at the prompt, then run `npm run setup` again. diff --git a/examples/astro/template-hierarchy-data-fetching-urql/package.json b/examples/astro/template-hierarchy-data-fetching-urql/package.json index 8fbc1b431..3a37c8fa1 100644 --- a/examples/astro/template-hierarchy-data-fetching-urql/package.json +++ b/examples/astro/template-hierarchy-data-fetching-urql/package.json @@ -3,18 +3,15 @@ "type": "module", "version": "0.0.1", "scripts": { - "example:bootstrap": "npm install & npm run app:install", - "example:start": "npm run wp:start && npm run app:dev", - "example:setup": "npm run example:bootstrap && npm run wp:start && npm run wp:db:import && npm run example:stop", - "example:stop": "npm run wp:stop", - "example:prune": "npm run wp:destroy && npm run example:setup && npm run example:start", - "app:dev": "cd example-app && pwd && npm run dev && cd ..", - "app:install": "cd ./example-app && npm install && cd ..", + "setup": "npm install && npm --prefix ./example-app install && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", "wp:start": "wp-env start", - "wp:stop": "wp-env stop", - "wp:destroy": "wp-env destroy --config ./wp-env/wp-env.json", - "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" + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query" }, "devDependencies": { "@wordpress/env": "^12.0.0" diff --git a/examples/next/apollo-authentication/README.md b/examples/next/apollo-authentication/README.md index 2a3886972..5d1e21185 100644 --- a/examples/next/apollo-authentication/README.md +++ b/examples/next/apollo-authentication/README.md @@ -58,12 +58,11 @@ echo "NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8888" > examples/next/apollo-au ### Build and start the application - `cd examples/next/apollo-authentication` -- Then run `npm run example:build` will build and start your application. -- This does the following: +- Run `npm run setup` to set up the example, then `npm run dev` to start it. +- `setup` does the following: - 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. @@ -75,22 +74,9 @@ Congratulations, WordPress should now be fully set up. ### Command Reference -| Command | Description | -| --------------------- | ----------------------------------------------------------------------------------------------------------------------- | -| `example:build` | 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. | -| `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`. | - -> **Note** You can run `npm run wp-env` and use any other wp-env command. You can also see for more details on how to use or configure `wp-env`. +This example uses the [standard example scripts](../../README.md#running-an-example): run `npm run setup` once, then `npm run dev`. Use `npm run app:dev` to restart only the front end while WordPress keeps running, `npm run stop` to stop WordPress, and `npm run clean` to remove it. + +> **Note** You can run `npx wp-env` for any other wp-env command. See for details. ### Database access diff --git a/examples/next/apollo-authentication/package.json b/examples/next/apollo-authentication/package.json index 15a7609ad..458d5894d 100644 --- a/examples/next/apollo-authentication/package.json +++ b/examples/next/apollo-authentication/package.json @@ -3,19 +3,15 @@ "version": "1.0.0", "description": "An example demonstrating authentication with username and password in a headless WordPress setup, running Next.js as a frontend framework.", "scripts": { - "example:build": "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-env": "wp-env" + "setup": "npm install && npm --prefix ./example-app install && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", + "wp:start": "wp-env start", + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query" }, "keywords": [ "headless", diff --git a/examples/next/apollo-client-data-fetch/README.md b/examples/next/apollo-client-data-fetch/README.md index d33a62454..3c9825e49 100644 --- a/examples/next/apollo-client-data-fetch/README.md +++ b/examples/next/apollo-client-data-fetch/README.md @@ -90,12 +90,11 @@ echo "NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8888\\nNEXT_PRIVACY_POLICY_URI= ### Build and start the application - `cd examples/next/apollo-client-data-fetch` -- Then run `npm run example:build` will build and start your application. -- This does the following: +- Run `npm run setup` to set up the example, then `npm run dev` to start it. +- `setup` does the following: - 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. @@ -107,22 +106,9 @@ Congratulations, WordPress should now be fully set up. ### Command Reference -| Command | Description | -| --------------------- | ----------------------------------------------------------------------------------------------------------------------- | -| `example:build` | 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. | -| `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`. | - -> **Note** You can run `npm run wp-env` and use any other wp-env command. You can also see for more details on how to use or configure `wp-env`. +This example uses the [standard example scripts](../../README.md#running-an-example): run `npm run setup` once, then `npm run dev`. Use `npm run app:dev` to restart only the front end while WordPress keeps running, `npm run stop` to stop WordPress, and `npm run clean` to remove it. + +> **Note** You can run `npx wp-env` for any other wp-env command. See for details. ### Database access diff --git a/examples/next/apollo-client-data-fetch/package.json b/examples/next/apollo-client-data-fetch/package.json index 78c56df82..3dab045af 100644 --- a/examples/next/apollo-client-data-fetch/package.json +++ b/examples/next/apollo-client-data-fetch/package.json @@ -3,21 +3,17 @@ "version": "1.0.0", "description": "An example demonstrating how to integrate WordPress as a headless CMS with a Next.js frontend using Apollo Client", "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" + "setup": "npm install && npm --prefix ./example-app install && npm run assets:unzip && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", + "wp:start": "wp-env start", + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query", + "assets:zip": "zip -r wp-env/uploads.zip wp-env/uploads", + "assets:unzip": "rm -rf wp-env/uploads && unzip -oq wp-env/uploads.zip" }, "keywords": [ "headless", diff --git a/examples/next/apollo-client-filesystem-routing/README.md b/examples/next/apollo-client-filesystem-routing/README.md index 11be5056f..e794224fb 100644 --- a/examples/next/apollo-client-filesystem-routing/README.md +++ b/examples/next/apollo-client-filesystem-routing/README.md @@ -68,12 +68,11 @@ echo "NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8888" > examples/next/apollo-cl ### 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: +- Run `npm run setup` to set up the example, then `npm run dev` to start it. +- `setup` does the following: - 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. @@ -85,22 +84,9 @@ Congratulations, WordPress should now be fully set up. ### Command Reference -| Command | Description | -| --------------------- | ----------------------------------------------------------------------------------------------------------------------- | -| `example:build` | 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. | -| `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`. | - -> **Note** You can run `npm run wp-env` and use any other wp-env command. You can also see for more details on how to use or configure `wp-env`. +This example uses the [standard example scripts](../../README.md#running-an-example): run `npm run setup` once, then `npm run dev`. Use `npm run app:dev` to restart only the front end while WordPress keeps running, `npm run stop` to stop WordPress, and `npm run clean` to remove it. + +> **Note** You can run `npx wp-env` for any other wp-env command. See for details. ### Database access diff --git a/examples/next/apollo-client-filesystem-routing/package.json b/examples/next/apollo-client-filesystem-routing/package.json index 3e21d6f99..3a1a6d44a 100644 --- a/examples/next/apollo-client-filesystem-routing/package.json +++ b/examples/next/apollo-client-filesystem-routing/package.json @@ -3,21 +3,17 @@ "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" + "setup": "npm install && npm --prefix ./example-app install && npm run assets:unzip && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", + "wp:start": "wp-env start", + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query", + "assets:zip": "zip -r wp-env/uploads.zip wp-env/uploads", + "assets:unzip": "rm -rf wp-env/uploads && unzip -oq wp-env/uploads.zip" }, "keywords": [ "headless", diff --git a/examples/next/client-app-router-fetch-data/README.md b/examples/next/client-app-router-fetch-data/README.md index 27edb661d..548a57558 100644 --- a/examples/next/client-app-router-fetch-data/README.md +++ b/examples/next/client-app-router-fetch-data/README.md @@ -95,12 +95,11 @@ echo "NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8888" > examples/next/client-ap ## Build and start the application - `cd examples/next/client-app-router-fetch-data` -- Then run `npm run example:build` will build and start your application. -- This does the following: +- Run `npm run setup` to set up the example, then `npm run dev` to start it. +- `setup` does the following: - 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. @@ -114,22 +113,9 @@ Congratulations, WordPress should now be fully set up. ## Command Reference -| Command | Description | -|------------------------|-----------------------------------------------------------------------------| -| `example:build` | 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. | -| `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`. | - ->**Note** You can run `npm run wp-env` and use any other wp-env command. You can also see for more details on how to use or configure `wp-env`. +This example uses the [standard example scripts](../../README.md#running-an-example): run `npm run setup` once, then `npm run dev`. Use `npm run app:dev` to restart only the front end while WordPress keeps running, `npm run stop` to stop WordPress, and `npm run clean` to remove it. + +> **Note** You can run `npx wp-env` for any other wp-env command. See for details. ### Database access diff --git a/examples/next/client-app-router-fetch-data/package.json b/examples/next/client-app-router-fetch-data/package.json index 7b6d0b54d..d677b6dd7 100644 --- a/examples/next/client-app-router-fetch-data/package.json +++ b/examples/next/client-app-router-fetch-data/package.json @@ -3,21 +3,17 @@ "version": "1.0.0", "description": "An example headless WordPress application using Next.js App Router and the fetch API to fetch data from WordPress using WPGraphQL.", "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" + "setup": "npm install && npm --prefix ./example-app install && npm run assets:unzip && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", + "wp:start": "wp-env start", + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query", + "assets:zip": "zip -r wp-env/uploads.zip wp-env/uploads", + "assets:unzip": "rm -rf wp-env/uploads && unzip -oq wp-env/uploads.zip" }, "keywords": [ "headless", diff --git a/examples/next/client-multisite-app-router-fetch-data/README.md b/examples/next/client-multisite-app-router-fetch-data/README.md index 4ab989d0b..02080e343 100644 --- a/examples/next/client-multisite-app-router-fetch-data/README.md +++ b/examples/next/client-multisite-app-router-fetch-data/README.md @@ -113,13 +113,12 @@ echo "NEXT_PUBLIC_MOVIE_WORDPRESS_URL=http://localhost:8888/movies" >> examples/ ## Build and start the application - `cd examples/next/client-multisite-app-router-fetch-data` -- Then run `npm run example:build` will build and start your application. -- This does the following: +- Run `npm run setup` to set up the example, then `npm run dev` to start it. +- `setup` does the following: - 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) - Sets the mulitisite wp-config.php variables - Install Next.js dependencies for `example-app` - - Runs the Next.js dev script Congratulations, WordPress should now be fully set up. @@ -132,27 +131,15 @@ The login details for the admin is username "admin" and password "password" > [!IMPORTANT] There are issues with setting variables for multisite in .wp-env.json before converting the site to multisite. For this reason we set the variables after the sample database (which is multisite) is imported. -**You also need to update the port in wp:multisite:set:variables if you ever change 8888** +**You also need to update the port in the `wp:multisite` script if you ever change 8888** ## Command Reference -| Command | Description | -|-----------------------------|-----------------------------------------------------------------------------| -| `example:build` | 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, sets the multisite variables, and starts 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:multisite:set:variables`| Sets the variables for multisite in `wp-config.php`. | -| `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`. | - ->**Note** You can run `npm run wp-env` and use any other wp-env command. You can also see for more details on how to use or configure `wp-env`. +This example uses the [standard example scripts](../../README.md#running-an-example): run `npm run setup` once, then `npm run dev`. Use `npm run app:dev` to restart only the front end while WordPress keeps running, `npm run stop` to stop WordPress, and `npm run clean` to remove it. + +`wp:start` also runs `npm run wp:multisite`, which sets the multisite constants in `wp-config.php`. + +> **Note** You can run `npx wp-env` for any other wp-env command. See for details. ### Database access diff --git a/examples/next/client-multisite-app-router-fetch-data/package.json b/examples/next/client-multisite-app-router-fetch-data/package.json index 4e4b1ed22..dc8c96040 100644 --- a/examples/next/client-multisite-app-router-fetch-data/package.json +++ b/examples/next/client-multisite-app-router-fetch-data/package.json @@ -3,22 +3,18 @@ "version": "1.0.0", "description": "An example multisite WordPress application using Next.js App Router and the fetch API to fetch data from WordPress using WPGraphQL. Designed with clear patterns for AI tool compatibility.", "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 wp:multisite:set:variables && 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:multisite:set:variables": "wp-env run cli -- wp config set WP_ALLOW_MULTISITE true --raw && wp-env run cli -- wp config set MULTISITE true --raw && wp-env run cli -- wp config set SUBDOMAIN_INSTALL false --raw && wp-env run cli -- wp config set DOMAIN_CURRENT_SITE localhost:8888 && wp-env run cli -- wp config set PATH_CURRENT_SITE / && wp-env run cli -- wp config set SITE_ID_CURRENT_SITE 1 --raw && wp-env run cli -- wp config set BLOG_ID_CURRENT_SITE 1 --raw", - "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" + "setup": "npm install && npm --prefix ./example-app install && npm run assets:unzip && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", + "wp:start": "wp-env start && npm run wp:multisite", + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query", + "assets:zip": "zip -r wp-env/uploads.zip wp-env/uploads", + "assets:unzip": "rm -rf wp-env/uploads && unzip -oq wp-env/uploads.zip", + "wp:multisite": "wp-env run cli -- wp config set WP_ALLOW_MULTISITE true --raw && wp-env run cli -- wp config set MULTISITE true --raw && wp-env run cli -- wp config set SUBDOMAIN_INSTALL false --raw && wp-env run cli -- wp config set DOMAIN_CURRENT_SITE localhost:8888 && wp-env run cli -- wp config set PATH_CURRENT_SITE / && wp-env run cli -- wp config set SITE_ID_CURRENT_SITE 1 --raw && wp-env run cli -- wp config set BLOG_ID_CURRENT_SITE 1 --raw" }, "keywords": [ "headless", diff --git a/examples/next/custom-sitemap-apollo/README.md b/examples/next/custom-sitemap-apollo/README.md index 615ada2a6..09aea0b0e 100644 --- a/examples/next/custom-sitemap-apollo/README.md +++ b/examples/next/custom-sitemap-apollo/README.md @@ -90,12 +90,11 @@ echo "NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8888\\nNEXT_PUBLIC_URL=http://l ### Build and start the application - `cd examples/next/custom-sitemap-apollo` -- Then run `npm run example:build` will build and start your application. -- This does the following: +- Run `npm run setup` to set up the example, then `npm run dev` to start it. +- `setup` does the following: - 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. @@ -107,22 +106,9 @@ Congratulations, WordPress should now be fully set up. ### Command Reference -| Command | Description | -| --------------------- | ----------------------------------------------------------------------------------------------------------------------- | -| `example:build` | 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. | -| `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`. | - -> **Note** You can run `npm run wp-env` and use any other wp-env command. You can also see for more details on how to use or configure `wp-env`. +This example uses the [standard example scripts](../../README.md#running-an-example): run `npm run setup` once, then `npm run dev`. Use `npm run app:dev` to restart only the front end while WordPress keeps running, `npm run stop` to stop WordPress, and `npm run clean` to remove it. + +> **Note** You can run `npx wp-env` for any other wp-env command. See for details. ### Database access diff --git a/examples/next/custom-sitemap-apollo/package.json b/examples/next/custom-sitemap-apollo/package.json index e3f049c67..a25659acf 100644 --- a/examples/next/custom-sitemap-apollo/package.json +++ b/examples/next/custom-sitemap-apollo/package.json @@ -3,21 +3,17 @@ "version": "1.0.0", "description": "An example demonstrating how to fetch and display a custom sitemap using Apollo Client in a Next.js application.", "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" + "setup": "npm install && npm --prefix ./example-app install && npm run assets:unzip && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", + "wp:start": "wp-env start", + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query", + "assets:zip": "zip -r wp-env/uploads.zip wp-env/uploads", + "assets:unzip": "rm -rf wp-env/uploads && unzip -oq wp-env/uploads.zip" }, "keywords": [ "headless", diff --git a/examples/next/custom-sitemap-vanilla-wpgraphql/README.md b/examples/next/custom-sitemap-vanilla-wpgraphql/README.md index 1d19322f2..9707d9e7e 100644 --- a/examples/next/custom-sitemap-vanilla-wpgraphql/README.md +++ b/examples/next/custom-sitemap-vanilla-wpgraphql/README.md @@ -81,12 +81,11 @@ echo "NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8888\\nNEXT_PUBLIC_URL=http://l ### Build and start the application - `cd examples/next/custom-sitemap-vanilla-wpgraphql` -- Then run `npm run example:build` will build and start your application. -- This does the following: +- Run `npm run setup` to set up the example, then `npm run dev` to start it. +- `setup` does the following: - 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. @@ -98,22 +97,9 @@ Congratulations, WordPress should now be fully set up. ### Command Reference -| Command | Description | -| --------------------- | ----------------------------------------------------------------------------------------------------------------------- | -| `example:build` | 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. | -| `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`. | - -> **Note** You can run `npm run wp-env` and use any other wp-env command. You can also see for more details on how to use or configure `wp-env`. +This example uses the [standard example scripts](../../README.md#running-an-example): run `npm run setup` once, then `npm run dev`. Use `npm run app:dev` to restart only the front end while WordPress keeps running, `npm run stop` to stop WordPress, and `npm run clean` to remove it. + +> **Note** You can run `npx wp-env` for any other wp-env command. See for details. ### Database access diff --git a/examples/next/custom-sitemap-vanilla-wpgraphql/package.json b/examples/next/custom-sitemap-vanilla-wpgraphql/package.json index bd5ced8b3..7bf59f72e 100644 --- a/examples/next/custom-sitemap-vanilla-wpgraphql/package.json +++ b/examples/next/custom-sitemap-vanilla-wpgraphql/package.json @@ -3,21 +3,17 @@ "version": "1.0.0", "description": "An example demonstrating how to fetch and display a custom sitemap using Apollo Client and WPGraphQL in a Next.js application.", "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" + "setup": "npm install && npm --prefix ./example-app install && npm run assets:unzip && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", + "wp:start": "wp-env start", + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query", + "assets:zip": "zip -r wp-env/uploads.zip wp-env/uploads", + "assets:unzip": "rm -rf wp-env/uploads && unzip -oq wp-env/uploads.zip" }, "keywords": [ "headless", diff --git a/examples/next/hybrid-sitemap-apollo/README.md b/examples/next/hybrid-sitemap-apollo/README.md index 77dea2fb5..3ae5a60a6 100644 --- a/examples/next/hybrid-sitemap-apollo/README.md +++ b/examples/next/hybrid-sitemap-apollo/README.md @@ -78,12 +78,11 @@ echo "NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8888" > examples/next/hybrid-si ## Build and start the application - `cd examples/next/hybrid-sitemap-apollo` -- Then run `npm run example:build` will build and start your application. -- This does the following: +- Run `npm run setup` to set up the example, then `npm run dev` to start it. +- `setup` does the following: - 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. @@ -97,22 +96,9 @@ Congratulations, WordPress should now be fully set up. ## Command Reference -| Command | Description | -|------------------------|-----------------------------------------------------------------------------| -| `example:build` | 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. | -| `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`. | - ->**Note** You can run `npm run wp-env` and use any other wp-env command. You can also see for more details on how to use or configure `wp-env`. +This example uses the [standard example scripts](../../README.md#running-an-example): run `npm run setup` once, then `npm run dev`. Use `npm run app:dev` to restart only the front end while WordPress keeps running, `npm run stop` to stop WordPress, and `npm run clean` to remove it. + +> **Note** You can run `npx wp-env` for any other wp-env command. See for details. ### Database access diff --git a/examples/next/hybrid-sitemap-apollo/package.json b/examples/next/hybrid-sitemap-apollo/package.json index d7ff2f291..b07759b07 100644 --- a/examples/next/hybrid-sitemap-apollo/package.json +++ b/examples/next/hybrid-sitemap-apollo/package.json @@ -3,39 +3,35 @@ "version": "1.0.0", "description": "A Next.js application that fetches and transforms WordPress sitemaps 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: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-env": "wp-env" + "setup": "npm install && npm --prefix ./example-app install && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", + "wp:start": "wp-env start", + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query" }, "keywords": [ - "headless", - "wordpress", - "nextjs", - "apollo-client", - "fullstack", - "headless-cms", - "wpgraphql", - "headless-wordpress", - "nextjs-pages-router", - "wp-env-configuration", - "fullstack-example", - "sitemap", - "wordpress-sitemap", - "wpgraphql-sitemap" + "headless", + "wordpress", + "nextjs", + "apollo-client", + "fullstack", + "headless-cms", + "wpgraphql", + "headless-wordpress", + "nextjs-pages-router", + "wp-env-configuration", + "fullstack-example", + "sitemap", + "wordpress-sitemap", + "wpgraphql-sitemap" ], "author": "hwptoolkit", "license": "BSD-0-Clause", "dependencies": { - "@wordpress/env": "^12.0.0" + "@wordpress/env": "^12.0.0" } - } \ No newline at end of file +} diff --git a/examples/next/proxied-graphql-debug/README.md b/examples/next/proxied-graphql-debug/README.md index 828cb1b89..07d5d6521 100644 --- a/examples/next/proxied-graphql-debug/README.md +++ b/examples/next/proxied-graphql-debug/README.md @@ -47,7 +47,8 @@ echo "NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8888" > examples/next/proxied-g To start WordPress and run your proxy/debugger setup: ``` -npm run example:build +npm run setup +npm run dev ``` ## How It Works @@ -80,8 +81,9 @@ npm install ### Build and Start Application ``` -cd examples/next/graphql-proxy-debug -npm run example:setup +cd examples/next/proxied-graphql-debug +npm run setup +npm run dev ``` This will: @@ -89,7 +91,6 @@ This will: - Start [wp-env](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/) - Import the database from `wp-env/db/database.sql` - Install Next.js dependencies for `example-app` -- Run the Next.js dev server | Frontend | Admin | |----------|------------------------------| @@ -99,22 +100,9 @@ This will: ## Command Reference -| Command | Description | -|------------------------|-----------------------------------------------------------------------------| -| `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. | -| `example:stop` | Stops the WordPress environment. | -| `example:prune` | Rebuilds and restarts the environment by destroying and recreating it. | -| `wp:start` | Starts the WordPress environment. | -| `wp:stop` | Stops the WordPress environment. | -| `wp:destroy` | Removes the WordPress environment. | -| `wp:db:query` | Executes a database query in WordPress. | -| `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`. | - ->**Note:** You can run `npm run wp-env` and use other [wp-env](https://www.npmjs.com/package/@wordpress/env) commands as needed. +This example uses the [standard example scripts](../../README.md#running-an-example): run `npm run setup` once, then `npm run dev`. Use `npm run app:dev` to restart only the front end while WordPress keeps running, `npm run stop` to stop WordPress, and `npm run clean` to remove it. + +> **Note** You can run `npx wp-env` for any other wp-env command. See for details. ## Database Access (Optional) diff --git a/examples/next/proxied-graphql-debug/package.json b/examples/next/proxied-graphql-debug/package.json index 4cb44baab..994e73ae3 100644 --- a/examples/next/proxied-graphql-debug/package.json +++ b/examples/next/proxied-graphql-debug/package.json @@ -3,39 +3,35 @@ "version": "1.0.0", "description": "A debugging utility for proxied GraphQL APIs with enhanced query complexity estimation and WordPress headless integration.", "scripts": { - "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: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", - "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-env": "wp-env" + "setup": "npm install && npm --prefix ./example-app install && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", + "wp:start": "wp-env start", + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query" }, "keywords": [ - "headless", - "wordpress", - "nextjs", - "apollo-client", - "fullstack", - "headless-cms", - "wpgraphql", - "headless-wordpress", - "nextjs-pages-router", - "wp-env-configuration", - "fullstack-example", - "graphql", - "graphql-complexity", - "query-complexity-estimation" + "headless", + "wordpress", + "nextjs", + "apollo-client", + "fullstack", + "headless-cms", + "wpgraphql", + "headless-wordpress", + "nextjs-pages-router", + "wp-env-configuration", + "fullstack-example", + "graphql", + "graphql-complexity", + "query-complexity-estimation" ], "author": "hwptoolkit", "license": "BSD-0-Clause", "dependencies": { - "@wordpress/env": "^12.0.0" + "@wordpress/env": "^12.0.0" } - } \ No newline at end of file +} diff --git a/examples/next/proxied-sitemap-apollo/README.md b/examples/next/proxied-sitemap-apollo/README.md index 9bc11a6fe..6df0527d5 100644 --- a/examples/next/proxied-sitemap-apollo/README.md +++ b/examples/next/proxied-sitemap-apollo/README.md @@ -74,12 +74,11 @@ If you don't define it explicitly, the default value of http://localhost:3000 wi ## Build and start the application - `cd examples/next/proxied-sitemap-apollo` -- Then run `npm run example:build` will build and start your application. -- This does the following: +- Run `npm run setup` to set up the example, then `npm run dev` to start it. +- `setup` does the following: - 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. @@ -97,22 +96,9 @@ http://localhost:3000/sitemap.xml ## Command Reference -| Command | Description | -|------------------------|-----------------------------------------------------------------------------| -| `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. | -| `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`. | - ->**Note** You can run `npm run wp-env` and use any other wp-env command. You can also see for more details on how to use or configure `wp-env`. +This example uses the [standard example scripts](../../README.md#running-an-example): run `npm run setup` once, then `npm run dev`. Use `npm run app:dev` to restart only the front end while WordPress keeps running, `npm run stop` to stop WordPress, and `npm run clean` to remove it. + +> **Note** You can run `npx wp-env` for any other wp-env command. See for details. ### Database access diff --git a/examples/next/proxied-sitemap-apollo/package.json b/examples/next/proxied-sitemap-apollo/package.json index 04774e454..efd6c0b39 100644 --- a/examples/next/proxied-sitemap-apollo/package.json +++ b/examples/next/proxied-sitemap-apollo/package.json @@ -3,19 +3,15 @@ "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: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: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", - "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-env": "wp-env" + "setup": "npm install && npm --prefix ./example-app install && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", + "wp:start": "wp-env start", + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query" }, "keywords": [ "headless", diff --git a/examples/next/template-hierarchy/README.md b/examples/next/template-hierarchy/README.md index ce5a774b5..ab8bd21dd 100644 --- a/examples/next/template-hierarchy/README.md +++ b/examples/next/template-hierarchy/README.md @@ -12,12 +12,12 @@ In this example we show how to implement the WP Template Hierarchy in Next.js fo > [!IMPORTANT] > 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. +1. Run `npm run setup` to install dependencies and configure the local WP server. +2. Run `npm run dev` 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 Next.js. You must run `npm run example:stop` to kill the local WP server. +> When you kill the long running process this will not shutdown the local WP instance, only Next.js. Run `npm run app:dev` to restart only the front end, or `npm run stop` to stop the local WP server. ## 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, run `npm run clean` and confirm "Yes" at the prompt, then run `npm run setup` again. diff --git a/examples/next/template-hierarchy/package.json b/examples/next/template-hierarchy/package.json index e8cab0c58..3a37c8fa1 100644 --- a/examples/next/template-hierarchy/package.json +++ b/examples/next/template-hierarchy/package.json @@ -3,18 +3,15 @@ "type": "module", "version": "0.0.1", "scripts": { - "example:bootstrap": "npm install & npm run app:install", - "example:start": "pnpm run wp:start && npm run app:dev", - "example:setup": "npm run example:bootstrap && npm run wp:start && npm run wp:db:import && npm run example:stop", - "example:stop": "npm run wp:stop", - "example:prune": "npm run wp:destroy && npm run example:setup && npm run example:start", - "app:dev": "cd example-app && pwd && npm run dev && cd ..", - "app:install": "cd ./example-app && npm install && cd ..", + "setup": "npm install && npm --prefix ./example-app install && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", "wp:start": "wp-env start", - "wp:stop": "wp-env stop", - "wp:destroy": "wp-env destroy --config ./wp-env/wp-env.json", - "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" + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query" }, "devDependencies": { "@wordpress/env": "^12.0.0" diff --git a/examples/next/woocommerce/README.md b/examples/next/woocommerce/README.md index 4a2c7c032..6902b22cb 100644 --- a/examples/next/woocommerce/README.md +++ b/examples/next/woocommerce/README.md @@ -58,12 +58,14 @@ This example demonstrates a complete headless WooCommerce solution with Next.js, cd examples/next/woocommerce ``` -2. Build and start everything: +2. Set up and start everything: ```bash - npm run example:build + npm run setup + npm run dev ``` -This command will: +These commands will: +- Unzip `wp-env/uploads.zip` into `wp-env/uploads` - Start [wp-env](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/) - Import the database from [wp-env/db/database.sql](wp-env/db/database.sql) - Install Next.js dependencies @@ -79,22 +81,9 @@ This command will: ### Command Reference -| Command | Description | -| --------------------- | ----------------------------------------------------------------------------------------------------------------------- | -| `example:build` | 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. | -| `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`. | - -> **Tip:** Run `npm run wp-env` for additional wp-env commands. See the [official documentation](https://www.npmjs.com/package/@wordpress/env) for more details. +This example uses the [standard example scripts](../../README.md#running-an-example): run `npm run setup` once, then `npm run dev`. Use `npm run app:dev` to restart only the front end while WordPress keeps running, `npm run stop` to stop WordPress, and `npm run clean` to remove it. + +> **Note** You can run `npx wp-env` for any other wp-env command. See for details. ### Database Access diff --git a/examples/next/woocommerce/package.json b/examples/next/woocommerce/package.json index d20bf2e99..cb2eedf54 100644 --- a/examples/next/woocommerce/package.json +++ b/examples/next/woocommerce/package.json @@ -3,19 +3,17 @@ "version": "1.0.0", "description": "An example demonstrating woocommerce and authentication with username and password in a headless WordPress setup, running Next.js as a frontend framework.", "scripts": { - "example:build": "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-env": "wp-env" + "setup": "npm install && npm --prefix ./example-app install && npm run assets:unzip && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", + "wp:start": "wp-env start", + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query", + "assets:zip": "cd wp-env && zip -r uploads.zip uploads", + "assets:unzip": "rm -rf wp-env/uploads && unzip -oq wp-env/uploads.zip 'uploads/*' -d wp-env" }, "keywords": [ "headless", diff --git a/examples/next/wp-theme-rendered-blocks/README.md b/examples/next/wp-theme-rendered-blocks/README.md index c29765d09..1c841fc31 100644 --- a/examples/next/wp-theme-rendered-blocks/README.md +++ b/examples/next/wp-theme-rendered-blocks/README.md @@ -80,12 +80,11 @@ cd hwptoolkit && npm install ### Build and start the application - `cd examples/next/wp-theme-rendered-blocks` -- Then run `npm run example:build` will build and start your application. -- This does the following: +- Run `npm run setup` to set up the example, then `npm run dev` to start it. +- `setup` does the following: - 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. diff --git a/examples/next/wp-theme-rendered-blocks/package.json b/examples/next/wp-theme-rendered-blocks/package.json index db5603732..bf7834d40 100644 --- a/examples/next/wp-theme-rendered-blocks/package.json +++ b/examples/next/wp-theme-rendered-blocks/package.json @@ -3,20 +3,16 @@ "version": "0.1.0", "description": "An example headless WordPress application using Global Styles from WordPress using WPGraphQL.", "scripts": { - "example:build": "npm run example:dev:install && npm run wp:start && npm run wp:db:import && npm run example:styles:fetch && npm run example:start", - "example:styles:fetch": "npm --prefix ./example-app run styles:fetch", - "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-env": "wp-env" + "setup": "npm install && npm --prefix ./example-app install && npm run wp:start && npm run db:import && npm run app:styles:fetch", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", + "wp:start": "wp-env start", + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query", + "app:styles:fetch": "npm --prefix ./example-app run styles:fetch" }, "keywords": [ "headless", diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/README.md b/examples/nuxt/nuxt-headlesswp-gravity-forms/README.md index fa886ab1c..d07c089ad 100644 --- a/examples/nuxt/nuxt-headlesswp-gravity-forms/README.md +++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/README.md @@ -63,10 +63,11 @@ echo "NUXT_PUBLIC_WORDPRESS_URL=http://localhost:8888" > example-app/.env ### Quick Start -1. Start WP, import DB, then launch Nuxt: +1. Install dependencies and start WP, then launch Nuxt: ```bash - npm run example:setup + npm run setup + npm run dev ``` 2. Or run steps separately: @@ -76,10 +77,10 @@ echo "NUXT_PUBLIC_WORDPRESS_URL=http://localhost:8888" > example-app/.env npm run wp:start # Import DB - npm run wp:db:import + npm run db:import # Start Nuxt dev server - npm run dev + npm run app:dev ``` By the end, you will have: @@ -88,21 +89,11 @@ By the end, you will have: - user: admin / pass: password - Nuxt Front End: http://localhost:3000/ -## Scripts - -| Command | Description | -| ------------------------- | ---------------------------------------------------------------- | -| `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 | -| `npm run wp:start` | @wordpress/env start (launches PHP/MySQL container with WP) | -| `npm run wp:stop` | @wordpress/env stop | -| `npm run wp:db:import` | Import the SQL dump into the running WP container | -| `npm run wp:db:export` | Export the current WP database back to wp-env/db/database.sql | -| `npm run dev` | Start the Nuxt 3 development server on port 3000 | - -> **Tip:** You can also run any arbitrary WP-CLI command inside the container via `npm run wp:cli -- ` +## Command Reference + +This example uses the [standard example scripts](../../README.md#running-an-example): run `npm run setup` once, then `npm run dev`. Use `npm run app:dev` to restart only the front end while WordPress keeps running, `npm run stop` to stop WordPress, and `npm run clean` to remove it. + +> **Note** You can run `npx wp-env` for any other wp-env command. See for details. ## Database Access diff --git a/examples/nuxt/nuxt-headlesswp-gravity-forms/package.json b/examples/nuxt/nuxt-headlesswp-gravity-forms/package.json index 6b5de8791..1ef8ce97f 100644 --- a/examples/nuxt/nuxt-headlesswp-gravity-forms/package.json +++ b/examples/nuxt/nuxt-headlesswp-gravity-forms/package.json @@ -2,19 +2,15 @@ "name": "headlesswp-gravity-forms-nuxt-env", "version": "1.0.0", "scripts": { - "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: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", - "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-env": "wp-env" + "setup": "npm install && npm --prefix ./example-app install && npm run wp:start", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", + "wp:start": "wp-env start", + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query" }, "devDependencies": { "@wordpress/env": "^12.0.0" diff --git a/examples/nuxt/template-hierarchy-data-fetching/README.md b/examples/nuxt/template-hierarchy-data-fetching/README.md index 0a7d74c86..279b996b8 100644 --- a/examples/nuxt/template-hierarchy-data-fetching/README.md +++ b/examples/nuxt/template-hierarchy-data-fetching/README.md @@ -12,12 +12,12 @@ In this example we show how to implement the WP Template Hierarchy and Data Fetc > [!IMPORTANT] > 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 Nuxt development server. +1. Run `npm run setup` to install dependencies and configure the local WP server. +2. Run `npm run dev` to start the WP server and Nuxt development server. > [!NOTE] -> When you kill the long running process this will not shutdown the local WP instance, only Nuxt. You must run `npm run example:stop` to kill the local WP server. +> When you kill the long running process this will not shutdown the local WP instance, only Nuxt. Run `npm run app:dev` to restart only the front end, or `npm run stop` to stop the local WP server. ## 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, run `npm run clean` and confirm "Yes" at the prompt, then run `npm run setup` again. diff --git a/examples/nuxt/template-hierarchy-data-fetching/package.json b/examples/nuxt/template-hierarchy-data-fetching/package.json index e0113b4f9..48994f08e 100644 --- a/examples/nuxt/template-hierarchy-data-fetching/package.json +++ b/examples/nuxt/template-hierarchy-data-fetching/package.json @@ -4,20 +4,17 @@ "type": "module", "version": "1.0.0", "scripts": { - "example:bootstrap": "npm install & npm run app:install", - "example:start": "npm run wp:start && npm run app:dev", - "example:setup": "npm run example:bootstrap && npm run wp:uploads:unzip && npm run wp:start && npm run wp:db:import && npm run example:start", - "example:stop": "npm run wp:stop", - "example:prune": "npm run wp:destroy && npm run example:setup && npm run example:start", - "app:dev": "cd example-app && pwd && npm run dev && cd ..", - "app:install": "cd ./example-app && npm install && cd ..", + "setup": "npm install && npm --prefix ./example-app install && npm run assets:unzip && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", "wp:start": "wp-env start", - "wp:stop": "wp-env stop", - "wp:destroy": "wp-env destroy --config ./wp-env/wp-env.json", - "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:uploads:unzip": "rm -rf wp-env/uploads/ && unzip wp-env/uploads.zip;", - "wp:uploads:zip": "zip -r wp-env/uploads.zip wp-env/uploads" + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query", + "assets:zip": "zip -r wp-env/uploads.zip wp-env/uploads", + "assets:unzip": "rm -rf wp-env/uploads && unzip -oq wp-env/uploads.zip" }, "devDependencies": { "@wordpress/env": "^12.0.0", diff --git a/examples/sveltekit/template-hierarchy-data-fetching-urql/README.md b/examples/sveltekit/template-hierarchy-data-fetching-urql/README.md index 48d071e0a..75bea4383 100644 --- a/examples/sveltekit/template-hierarchy-data-fetching-urql/README.md +++ b/examples/sveltekit/template-hierarchy-data-fetching-urql/README.md @@ -12,12 +12,12 @@ In this example we show how to implement the **WordPress Template Hierarchy in S > [!IMPORTANT] > **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. +1. Run `npm run setup` to install dependencies and configure the local WP server. +2. Run `npm run dev` 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. +> When you kill the long running process this will not shutdown the local WP instance, only SvelteKit. Run `npm run app:dev` to restart only the front end, or `npm run stop` to stop the local WP server. ## 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 +To reset the WP server, run `npm run clean` and confirm "Yes" at the prompt, then run `npm run setup` again. \ 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 429446b58..82d889d26 100644 --- a/examples/sveltekit/template-hierarchy-data-fetching-urql/package.json +++ b/examples/sveltekit/template-hierarchy-data-fetching-urql/package.json @@ -3,20 +3,17 @@ "type": "module", "version": "0.0.1", "scripts": { - "example:bootstrap": "npm install & npm run app:install", - "example:start": "npm run wp:start && npm run app:dev", - "example:setup": "npm run wp:images:unzip && npm run example:bootstrap && npm run wp:start && npm run wp:db:import && npm run example:stop", - "example:stop": "npm run wp:stop", - "example:prune": "npm run wp:destroy && npm run example:setup && npm run example:start", - "app:dev": "cd example-app && pwd && npm run dev && cd ..", - "app:install": "cd ./example-app && npm install && cd ..", + "setup": "npm install && npm --prefix ./example-app install && npm run assets:unzip && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", "wp:start": "wp-env start", - "wp:stop": "wp-env stop", - "wp:destroy": "wp-env destroy --config ./wp-env/wp-env.json", - "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" + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query", + "assets:zip": "zip -r wp-env/uploads.zip wp-env/uploads", + "assets:unzip": "rm -rf wp-env/uploads && unzip -oq wp-env/uploads.zip" }, "devDependencies": { "@wordpress/env": "^12.0.0" diff --git a/plugins/hwp-previews/examples/hwp-preview-astro/README.md b/plugins/hwp-previews/examples/hwp-preview-astro/README.md index 9f93cd160..a1b76470d 100644 --- a/plugins/hwp-previews/examples/hwp-preview-astro/README.md +++ b/plugins/hwp-previews/examples/hwp-preview-astro/README.md @@ -11,19 +11,19 @@ In this example, we show how to implement **Headless WordPress Previews in Astro > [!IMPORTANT] > **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. +1. Run `npm run setup` to install dependencies and configure the local WP server. +2. Run `npm run dev` 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. +> When you kill the long running process this will not shutdown the local WP instance, only Astro. Run `npm run app:dev` to restart only the front end, or `npm run stop` to stop the local WP server. ## How to Test Previews -1. After running `npm run example:start`, navigate to the WordPress Admin at **http://localhost:8888/wp-admin**. +1. After running `npm run dev`, 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. +To reset the WP server, run `npm run clean` and confirm "Yes" at the prompt, then run `npm run setup` again. diff --git a/plugins/hwp-previews/examples/hwp-preview-astro/package.json b/plugins/hwp-previews/examples/hwp-preview-astro/package.json index 8cf370910..0c3076436 100644 --- a/plugins/hwp-previews/examples/hwp-preview-astro/package.json +++ b/plugins/hwp-previews/examples/hwp-preview-astro/package.json @@ -3,18 +3,15 @@ "type": "module", "version": "0.0.1", "scripts": { - "example:bootstrap": "npm install & npm run app:install", - "example:start": "npm run wp:start && npm run app:dev", - "example:setup": "npm run example:bootstrap && npm run wp:start && npm run wp:db:import && npm run example:stop", - "example:stop": "npm run wp:stop", - "example:prune": "npm run wp:destroy && npm run example:setup && npm run example:start", - "app:dev": "cd example-app && pwd && npm run dev && cd ..", - "app:install": "cd ./example-app && npm install && cd ..", + "setup": "npm install && npm --prefix ./example-app install && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", "wp:start": "wp-env start", - "wp:stop": "wp-env stop", - "wp:destroy": "wp-env destroy --config ./wp-env/wp-env.json", - "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" + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query" }, "devDependencies": { "@wordpress/env": "^12.0.0" diff --git a/plugins/hwp-previews/examples/hwp-preview-rest/README.md b/plugins/hwp-previews/examples/hwp-preview-rest/README.md index e1072fd2f..3a28b17bb 100644 --- a/plugins/hwp-previews/examples/hwp-preview-rest/README.md +++ b/plugins/hwp-previews/examples/hwp-preview-rest/README.md @@ -68,8 +68,7 @@ The example includes a wp-env setup, which will allow you to build and start thi ### 2. Build and start the application - `cd plugins/hwp-previews/examples/hwp-preview-rest` -- Then run `npm run example:build` will build and start your application. - +- Run `npm run setup` to set up the example, then `npm run dev` to start it. This starts the wp-env instance and frontend application. You can access them now, but one more installation step remains. > [!IMPORTANT] @@ -98,24 +97,9 @@ If you want to learn more about the preview plugin, check out [the documentation ### 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 for more details on how to use or configure `wp-env`. +This example uses the [standard example scripts](../../../../examples/README.md#running-an-example): run `npm run setup` once, then `npm run dev`. Use `npm run app:dev` to restart only the front end while WordPress keeps running, `npm run stop` to stop WordPress, and `npm run clean` to remove it. + +> **Note** You can run `npx wp-env` for any other wp-env command. See for details. ### Database access diff --git a/plugins/hwp-previews/examples/hwp-preview-rest/package.json b/plugins/hwp-previews/examples/hwp-preview-rest/package.json index 850080c5c..abe129118 100644 --- a/plugins/hwp-previews/examples/hwp-preview-rest/package.json +++ b/plugins/hwp-previews/examples/hwp-preview-rest/package.json @@ -3,21 +3,17 @@ "version": "1.0.0", "description": "An example of WordPress previews using Nextjs App Router, WordPRess Rest API and JWT authentication.", "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" + "setup": "npm install && npm --prefix ./example-app install && npm run assets:unzip && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", + "wp:start": "wp-env start", + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query", + "assets:zip": "cd wp-env && zip -r uploads.zip uploads", + "assets:unzip": "rm -rf wp-env/uploads && unzip -oq wp-env/uploads.zip 'uploads/*' -d wp-env" }, "keywords": [ "headless", diff --git a/plugins/hwp-previews/examples/hwp-preview-wpgraphql/README.md b/plugins/hwp-previews/examples/hwp-preview-wpgraphql/README.md index 87ae03796..c7c48b3cb 100644 --- a/plugins/hwp-previews/examples/hwp-preview-wpgraphql/README.md +++ b/plugins/hwp-previews/examples/hwp-preview-wpgraphql/README.md @@ -63,8 +63,7 @@ The example includes a wp-env setup, which will allow you to build and start thi ### 2. Build and start the application - `cd plugins/hwp-previews/examples/hwp-preview-wpgraphql` -- Then run `npm run example:build` will build and start your application. - +- Run `npm run setup` to set up the example, then `npm run dev` to start it. This starts the wp-env instance and frontend application. You can access them now, but one more installation step remains. > [!IMPORTANT] @@ -110,24 +109,9 @@ If you want to learn more about the preview plugin, check out [the documentation ### 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 for more details on how to use or configure `wp-env`. +This example uses the [standard example scripts](../../../../examples/README.md#running-an-example): run `npm run setup` once, then `npm run dev`. Use `npm run app:dev` to restart only the front end while WordPress keeps running, `npm run stop` to stop WordPress, and `npm run clean` to remove it. + +> **Note** You can run `npx wp-env` for any other wp-env command. See for details. ### Database access diff --git a/plugins/hwp-previews/examples/hwp-preview-wpgraphql/package.json b/plugins/hwp-previews/examples/hwp-preview-wpgraphql/package.json index 90593938e..38a2560f8 100644 --- a/plugins/hwp-previews/examples/hwp-preview-wpgraphql/package.json +++ b/plugins/hwp-previews/examples/hwp-preview-wpgraphql/package.json @@ -3,21 +3,17 @@ "version": "1.0.0", "description": "An example of Wordpress previews using Nextjs draft mode and WPGraphQL.", "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" + "setup": "npm install && npm --prefix ./example-app install && npm run assets:unzip && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", + "wp:start": "wp-env start", + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query", + "assets:zip": "cd wp-env && zip -r uploads.zip uploads", + "assets:unzip": "rm -rf wp-env/uploads && unzip -oq wp-env/uploads.zip 'uploads/*' -d wp-env" }, "keywords": [ "headless", diff --git a/plugins/wpgraphql-logging/examples/wpgraphql-logging-nextjs/README.md b/plugins/wpgraphql-logging/examples/wpgraphql-logging-nextjs/README.md index 134adb293..e5a9981fd 100644 --- a/plugins/wpgraphql-logging/examples/wpgraphql-logging-nextjs/README.md +++ b/plugins/wpgraphql-logging/examples/wpgraphql-logging-nextjs/README.md @@ -59,8 +59,7 @@ The example includes a wp-env setup, which will allow you to build and start thi ### 2. Build and start the application - `cd plugins/wpgraphql-logging/examples/wpgraphql-logging-nextjs` -- Then run `npm run example:build` will build and start your application. - +- Run `npm run setup` to set up the example, then `npm run dev` to start it. This starts the wp-env instance and frontend application. > [!IMPORTANT] @@ -111,24 +110,9 @@ If you want to learn more about the logging plugin, check out [the documentation ### 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 for more details on how to use or configure `wp-env`. +This example uses the [standard example scripts](../../../../examples/README.md#running-an-example): run `npm run setup` once, then `npm run dev`. Use `npm run app:dev` to restart only the front end while WordPress keeps running, `npm run stop` to stop WordPress, and `npm run clean` to remove it. + +> **Note** You can run `npx wp-env` for any other wp-env command. See for details. ### Database access diff --git a/plugins/wpgraphql-logging/examples/wpgraphql-logging-nextjs/package.json b/plugins/wpgraphql-logging/examples/wpgraphql-logging-nextjs/package.json index 277b4f07b..9e9bccb11 100644 --- a/plugins/wpgraphql-logging/examples/wpgraphql-logging-nextjs/package.json +++ b/plugins/wpgraphql-logging/examples/wpgraphql-logging-nextjs/package.json @@ -3,21 +3,17 @@ "version": "1.0.0", "description": "An example of WPGraphQL logging using Nextjs.", "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" + "setup": "npm install && npm --prefix ./example-app install && npm run assets:unzip && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", + "wp:start": "wp-env start", + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query", + "assets:zip": "cd wp-env && zip -r uploads.zip uploads", + "assets:unzip": "rm -rf wp-env/uploads && unzip -oq wp-env/uploads.zip 'uploads/*' -d wp-env" }, "keywords": [ "headless", diff --git a/plugins/wpgraphql-webhooks/examples/webhooks-isr/README.md b/plugins/wpgraphql-webhooks/examples/webhooks-isr/README.md index 46b739632..49367fc9c 100644 --- a/plugins/wpgraphql-webhooks/examples/webhooks-isr/README.md +++ b/plugins/wpgraphql-webhooks/examples/webhooks-isr/README.md @@ -144,24 +144,23 @@ This integration: - Clone the repo `git clone https://github.com/wpengine/hwptoolkit.git` - Install packages `cd hwptoolkit && pnpm install` - Install composer vendor directory `cd plugins/wpgraphql-webhooks && composer install` -- Setup a .env file under `examples/next/webhooks-isr/example-app` with `NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8888` +- Setup a .env file under `plugins/wpgraphql-webhooks/examples/webhooks-isr/example-app` with `NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8888` e.g. ```bash -echo "NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8888" > examples/next/webhooks-isr/example-app/.env -echo "WEBHOOK_REVALIDATE_SECRET=your_webhook_secret_token" > examples/next/webhooks-isr/example-app/.env +echo "NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8888" > plugins/wpgraphql-webhooks/examples/webhooks-isr/example-app/.env +echo "WEBHOOK_REVALIDATE_SECRET=your_webhook_secret_token" >> plugins/wpgraphql-webhooks/examples/webhooks-isr/example-app/.env ``` ## Build and start the application -- `cd plugins/webhooks-isr/examples/next/webhooks-isr` -- Then run `pnpm example:build` will build and start your application. -- This does the following: +- `cd plugins/wpgraphql-webhooks/examples/webhooks-isr` +- Run `npm run setup` to set up the example, then `npm run dev` to start it. +- `setup` 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. @@ -174,24 +173,9 @@ Congratulations, WordPress should now be fully set up. ## 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 `pnpm wp-env` and use any other wp-env command. You can also see for more details on how to use or configure `wp-env`. +This example uses the [standard example scripts](../../../../examples/README.md#running-an-example): run `npm run setup` once, then `npm run dev`. Use `npm run app:dev` to restart only the front end while WordPress keeps running, `npm run stop` to stop WordPress, and `npm run clean` to remove it. + +> **Note** You can run `npx wp-env` for any other wp-env command. See for details. ### Database access diff --git a/plugins/wpgraphql-webhooks/examples/webhooks-isr/package.json b/plugins/wpgraphql-webhooks/examples/webhooks-isr/package.json index cc9688646..bfde58d85 100644 --- a/plugins/wpgraphql-webhooks/examples/webhooks-isr/package.json +++ b/plugins/wpgraphql-webhooks/examples/webhooks-isr/package.json @@ -3,40 +3,37 @@ "version": "1.0.0", "description": "A Next.js application demonstrating full Incremental Static Regeneration (ISR) integrated with WordPress webhooks for on-demand page revalidation.", "scripts": { - "example:build": "pnpm run wp:images:unzip && pnpm run example:dev:install && pnpm run wp:start && pnpm run wp:db:import && pnpm run example:start", - "example:dev:install": "cd example-app && npm install && cd ..", - "example:start": "pnpm run wp:start && pnpm run example:dev", - "example:stop": "pnpm run wp:stop", - "example:prune": "wp-env destroy && pnpm run example:build && pnpm run example:start", - "example:dev": "pnpm --dir ./example-app dev", - "wp:start": "pnpm install && pnpm 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" + "setup": "npm install && npm --prefix ./example-app install && npm run assets:unzip && npm run wp:start && npm run db:import", + "dev": "npm run wp:start && npm run app:dev", + "app:dev": "npm --prefix ./example-app run dev", + "stop": "wp-env stop", + "clean": "wp-env destroy", + "wp:start": "wp-env start", + "db:import": "wp-env run cli -- wp db import /var/www/html/db/database.sql", + "db:export": "wp-env run cli -- wp db export /var/www/html/db/database.sql", + "db:query": "wp-env run cli -- wp db query", + "assets:zip": "zip -r wp-env/uploads.zip wp-env/uploads", + "assets:unzip": "rm -rf wp-env/uploads && unzip -oq wp-env/uploads.zip" }, "keywords": [ - "headless", - "wordpress", - "nextjs", - "apollo-client", - "fullstack", - "headless-cms", - "wpgraphql", - "headless-wordpress", - "nextjs-pages-router", - "wp-env-configuration", - "fullstack-example", - "sitemap", - "wordpress-sitemap", - "wpgraphql-sitemap" + "headless", + "wordpress", + "nextjs", + "apollo-client", + "fullstack", + "headless-cms", + "wpgraphql", + "headless-wordpress", + "nextjs-pages-router", + "wp-env-configuration", + "fullstack-example", + "sitemap", + "wordpress-sitemap", + "wpgraphql-sitemap" ], "author": "hwptoolkit", "license": "BSD-0-Clause", "dependencies": { - "@wordpress/env": "^12.0.0" + "@wordpress/env": "^12.0.0" } - } \ No newline at end of file +} From 2ca44e6e10d9145e3b859a12c75bc0c0c25f33c2 Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Tue, 27 Oct 2026 09:38:47 -0400 Subject: [PATCH 2/5] chore(examples): add a check for the standard example scripts --- .github/workflows/example-scripts.yml | 37 ++++++++ examples/README.md | 4 + package.json | 3 +- scripts/check-example-scripts.js | 122 ++++++++++++++++++++++++++ 4 files changed, 165 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/example-scripts.yml create mode 100644 scripts/check-example-scripts.js diff --git a/.github/workflows/example-scripts.yml b/.github/workflows/example-scripts.yml new file mode 100644 index 000000000..a4d5c3dda --- /dev/null +++ b/.github/workflows/example-scripts.yml @@ -0,0 +1,37 @@ +# Checks that every example follows the standard npm scripts +# (see examples/README.md "Running an example"). + +name: Example Scripts + +on: + push: + branches: + - main + paths: + - 'examples/**' + - 'plugins/*/examples/**' + - 'scripts/check-example-scripts.js' + pull_request: + paths: + - 'examples/**' + - 'plugins/*/examples/**' + - 'scripts/check-example-scripts.js' + +permissions: + contents: read + +jobs: + check: + name: Check example scripts + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: "24" + + - name: Check example scripts + run: node scripts/check-example-scripts.js diff --git a/examples/README.md b/examples/README.md index 233e80458..ed4d797a4 100644 --- a/examples/README.md +++ b/examples/README.md @@ -62,6 +62,8 @@ npm run dev # start WordPress and the front end Some examples add their own scripts on top; their READMEs list them. For any other wp-env command, use `npx wp-env`. +If port 8888 is already in use, for example by another wp-env site, set `WP_ENV_PORT` for every command, e.g. `WP_ENV_PORT=8977 npm run setup`, and point the front end's WordPress URL at the same port. + ## Contributing If you feel like something is missing or you want to add an example for another framework, we encourage you to contribute! Please check out our [Contributing Guide](https://github.com/wpengine/hwptoolkit/blob/main/CONTRIBUTING.md) for more details. @@ -126,6 +128,8 @@ You can copy on of existing examples to use it as a _skeleton_ of your new examp If the example includes media in `wp-env/uploads.zip`, add `assets:unzip` and `assets:zip`, and run `npm run assets:unzip` in `setup` before `wp:start`. See [Running an example](#running-an-example) for what each script does. + Run `pnpm check:examples` from the repository root to check that your example follows these scripts. CI runs the same check on pull requests. + 4. **Documentation (README.md)** A clear README.md with essential information would guide the new developers effectively and reduce the errors. Consider including the information below: diff --git a/package.json b/package.json index 890b6f268..ee6d11c98 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ "clean": "bash ./scripts/clean.sh", "dev": "bash ./scripts/dev.sh", "stop": "pnpm --filter '*' stop", - "reformat:md": "remark --rc-path .remarkrc.json --output --" + "reformat:md": "remark --rc-path .remarkrc.json --output --", + "check:examples": "node ./scripts/check-example-scripts.js" }, "engines": { "node": ">=22.19.0", diff --git a/scripts/check-example-scripts.js b/scripts/check-example-scripts.js new file mode 100644 index 000000000..e524a1dec --- /dev/null +++ b/scripts/check-example-scripts.js @@ -0,0 +1,122 @@ +#!/usr/bin/env node + +/** + * Check that every example follows the standard npm scripts described in + * examples/README.md ("Running an example"). + * + * Usage: node scripts/check-example-scripts.js + * + * Checks each example that has a .wp-env.json and a package.json: + * - the standard scripts exist, and none of the legacy names remain + * - every `npm run