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. Your WordPress site is separate from the site created when you create your app. 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. All connections to your app occurs here.
Install our Next.js Getting Started example using the following command:
npx create-next-app \-e https://github.com/wpengine/faustjs/tree/main \--example-path examples/next/getting-started \--use-npm \my-app
After app creation, change into your app directory:
npx create-next-app `-e https://github.com/wpengine/faustjs/tree/main `--example-path examples/next/getting-started `--use-npm `my-app && cd my-app
Now, 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 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.local 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. 🚀