If you’re working with React as a frontend library and using a WordPress backend to power your blog or web app, you may be doing it all wrong if you’re not using a framework like Frontity.
React is undoubtedly the most popular frontend library and, according to W3Techs, WordPress powers nearly 40 percent of websites across the internet. Frontity brings these powerful technologies together to help you create server-side, dynamic, headless WordPress sites and blogs. Best of all, it’s free and open-source.
In this guide, we’ll show you how to use Frontity and introduce you to some alternative solutions for building WordPress sites with React.
Frontity describes itself as “a free and open source framework to develop WordPress themes based on ReactJS.” Essentially, it abstracts away the complex configurations and other learning curves associated with these technologies to help you create a website seamlessly and without hassle.
Frontity uses WordPress as a headless CMS for creating and managing content on your site. Acting as a middleman between WordPress and React is the WordPress REST-API, which allows you to retrieve your content and seamlessly generate the HTML.
React is used to actually serve your content. This is run separately on a Node.js server to produce a great SSR for your website or blog.
Below are some advantages to using Frontity.
For context, let’s quickly walk through how to use Frontity in your project.
The first step is to create a new Frontity project. The built-in CLI tool enables you to create a new Frontity application with a single command.
To install the Frontity CLI:
npm i frontity npx frontity create my-frontity-app
Next, select a theme for your new website. If you’re just starting out with Frontity, the Mars theme is a good choice to help you get an idea of how it works.
You may also decide to subscribe to Frontity’s newsletter by entering your email address.
cd my-frontity-app
After successful installation, navigate to your new project folder. Your Frontity project will be structured as follows.
Learn more →my-frontity-app/
|__ node_modules/
|__ package.json
|__ frontity.settings.js
|__ favicon.ico
|__ packages/
|__ mars-theme/
Starting the development server is as easy as typing the following commands.
npx frontity dev
Once your development server starts, it will automatically open your browser and you will be presented with a beautifully designed blog. The server will be watching for any changes made to the files inside the packages folder.
The next step is to connect your Frontity application to a WordPress backend instance. For a more detailed look at how Frontity works, check out “Getting started with Frontity.”
As great as Frontity is for building apps with React and WordPress on the frontend and backend, respectively, its support for other content and data sources such as markdown, Joomla, etc. is limited.
Let’s explore some alternatives to Frontity and go over some use cases to help you choose the right solution for your next React project.
Gatsby is an open-source framework designed to help you create websites and applications using the React library. With wide range of plugins, you can build extraordinary websites with performance, scalability, and security inbuilt.
Gatsby is the fastest-growing framework out there. With the right plugins, you can build any kind of web app or blog with any CMS you want. Although Gatsby can work with WordPress, that’s not its focus. You’ll need to handle some additional configurations and tooling to make it compatible.
Gatsby can work with WordPress, but the focused is not on WordPress. Therefore, some additional configurations and additional tooling will be handled by the developer.
Nuxt.js is an open-source framework that aims to empower Vue developers and simplify the developer experience.
Nuxt is great tool to consider when generating a static website based on your Vue application. You don’t need to build your own server, but you can still reap SEO benefits because of how Nuxt prerenders all the pages and necessary HTML.
Best of all, while Nuxt is powering your frontend and you’re enjoying the benefits of SSR, you can deliver your content from WordPress seamlessly.
This backend developer community blog is a good example of a site built with Nuxt.js and WordPress. Learn more about how to create a headless WordPress site on the JAMstack.
Next.js is a server-side rendered framework for React developers. It comes with myriad features built-in, such as hybrid static and server rendering, TypeScript support, smart bundling, route prefetching, and more.
Next.js is the same as Nuxt.js but for the React ecosystem. It enables you to enjoy all the SSR and SEO advantages in one place.
Like Gatsby, Next can work with WordPress but isn’t designed to do so. It’ll take some extra configuration and third-party tools.
Gridsome makes it easy to create and generate static websites and apps that are fast by default.
Personally, I use Nuxt.js for the server-side rendering. That said, Gridsome is my favorite static generator for Vue. My current portfolio website is built with Gridsome; you can take a look at the repository here.
Gridsome makes building JAMstack websites easy and painless, using data from different sources such as content APIs, headless CMS such as WordPress, and other web services. You can deliver content from any headless CMS, including WordPress.
Wuxt combines the power of Nuxt and WordPress to help you build awesome frontend applications. Wuxt brings ready-to-go Nuxt and WordPress integration to the Vue ecosystem.
Since Wuxt is still in development, it should be easier for Vue developers to get started with it than Frontity since they’ll be more familiar with Vue structures. There is also a built-in WordPress plugin that makes accessing content via REST easy and painless.
This is a direct alternative to Frontity for Vue/Nuxt developers. Though it’s still in active development, you can take an early look at the official repository.
In this guide, we reviewed how to use Frontity to build websites with WordPress and React and presented five viable alternatives to the popular library. The best choice for you, as always, depends on your project’s requirements and your experience level.
Which framework do you prefer to use for your React/WordPress projects? Let us know in the comments, and keep coding!
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
// Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Explore how Stack Overflow’s slow collapse affects programming and the possible future for Stack Overflow vs. generative AI competition.
Learn how to build multimodal AI interactions to process images, audio, and even real-time video streams, using Next.js and Gemini.
Check out Kiro, AWS’s AI-powered IDE, see what makes it different from other AI coding tools, and explore whether it lives up to the hype.
Here’s how three design patterns solved our Go microservices scaling problems without sacrificing simplicity.
