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.
- 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.
- Download the wpe-headless plugin. Then, upload and activate the plugin from within the WordPress admin panel.
- Install WP GraphQL from the WordPress Plugin Directory. You can also automatically install WPGraphQL from the
wpe-headlessplugin's settings page.
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-appcd 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.
.env file you created earlier. It should look something like this:
# Your WordPress site URLNEXT_PUBLIC_WORDPRESS_URL=https://headlessfw.wpengine.com# Plugin secret found in WordPress Settings->HeadlessWP_HEADLESS_SECRET=YOUR_PLUGIN_SECRET
NEXT_PUBLIC_WORDPRESS_URL value with your WordPress site URL (be sure to include
Additionally, update the
WP_HEADLESS_SECRET value with the secret key found in Settings → Headless in your WordPress admin panel to support previews.
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. 🚀