Case Study: Migrating Aleteia, the leading website for Catholic news, to Frontity. 🚀

Frontity Logo

Frontity Logo
Get Started

The React framework for WordPress

Frontity is the easiest way to create lightning fast websites using WordPress and React. Open source and free to use.

Get Started
Try Demo in your Browser

Setting up Frontity...

How Frontity works

A server side, dynamic framework for headless WordPress sites and blogs

WordPress is used as a headless CMS – just for creating and managing your content

The WordPress REST-API allows you to retrieve your content and generate the final HTML

Frontity apps built with React serve your content and run separately on a Node.js server

WordPress + React made easy

Frontity connects seamlessly with WordPress so you can focus on building your website or blog.
No complex configuration is left to the developer and the number of concepts you need to learn are minimal.

01

Create your project

  • Create a new Frontity project with a single command.
  • Everything (bundling, transpiling, routing, server rendering…) is already configured for you.
Learn more

  1. npx frontity create my-app

    ✔ Creating package.json.
    ✔ Creating frontity.settings.js.
    ✔ Cloning @frontity/mars-theme.
    ✔ Installing dependencies.

    Frontity project created!

    Run cd my-app && npx frontity dev and have fun! 🎉

  2. cd my-app

02

Connect Frontity to your WordPress site

  • Easily connect your WordPress URL to Frontity.
  • Works with WordPress.org and WordPress.com.
Learn more

// frontity.settings.js

export const settings = {
  packages: [
    {
      name: "@frontity/wp-source",
      state: {
        source: {
          url: "https://frontity.org/"
        },
      },
    }
  ],
};

03

Setup your theme and style it

  • Start with a pre-made theme or create a custom one.
  • Style with next generation CSS-in-JS.
Learn more
import { styled } from "frontity";

const StyledDiv = styled.div`
    width: 100%;
    text-align: center;
    color: white;
`;

04

Deploy anywhere

  • Deploy your site to any Node.js or serverless provider.
  • Use your favorite WordPress hosting.
Learn more

Live content update

Keep editing your content in WordPress

Use your WordPress dashboard to create and edit your content just as you usually do.

  • Every time you make an edit to a post or page, the change will
    automatically be updated on Frontity.
  • No need to rebuild your site as you would with a Static Site Generator.
Learn more

Designed for performance

Frontity is as fast as a static site generator

Provide an instant experience with dynamic content using Serverless Pre-rendering (SPR).

  1. Serverless generates HTML on the fly
  2. The CDN saves the HTML and serves it as static content
  3. Try out the performance right here!

twitter-twenty-twenty-frontity-theme
Check out the demo

Why WordPress?

  • Powers over 30% of the web
  • User-friendly and extensible
  • Powerful block editor extensible using React
  • Largest open source CMS community

Why React?

  • Great developer and user experience
  • Scalable and well-established option
  • Largest open source front-end community

Why Frontity?

Frontity combines the best of both worlds with a great developer experience in mind.

Easy

Designed to be used with WordPress, Frontity gives you a big head start by providing many of the common queries already built in.

Zero Setup

Everything is already wired up (React, Webpack, Babel, Routing…) so that you can jump straight in and start creating your site.

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

Frontity sends a navigation-ready HTML page that is immediately usable so the initial load feels almost instant.

Extensible

Frontity powers a flexible extensibility pattern similar to WordPress. Themes and extensions can be activated without code changes.

Battle Tested

Used by millions of readers Frontity is proven and ideal for building fast and engaging frontend experiences. Learn more.

Discover all features

Need some inspiration?

See what people are building with Frontity.

Showcase

Frequently Asked Questions

How Frontity compares to other React frameworks like Gatsby or Next?

Firstly, Frontity is 100% focused on WordPress. This means the number of concepts you need to learn are minimal. It doesn’t require complex configuration to get started, and the APIs that developers use to request content are pre-configured for the things that they most frequently need.

Secondly, Frontity is opinionated. It has its own state manager and it uses Emotion for the CSS. Thanks to that developers do not need to learn the complexities of such technologies as Redux. At the same time it powers a very flexible extensibility pattern, more similar to that of WordPress itself, rather than that of other JavaScript frameworks.

Lastly, it’s rendered dynamically, which means that the HTML does not have to be rebuilt each time the content is edited or new content is published. Our preferred approach is Serverless Pre-Rendering, although there are other ways to configure it.

In addition, there’s no need to learn GraphQL or the REST-API. The data is available to you using the state manager.

What happens with SEO? Is Frontity ready for it?

Yes, it is! Frontity does both server-side and client-side rendering. This approach works great with dynamic content and SEO. And if you use a CDN, it is as fast as serving static files. It has all the content in the HTML so Google is happy and, once JavaScript takes control of the page, the experience feels like a native app.

Is Frontity compatible with my current plugins?

Frontity is compatible with all the plugins that are compatible with the REST-API. Many of them just add their output to the content, and that would work by default.

For plugins that are not compatible with the REST-API you have two options. You can adapt the logic in your Frontity project, or you can use PHP to extend the uncooperative plugin either in your WordPress theme’s functions.php file or in a custom plugin.

Can I still work with Custom Post Types and Custom Taxonomies?

Of course! You just have to add a few settings in your Frontity project and it will work. You can check out our docs for a more detailed explanation.

Get help on your project

Our growing community is always here to help! Join our forum to ask questions, follow conversations, or share what you’re building to get feedback!

Ask the community

What people are saying about us

Start using Frontity

Building a React front-end for your WordPress website has never been easier.

Get Started

Enterprise Projects

Considering Frontity for an enterprise project? Learn how our trusted partners can help support your project needs.

Learn more

Accelerated By Google

Invested By Automattic

Join the Frontity newsletter

Stay up-to-date on new releases and features, tutorials, and community news.

DOCS
FRONTITY
  • Showcase
  • Releases
  • Roadmap
  • GitHub
  • License
RESOURCES
COMPANY
LEGAL

© Frontity 2021

Accelerated by Google. Invested by Automattic.

↑