Tired of monolithic WordPress? Are your front-end developers frustrated with the limitations of monolithic WordPress and constrained by PHP templates? Headless WordPress could be the answer you’re looking for.
In this post, we’ll look at what headless WordPress is, how to monitor it with SolarWinds® Papertrail™, and how to build your own headless WordPress setup with a statically generated Next.js front end. But first, what exactly is headless WordPress?
What Is Headless WordPress?
WordPress is traditionally used as a monolithic CMS, which is a CMS designed to store, manage, and present your content. WordPress typically does this through the use of collections of PHP/HTML template files called themes. These templates are then rendered on the WordPress server before being delivered to the client. This rendering occurs each time a browser makes a request to your website, causing increased time to load and requiring a more powerful server.
While developing your custom front end, headless WordPress allows you to take advantage of the robust content management and familiar writing interface of WordPress. Your authors and content creators can work with the same WordPress server with which they’re familiar, and your development team avoids reinventing the wheel.
When moving to a headless approach, we want to address the increased system complexity by using automated logging and monitoring. For the WordPress server, Papertrail provides a robust, always-on, and searchable log monitoring solution.
A Quick Refresher on Papertrail
Papertrail provides centralized log management for your entire suite of applications. Logs are aggregated, organized, and searchable, which means you no longer need to contact the infrastructure team and get someone to log into a particular server just to see what’s going on. Instead, you can monitor your entire suite of applications in one place. The more systems and logs you feed into Papertrail, the more useful it becomes.
From there, you can search and analyze those logs and set up automated notifications and webhooks to report on them. Additionally, you can set up archiving into an S3 bucket.
For the purposes of this article, the main logs we want to monitor are those from the WordPress server. The WP Activity Log plug-in provides integration between WordPress, and Papertrail is the easiest way to set this up.
Now that we’ve covered the concepts, let’s walk through setting up a real headless WordPress deployment.
How to Set Up Headless WordPress
To see it all in action, we’ll be deploying a fully functioning headless WordPress setup. First, we’ll set up the WordPress server and Papertrail. Then, we’ll create a simple Next.js front end and deploy it as well.
WordPress and Papertrail Setup
First, you’ll need a WordPress server. If you don’t have one already, I recommend Digital Ocean’s 1-Click deployment. For testing purposes, go ahead and select the cheaper options:
Next, you’ll need a Papertrail account (if you’re already a Papertrail fan, you can skip down to the WP Activity Log setup). Once you’ve signed up for Papertrail, confirmed your email, and signed in, click “Add your first system”:
Select any system—what we want is the URL.
Make note of the URL after “Your logs will go to…” and save it for later. This is your log destination URL.
Next, let’s get the WP Activity Log plug-in installed onto your WordPress server. Log in to the admin panel, go to Plug-Ins ⇾ Add New, and search for “WP Activity Log.” Install and activate the plug-in.
Click on “Free Premium Trial,” and choose the “Business” version.
No credit card is required!
Once you’ve received the download link for the premium version, download it. Returning to your WordPress server, upload it and activate it.
Now, we’re ready to set up the integration. Head to WP Activity Log ⇾ DB & Integrations:
Select Papertrail as the type of connection:
Paste in your log destination URL from earlier:
Enter a name and save the connection. Next, head to the “Mirroring” tab:
Set up mirroring to the connection you just created:
This tells the plug-in to mirror every event in the activity log to the log destination. Now head back to Papertrail and you should see your system show up:
And clicking on the system, you should see the test message from the plug-in:
Go ahead and add a featured image to Hello World and add another post. You can use https://unsplash.com/ for the images.
Also, try setting an excerpt! We’ll use all this later with our custom front end.
Everything in the Log Viewer for WP Activity Log will be mirrored in Papertrail. As we continue through this tutorial, check back to see those events show up. As you do, make sure to check out the search bar and other options (including the “velocity graph”) at the bottom.
Next.js and Headless WordPress
For our custom front end, we’ll be using the cms-wordpress example project from the Next.js team and deploying it (for free!) to Vercel.
First, on our WordPress server, we’ll need to install and activate the “WPGraphQL” plug-in:
In the plug-in settings, make note of your endpoint:
For some reason, on my installation, this given endpoint URL was incorrect. The actual URL was
Set up your local project folder by using either npx or yarn:
Now, add a next.config.js file. Configure it to allow Image Optimization with the IP address or domain of your WordPress server as well as the 1.gravatar.com domain.
Commit and push this to a GitHub repository. Let’s get this deployed!
Create a new Vercel account and log in. Then, connect GitHub and create a new project with your GitHub repository. Skip creating a team:
Add an environment variable called WORDPRESS_API_URL, setting it to your API URL:
Click on “Deploy.” In about a minuteC, you should see your new statically generated site:
You’ve successfully created a headless WordPress server monitored with Papertrail and deployed a custom Next.js front end. Nice work!
With this foundation, you’re ready to build your high-performing, scalable, and fully custom headless WordPress website. Give it a try and let us know what you think.
This content was originally published here.