Skip to main content

Getting Started with Faust

Quick Start

To create a Faust project, run:

npx create-next-app \
-e https://github.com/wpengine/faustjs/tree/main \
--example-path examples/next/faustwp-getting-started \
--use-npm

Now, cd into your new app and copy the sample environment template:

cp .env.local.sample .env.local

Finally, run the dev server:

npm run dev

You can now visit http://localhost:3000 to see your new project.

Currently, the posts and pages you see are coming from our WordPress site at https://faustexample.wpengine.com. In the next step, we'll show you how to hook up your own WordPress site.

Connecting Your WordPress Site

The example app above loads WordPress content from the demo site at https://faustexample.wpengine.com.

To point it to a different WordPress site, first, make sure you have installed and activated the necessary WordPress plugins:

Once the necessary plugins have been installed, open the .env.local file you created earlier, it should look something like this:

# Your WordPress site URL
NEXT_PUBLIC_WORDPRESS_URL=https://faustexample.wpengine.com

# Plugin secret found in WordPress Settings->Headless
# FAUSTWP_SECRET_KEY=YOUR_PLUGIN_SECRET

Update the NEXT_PUBLIC_WORDPRESS_URL value with your WordPress site URL (be sure to include http:// or https://).

Additionally, update the FAUSTWP_SECRET_KEY value with the secret key found in Settings → Faust in your WordPress admin area to support previews.

The FaustWP WordPress admin interface with a red rectangle around the Secret Key field

Finally, ensure your permalink structure in WP Admin -> Settings -> Permalinks is not set to "plain":

WordPress Admin Settings Page for Permalinks

Faust resolves templates similar to the Template Hierarchy in WordPress, but "plain" permalinks are not supported due to constraints in Next.js.

Start Editing

With your project created and development environment started, edit wp-templates/front-page.js and see the updated results in your browser.

Further Learning

Continue learning about the project structure, how to change styles, layout, etc. by referencing the Example Project Walkthrough Structure.