Faust.js is a framework for building front-end 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.
This Demo from Saigon Digital extend Faust js function by add the ACF block builder that allows user/editor to build flexible and customizable content structures within their Wordpress content editor.
- Node.js v16.0.0 or newer (v16.8.0 when using Next.js 13 and v18.17 when using Next.js 14).
- MacOS, Windows (including WSL), and Linux are supported.
Faust.js aims to be framework agnostic, so it can be used with any front-end framework. Visit the guides below for a starting point:
-
Install NPM packages
yarn install
-
Add env variable
.envNEXT_PUBLIC_WORDPRESS_URL = https://your-wp-endpoint FAUST_SECRET_KEY = your-faust-serect-key
-
Run app
yarn dev
The following is a quick explaination of the major directories in the codebase.
This folder contains the various components that all pages and templates use. They are highly re-usable and for purely presentational purposes.
Each components will includes styling by Taillwind CSS, Query fragment of component so you can handle everything you need one place.
This folder contains individual GraphQL fragments that are common between queries.
Includes a helpful transfrom function like return block by name, generator prebuild data, replace path,...
This folder contains the Next.js file based routes that are used to render the associated pages.
Contains templates for programmatically creating pages from Wordpress pages CMS.
These file allow customization/extension of default Faust settings affecting pieces of the site. More information Configuring a Faust Plugin
Visit https://faustjs.org/docs/getting-started to view the full documentation.
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.