npx degit wpengine/faustjs/examples/next/tutorial#issue-2211 faust-tutorial

Author: josephfusco

faust-tutorial/.env.local.example

@@ -0,0 +1,6 @@
+# Your WordPress site URL
+NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8888
+
+# Plugin secret found in WordPress Settings->Faust
+# Pre-configured for the tutorial - no need to change this!
+FAUST_SECRET_KEY=47485b27a3d36728659cd62feb79658b3d05712b41095c13eeb73fcba7d33ac7

faust-tutorial/.wp-env.json

@@ -0,0 +1,23 @@
+{
+  "phpVersion": "8.3",
+  "plugins": [
+    "https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip",
+    "https://downloads.wordpress.org/plugin/faustwp.latest-stable.zip"
+  ],
+  "config": {
+    "WP_DEBUG": true,
+    "SCRIPT_DEBUG": false,
+    "GRAPHQL_DEBUG": true,
+    "WP_DEBUG_LOG": true,
+    "WP_DEBUG_DISPLAY": false,
+    "SAVEQUERIES": false
+  },
+  "mappings": {
+    "db": "./wp-env/db",
+    "wp-content/uploads": "./wp-env/uploads",
+    ".htaccess": "./wp-env/setup/.htaccess"
+  },
+  "lifecycleScripts": {
+    "afterStart": "wp-env run cli -- wp rewrite structure '/blog/%postname%/' && wp-env run cli -- wp rewrite flush"
+  }
+}

faust-tutorial/README.md

@@ -0,0 +1,74 @@
+# Learn Faust.js
+
+Next.js app to be used with the [Learn Faust tutorial](https://faustjs.org/docs/tutorial/learn-faust/).
+
+## Prerequisites
+
+- Node.js (v18+ recommended)
+- [Docker](https://www.docker.com/) (required for running WordPress with wp-env)
+
+**Note:** Make sure Docker is running before starting (`docker ps`)
+
+## Quick Start
+
+1. **Install dependencies**
+   ```bash
+   npm install
+   ```
+
+2. **Set up environment variables**
+
+   Copy the example file and configure:
+   ```bash
+   cp .env.local.example .env.local
+   ```
+
+3. **Start WordPress and the development server**
+   ```bash
+   npm run tutorial:setup    # First time setup
+   npm run tutorial:start    # Start WordPress and Next.js dev server
+   ```
+
+4. **Access the application**
+   - Frontend: [http://localhost:3000/](http://localhost:3000/)
+   - WordPress Admin: [http://localhost:8888/wp-admin/](http://localhost:8888/wp-admin/)
+
+   > **Default credentials:** username: `admin`, password: `password`
+
+5. **Configure Faust in WordPress**
+
+   Follow the tutorial at [faustjs.org/docs/tutorial/learn-faust/](https://faustjs.org/docs/tutorial/learn-faust/) to complete the setup.
+
+## Available Commands
+
+| Command            | Description                                                    |
+| ------------------ | -------------------------------------------------------------- |
+| `tutorial:setup`   | Initial setup: installs packages, starts wp-env, imports DB   |
+| `tutorial:start`   | Starts WordPress and the Next.js development server           |
+| `tutorial:stop`    | Stops the WordPress environment                                |
+| `tutorial:prune`   | Rebuilds everything from scratch                               |
+| `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`  |
+| `dev`              | Runs the Next.js development server only                       |
+| `build`            | Builds the Next.js application for production                  |
+
+## Project Structure
+
+```
+├── src                                # Next.js application source
+├── .wp-env.json                       # wp-env configuration file
+└── wp-env
+    ├── db
+    │   └── database.sql               # WordPress database with pre-configured settings
+    ├── setup
+    │   └── .htaccess                  # CORS configuration
+    └── uploads                        # WordPress uploads directory
+```
+
+## Learn More
+
+For detailed step-by-step instructions, visit the [Learn Faust tutorial](https://faustjs.org/docs/tutorial/learn-faust/).

faust-tutorial/eslint.config.mjs

@@ -0,0 +1,14 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [...compat.extends("next/core-web-vitals")];
+
+export default eslintConfig;

faust-tutorial/faust.config.js

@@ -0,0 +1,11 @@
+import templates from "./src/wp-templates/index";
+import possibleTypes from "./possibleTypes.json";
+import { setConfig } from "@faustwp/core";
+
+/**
+ * @type {import('@faustwp/core').FaustConfig}
+ **/
+export default setConfig({
+  templates,
+  possibleTypes,
+});

faust-tutorial/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

faust-tutorial/next.config.js

@@ -0,0 +1,25 @@
+const { createSecureHeaders } = require('next-secure-headers');
+const { withFaust, getWpHostname } = require('@faustwp/core');
+
+/**
+ * @type {import('next').NextConfig}
+ **/
+module.exports = withFaust({
+	reactStrictMode: true,
+	sassOptions: {
+		includePaths: ['node_modules'],
+	},
+	images: {
+		domains: [getWpHostname()],
+	},
+	async headers() {
+		return [
+			{
+				source: '/:path*',
+				headers: createSecureHeaders({
+					xssProtection: false,
+				}),
+			},
+		];
+	},
+});