Add tutorial

[kellenmace]

Add tutorial, make a few tweaks to the basic setup doc. Some notes are belowl.

Not-yet-working example project URL

The example app used for this tutorial doesn't exist yet. The PR to add it is here: wpengine/faustjs#2040. Until that gets merged, instead of

npx create-next-app \
    -e https://github.com/wpengine/faustjs/tree/canary \
    --example-path examples/next/tutorial \
    --use-npm

like the tutorial says, you can instead use this to install the example app from the feature/tutorial branch:

npx create-next-app \
    -e https://github.com/wpengine/faustjs/tree/feature/tutorial \
    --example-path examples/next/tutorial \
    --use-npm

Broken post previews feature

The auth & post previews steps in this tutorial don't actually work when you follow the steps in the tutorial! Can you please help me troubleshoot why that is? Is a steps incorrect or missing, perhaps?

You can compare the steps in the tutorial with those on the old Faust site (https://faustjs.org/guide/how-to-setup-post-and-page-previews), as well as those on the /docs/how-to/post-previews/ page of our new Faust site.

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1209093390759886

[headless-platform-by-wp-engine]

Check out the recent updates to your Headless Platform preview environment:

App	Environment	URL	Build
faustjs.org	preview-env-feature/tutorial	https://hm…wered.com	✅ (logs)

Learn more about preview environments in our documentation.

[headless-platform-by-wp-engine]

Check out the recent updates to your Headless Platform preview environment:

App	Environment	URL	Build
faustjs.org	preview-env-feature/tutorial	https://hm…wered.com	✅ (logs)

Learn more about preview environments in our documentation.

[headless-platform-by-wp-engine]

Check out the recent updates to your Headless Platform preview environment:

App	Environment	URL	Build
faustjs.org	preview-env-feature/tutorial	https://hm…wered.com	✅ (logs)

Learn more about preview environments in our documentation.

[Fran-A-Dev]

Please consider the changes requested. This is a grammar and sentence flow review.

[moonmeister]

I'm seeing lots of large sections with multiple steps within a "step". I'm concerned those sub-points will get missed. Maybe it'd be helpful to add some kind of MDX tooling to have multiple pages of this tutorial to further simplify the structure. Or just add sub-step labels (a., b., c., etc)

[Fran-A-Dev]

@kellenmace Add a section titled "Update the Next Config" with an explanation of the code in this file and then have this in a code block in their next.config.js file. Also had a sentence telling the user to npm i next-secure-headers:

const { createSecureHeaders } = require("next-secure-headers");

/**
 * @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,
        }),
      },
    ];
  },
});

[Fran-A-Dev]

@kellenmace Add a section titled "Update the Next Config" with an explanation of the code in this file and then have this in a code block in their next.config.js file. Also had a sentence telling the user to npm i next-secure-headers:

const { createSecureHeaders } = require("next-secure-headers");

/**
 * @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,
        }),
      },
    ];
  },
});

@kellenmace as discussed lets just add this in the example app and not have this as a step in the tutorial

[headless-platform-by-wp-engine]

Check out the recent updates to your Headless Platform preview environment:

App	Environment	URL	Build
faustjs.org	preview-env-feature/tutorial	https://hm…wered.com	✅ (logs)

Learn more about preview environments in our documentation.

[headless-platform-by-wp-engine]

Check out the recent updates to your Headless Platform preview environment:

App	Environment	URL	Build
faustjs.org	preview-env-feature/tutorial	https://hm…wered.com	✅ (logs)

Learn more about preview environments in our documentation.

[Fran-A-Dev]

@kellenmace LGTM!

@moonmeister any last thoughts before we merge?

[headless-platform-by-wp-engine]

Check out the recent updates to your Headless Platform preview environment:

App	Environment	URL	Build
faustjs.org	preview-env-feature/tutorial	https://hm…wered.com	✅ (logs)

Learn more about preview environments in our documentation.