wpengine/faustjs

Introduction

Faust.js is a toolkit for building Next.js applications for headless WordPress sites. Faust.js provides tooling to reduce the pains of building a headless WordPress site (namely around data fetching, authentication, previews, and SSR/SSG) while offering a pleasant experience for both developers and publishers.

• Getting started with Next.js

System Requirements

Front end

• Node.js 22 or newer and npm 8 or newer. Use the latest release of a supported version so you have its security fixes. Node.js 20 has reached end of life. If you need to stay on it, use @faustwp/core and @faustwp/cli 3.x and @faustwp/blocks 6.x.
• Next.js 12.1.6 or newer with the Pages Router (15.5.5 or newer if you use @faustwp/blocks). The examples and tests use Next.js 16.
• React 17.0.2 or newer, and at least the version your Next.js release requires (18.2 for Next.js 16).
• Apollo Client.
• macOS, Windows (including WSL) or Linux.

WordPress

• WordPress 6.0 or newer, with PHP 7.4 or newer (the minimums for current WPGraphQL).
• The WPGraphQL and Faust.js plugins.

Documentation

Visit https://faustjs.org/docs/ to view the full documentation.

Editing Docs

Docs are MD in docs. Here are a couple things you should know!

1. Our Docs support Github Flavored Markdown (GFM).

2. Images should be stored along side the doc that uses them in an images/ folder.

3. Shared Images can be stored in a shared folder @ docs/images

4. Callouts: These are similar to block quotes or an aside but for various warnings, info, pro times, etc.

5. Code Blocks:

   • Required

     1. Specify a language: ```js or `const inlineCode = [1,2,3];{:js}`
        • Commands for a users terminal = bash
        • env files = ini
        • JavaScript = js
        • TypeScript = ts
        • GraphQL = gql
        • JSON = json
        • For a full list see: https://shiki.style/languages
     2. Add line numbers to any complex code. ini and bash don't need to show line numbers generally. ```js showLineNumbers
     3. Complete files should have a file names ```js title="pages/_app.js

   • Optional

     1. Lines can be highlighted in code blocks ```js {1,3-5}. There are a variety of advanced highlighting methods, see: https://rehype-pretty.pages.dev/#highlight-lines

     2. Lines may be diffed in a code block:

        console.log('hewwo') // [!code --]
        console.log('hello') // [!code ++]
        console.log('goodbye')
        

WordPress Plugin (FaustWP)

There are two key parts to Faust.js: the NPM packages and the WordPress plugin. To take full advantage of headless, you will need to install the plugin in addition to the npm packages.

You can download and install FaustWP from the WordPress Plugin Directory, or by using the zip linked below.

📥 Download Latest Version

Community

To chat with other Faust.js users and the headless community as a whole, you can join the WP Engine Developers Discord.

Additionally, if you have questions or ideas, please share them on GitHub Discussions.

Contributing

There are many ways to contribute to this project.

• Discuss open issues to help define the future of the project.
• Submit bugs and help us verify fixes as they are checked in.
• Review and discuss the source code changes.
• Contribute bug fixes

Contributor License Agreement

All external contributors to WP Engine products must have a signed Contributor License Agreement (CLA) in place before the contribution may be accepted into any WP Engine codebase.

1. Submit your name and email
2. 📝 Sign the CLA emailed to you
3. 📥 Receive copy of signed CLA

❤️ Thank you for helping us fulfill our legal obligations in order to continue empowering builders through headless WordPress.