5 Alternatives to Frontity

5 Alternatives to Frontity

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.

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.

  1. Gatsby.js
  2. Nuxt.js
  3. Next.js
  4. Gridsome
  5. Wuxt

react nuxt gatsby next javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Gatsby vs. Next vs. Nuxt: Best JavaScript Framework for Server-side Rendering

Gatsby vs. Next vs. Nuxt: Examining 3 of the most popular JavaScript frameworks for Server-side Rendering. Next.js is a free and open source web application framework based on React.js, Node.js, webpack and Babel.js for building server-side rendered and/or static web applications using React. Nuxt.js is a free and open source web application framework based on Vue.js, Node.js, webpack and Babel.js for building server-side rendered and/or static web applications using Vue.

Introduction to Next.js – Next vs. Gatsby vs. CRA

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

Tendencias Javascript y Web 2020. React, Next.js, Deno

Tendencias Javascript y Web 2020. React, Next.js, Deno. En este video te voy a mencionar algunas herramientas y frameworks que fueron, seguirán siendo o van a ser tendencia en este 2020. Entre ellas están React, Next.js, Deno, los Headless CMS como Strapi, entre otros.

Why Is Next.js My Ultimate Choice over Gatsby, Gridsome, and Nuxt?

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.