The React Framework for WordPress
Frontity is the easiest way to create amazing websites using WordPress and React
Get started | Try demo in your browser | Learn Frontity
What is Frontity Framework?
Frontity is a free and open source framework for building WordPress websites based on React. It strips away the complexity that entails connecting both WordPress and React, and gives you a big head start by providing many of the most common queries already built in. In short, you can spend the bulk of your time on the development requirements of the project (e.g. the theme) and less time on setting up the project or worrying about tooling and configuration.
Frontity's unique approach, with its ease of use and extensibility pattern (similar to that of WordPress itself), offers distinct advantages over other similar React frameworks:
» It's 100% focused on WordPress
Each part of the framework has been simplified and optimized to be used with WordPress. This means the number of concepts that you as a developer need to learn are minimal. No complex configuration is necessary to get started, and the queries to the APIs that deliver the content are pre-configured for the things that developers most frequently need.
» It's opinionated
Frontity has its own state manager and CSS-in-JS solution. Thanks to that developers don't have to figure out how to configure these tools, or learn other technologies such as Redux or GraphQL.
» It's extensible like WordPress
Frontity powers a very flexible extensibility pattern similar to that of WordPress itself. To add new functionality or expand the capabilities of Frontity, you can use any of the existing Frontity and npm packages without having to build them from scratch.
Moreover, Frontity packages (including themes) can be activated and deactivated without code changes and are reusable across projects, helping reduce both development and maintenance times.
» It's rendered dynamically
In Frontity the HTML is rendered dynamically by a Node.js server or a serverless service. This means the HTML does not have to be rebuilt each time the content is edited or new content is published.
Because of its dynamic approach, Frontity provides a great power and reliability when it comes to frequent and real-time content updates, making it a great fit for those projects with content that might change rapidly or that is expected to grow over time.
See the About Frontity page in the docs to learn more.
How does Frontity work?
In a Frontity project, WordPress is used as a headless or decoupled CMS, just for managing the content. Frontity uses data from the WordPress REST API and generates the final HTML that is displayed in the browser using React.
With Frontity you still use your WordPress dashboard to edit and create content in exactly the same way that you are accustomed to. As you make changes content is automatically updated in your Frontity site, just as it is when using a traditional WordPress theme.
Frontity apps require both a Node.js server and a WordPress server (PHP) to run on. And there are two main Frontity Modes (architectures or configurations):
Why a different Node.js server?
React is a JavaScript library. In order to generate HTML for site visitors or for Google, the server needs to be able to run JavaScript as well.
In theory a PHP server can send an empty HTML file with the JavaScript files included and the visitor will see the page after the JavaScript has loaded. However, this is not a good user experience and it is certainly not recommended if your site needs to be SEO friendly and to rank in search engine listings.
Frontity is prepared to be hosted either in a regular Node.js server or in serverless services. That makes it super cheap and infinitely scalable.
The Architecture page of the docs explains how Frontity works in detail.
Getting started
You'll need a WordPress installation and Node.js. See the Requirements page for more information.
If you can't wait to see what Frontity can do, head over to the Quick Start Guide.
If you're new to Frontity, we recommend that you check out the step-by-step tutorial, which will guide you through the fundamentals of building and deploying your first Frontity website.
Documentation
The Frontity documentation is distributed across three separate sites:
- docs.frontity.org is the generic documentation. As well as theoretical information, such as Frontity Architecture and Core Concepts, you can find many practical guides here.
- api.frontity.org is the API reference. This is where you can find detailed technical descriptions for the CLI, and for the packages and plugins available in Frontity Framework.
- tutorial.frontity.org is the introductory step-by-step guide. It's designed to provide you with a deep and solid understanding of web development using Frontity.
More learning resources, such as videos and example projects, can be found in the Learn Frontity page.
Community
For general help using Frontity, please refer to the documentation and the available learning resources. If you can't find an answer in these resources you can always check out the Frontity Community Forum, which is packed full of answers and solutions to all sorts of Frontity questions.
The community forum is a great place to ask questions, help fellow users build Frontity apps, and share your projects. It's also where you can keep track of the work done for the framework, join feature discussions, and collaborate on building Frontity itself.
Frontity is dedicated to a positive and inclusive community experience for everyone. Read through this guide to learn more about the forum guidelines, how it is organized, and how to get the most out of it.
Other channels
In addition to the community forum, Frontity has other channels where you can find out more information about the project, join in discussions about it, and also get involved:
- GitHub: for bug reports and code contributions.
- YouTube channel: learn from Frontity videos and playlists.
- Newsletter: designed to inform you about the latest product updates, learning resources and community news surrounding Frontity Framework.
- Twitter and the blog are also pretty good places if you're looking for news, case studies, and other updates.
Showcase
Want to know who's using Frontity? Need some inspiration for your project? The community is always building amazing projects with Frontity, discover some of them in the Showcase page.
Contributing
There are different ways to support the project and get involved. These are a few things that are always welcome:
- Testing new features
- Creating themes/packages and share them on npm or GitHub
- Creating educational content like blogs, videos, courses
- Improving the documentation
- Helping the community
See the Contributing section of the docs for more information on how to contribute.
License
Frontity is licensed under the terms of the Apache 2.0 license.