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.
cd my-frontity-app
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 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.”
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.js
- Nuxt.js
- Next.js
- Gridsome
- Wuxt
#react #nuxt #gatsby #next #javascript
