An open source project I’ve been really interested in, and trying to help with, is headless-wp-starter. The idea behind it, is that you can use the mature, easy to use, back-end WordPress provides, but have the freedom to completely design and control the front-end using React, and connect them with WordPress’s built-in API. This technique is on the rise, because decoupling the two allows you to separate concerns more easily, and React is an amazing and flexible framework that many front-end developers are adopting quickly.
The problem is, it can take a lot of work to set this sort of thing up. It’s definitely not a standard practice for WordPress users. I found this post, which has tips on getting started. It has a lot of valuable info, but it will only get you so far. There are a lot of tricky things that can come up, like figuring out the routing of pages – especially if you want to render javascript server-side – and authentication within the front-end application. The purpose of this project is to create a starter kit for developers, so they can download this, run a few commands, and be up and running with a headless WordPress + React setup. The hope is that these tricky problems will be solved, and you can focus more purely on designing the front-end, and putting together the WordPress back-end, without having to worry too much about how they connect.
So when I came across the project, some of these problems had already been solved on a basic level – however page routing and authentication are still not set up. That’s what I’m trying to help with now. It’s set up to use next.js, which I was not yet familiar with, and have been learning. As I learned that, I realized in order to dynamically generate pages and posts, it’s going to be a good idea for us to add Express to the project – something else I haven’t learned to use yet! However, I’ve been reading, and learning about it.
At this point, I’ve been able to add Express, and create a new route for posts. I created a route that looks like /post/:post_slug: which will dynamically handle links to individual posts, and then be able to fetch the post info from the server. It’s totally up to the developer to actually design how that data will be displayed, but it’s nice to have a boiler-plate that will do the basics for you. Talking with the project owner, we decided we want to make the routes mimic the permalink structure the WordPress back-end is set to use, but for now we just want to set up workable routes period, and then we can iteratively make progress to improve the routing structure, and make the front-end and back-end routing congruent. This has been a really fun, and productive learning experience!