Create Your First App

The best way to understand how a Headless CMS operates is to create a simple application and deploy it. This tutorial uses Faust.js, WPEngine's open-source headless framework, and Next.js to create a simple application.

  1. Make a WordPress site. You should have a site and an Atlas account through WPEngine in the User Portal. Navigate to the site environment you want to use for your backend, and click the WP Admin link at the top of the page. This will log you into WP Admin, where the setup for the framework plugin and WPGraphQL occurs.
  2. Download the wpe-headless plugin. Then, upload and activate the plugin from within the WordPress admin panel.
  3. Install WP GraphQL from the WordPress Plugin Directory. You can also automatically install WPGraphQL from the wpe-headless plugin's settings page.

Getting Started Example

Install our Next.js Getting Started example using the following command:

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

npx create-next-app `
-e https://github.com/wpengine/faustjs/tree/canary `
--example-path examples/next/getting-started `
--use-npm `
my-app && cd my-app

Now, copy the sample environment template:

cp .env.sample .env

Finally, run the dev server:

npm run dev

You can now visit http://localhost:3000 to see the example site!

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

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

Open the .env file you created earlier. It should look something like this:

# Your WordPress site URL
NEXT_PUBLIC_WORDPRESS_URL=https://headlessfw.wpengine.com
# Plugin secret found in WordPress Settings->Headless
WP_HEADLESS_SECRET=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 WP_HEADLESS_SECRET value with the secret key found in Settings → Headless in your WordPress admin panel to support previews.

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

Now, if you are still running the dev server, you can navigate back to http://localhost:3000 and see your app running while connected to your WordPress site!

If you want to continue building the functionality of your headless WordPress site, you can follow our Faust.js tutorial.

Next, let's deploy the app to the Headless Platform. 🚀