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.
What is Frontity?
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.
- Extensible: We all know how extensible WordPress is with different plugins to do create variety of functionalities, Frontity also provide this kind of extensibility out of the box. Plugins, Themes and extensions can be installed and activated without requiring any code changes.
- SSR- and SEO-friendly: Frontity does server-side rendering out of the box. This approach works great with dynamic content and is great for SEO
- Lightning-fast loading: One thing I love about Frontity is the speed in load type. Frontity sends a navigation-ready HTML page that is immediately usable so the initial load feels almost instant
- Zero setup required: Everything you need to make the connection work has already been set up for you out of the box (React, webpack, Babel, routing, etc.) so you can jump straight in and start creating your site
- Ease of use: Frontity takes care of the complexity associated with connecting WordPress with React
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.
After successful installation, navigate to your new project folder. Your Frontity project will be structured as follows.
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
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.”
5 alternatives to 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.
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Compare NestJS vs. Express.js
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.
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!
Cut through the noise of traditional React error reporting with LogRocketLogRocket is a React analytics solution that shields you from the hundreds of false-positive errors alerts to just a few truly important items. LogRocket tells you the most impactful bugs and UX issues actually impacting users in your React applications.
LogRocket automatically aggregates client side errors, React error boundaries, Redux state, slow component load times, JS exceptions, frontend performance metrics, and user interactions. Then LogRocket uses machine learning to notify you of the most impactful problems affecting the most users and provides the context you need to fix it.
Focus on the React bugs that matter — try LogRocket today.