Headless WordPress and Create React App
Published August 07, 2018
You may have noticed the appearance of my site has changed a bit! A while back I decided to rebuild my site - finally. In the interest of learning new things, I created a headless WordPress theme using React.
What Is Headless
We’re not talking about a horseman and Ichabod Crane. Headless separates what you see from where you store and manage content. What you’re viewing now is not WordPress. It’s a React app that gets the content from a WordPress install on a completely different server. I still write and publish everything in WordPress though.
Normally, WordPress handles everything. It displays the front end, manages all the content, and interacts with the database. In a headless situation, the frontend uses a completely different server than the backend. They only talk to each other through an API; in this case the WordPress REST API.
I decided to try out a new service called Netlify to host this frontend React app. Netlify boasts about being super fast for both deploying an app and serving it. I wrote a post about my adventures in deploying my app, but I’ve found it’s a good host so far. I plan to try out other services with different projects, just to explore options.
The REST API
WordPress added the backend for the REST API in version 4.4 and the endpoints in version 4.7. Thankfully, since it’s been around for a while, the REST API documentation is good and fairly easy to figure out. I took a course on React development, actually several, including a course on fullstack development with React. They all covered fetching data from a remote source. I only needed to figure out the specifics of fetching data from WordPress.
I used the popular Create React App project from Facebook as a starting point. While I explored creating my own React project from scratch, CRA just makes more sense. There are some ideas I’d like to explore regarding additional optimizations that are difficult without ejecting from CRA. Those can be performed in later versions of this site/app/frontend though.
In the Future…
I’m planning to write more posts about how I built this site and the tech behind it. I’ve already discovered some really good tips for others to follow. My next post covers how links work with a headless WordPress and the simple solution.