Fronting up: Headless Wordpress and React with Frontity
About a year ago, I was approached about building a new website with a CMS for a client as a freelance project. Firstly, I don't do that many paid freelance projects these days, and secondly when I have in the past, I usually keep it simple and reach for the world's most favourite Content Management System - Wordpress [sic]. I have used Wordpress as a go to CMS in plenty of small freelance projects in the past as many others probably have, because it offers a basic CMS for free and has been around so long I'm familiar with how it works. I'm not a PHP developer, so I usually just buy a premium theme and install it, make some customisation, and boom... We're good to go.
This time however, I wanted to see if there was a way I could incorporate using React in the project and build a React application, as my skill set is Javascript and I'm trying to use React for building front ends where possible. So I spent some time researching free headless Content Management Systems and there were only a couple of options that I thought feasible. Pretty much all of these relied on leveraging something like Gatsby or Hugo, as well as GraphQL and in some cases a CMS like Drupal or Netlify and other JAMStack tech. All of which I hadn't used before and since this was a paid for job, I didn't have that much time to start learning those frameworks or tech stacks.
Then I stumbled upon a framework called Frontity. Frontity allows you to leverage Wordpress as a headless CMS using the Wordpress REST API. You can then build your front end app in Frontity using React components, and "Frontity will Provide an instant experience with dynamic content using Serverless Pre-rendering (SPR)." You can then deploy the front end app to any Node.js or severless hosting provider, though they recommend using Vercel, which I happen to use in my other projects anyway, so this was another advantage for me. The recommended install model & the one I stuck to, has your Wordpress installation installed on a sub domain of your main domain and then your main domain name pointing to the Vercel Sever.
"Frontity will Provide an instant experience with dynamic content using Serverless Pre-rendering (SPR)."
All in all, Frontity ticks a lot of boxes for this kind of project. My client has the familiarity of posting and editing content in Wordpress and I have the familiarity and freedom of building the front end components in React and Javascript. Your finished website/Frontity app is also pretty fast, compared to a Wordpress website and page routing is taken care of by the Frontity API, so there's no need for expertise in React Router. In fact because it's an opinionated framework that is built specifically to work with only Wordpress, it has it's own state manager and uses CSS-in-JS for the styling. Thanks to this, you don't have to figure out how to configure these tools or learn additional frameworks and tech like GraphQL, Redux or Webpack. Everything is baked in and it's pretty easy to get up and running with it.
Frontity also has a few of its own node packages you'll need to install to handle certain functionality and you can also install any other npm packages you wish. Frontity also has some pre-existing themes that you can install to start your project with a basic structure and then customise. It also has extensions that can be activated and deactivated without code changes and are reusable across projects. Its also SEO friendly and does both server-side & client-side rendering.
Something I found extremely useful though was that Wordpress plugins can still be used on the front end as long as they are compatible with the Wordpress REST API. So this meant things like contact forms, and PDF readers are all handled by Wordpress. It also allows you to work with Custom Post Types and Custom Taxonomies if you so wish, you'll just have to tweak a few settings in your project.
So is there good documentation I hear you ask? Well, yes there's excellent documentation and an active community and message board. There's also a youtube channel with some really helpful videos. My only concern and a recent one at that, is that Frontity was recently acquired by Wordpress' parent company Automattic. What this was going to mean for the framework, I wasn't initially sure, but according to a blog post and Twitter thread the team behind Frontity have joined Automattic to work on Wordpress Core. I did notice a drop in active users on the Frontity community and it did start to get slow in getting support at times, but then other users usually reach out, I try to return the favour when possible. However, because it's an Open Source technology, the hope is that its users & community will still try to help in actively maintaining it moving forward. Here's hoping anyway, so spreading the word about the framework I hope will entice others to check it out.
In conclusion, I think Frontity provides a really useful framework and easy to use API to both hobby web developers and freelance web developers who need an affordable headless CMS that's probably familiar to them and that will work with a React tech stack. I just hope that there is a future for Frontity, now that it's not as actively maintained by the founding team. Hopefully I've piqued your interest and you'll check it out and consider it for a future project.
This story is also available @ https://www.nmk.dev/post/fronting-up-headless-wordpress-and-react-with-frontity-10422993a9db