Learn how to use Frontity and introduce you to some alternative solutions for building WordPress sites with React such as: Gatsby.js, Nuxt.js, Next.js, Gridsome, Wuxt
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.
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.”
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.
Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.
Introduction to Next.js – Next vs. Gatsby vs. CRA. In this introduction, we'll talk about: Why Next.js? Fundamentals of Next; Zero-Config approach; Server-side rendering; Code splitting; Next vs. Create React App vs. Gatsby
Why Is Next.js My Ultimate Choice over Gatsby, Gridsome, and Nuxt? Iʼll share my way into Jamstack, explain how to choose the right tool suitable for you and your project, and why it is Next.js for me.