Frontity: Bringing React to WordPress

WordPress continues to be the most popular Content Management System (CMS) and is the backbone of almost 40% of the web. Initially, WordPress was designed and used as a monolith system with themes and plugins residing on the same server. At the end of 2016, when WordPress released their REST API, headless WordPress sites became possible and could be used in combination with modern front-end frameworks. This brought better security, scalability and availability to the WordPress CMS solution. 

Enter Frontity, the only React.js framework created exclusively for WordPress. With Frontity, developers can build React based front-ends for headless WordPress sites. The framework is free and open-source and aims to simplify the complicated process of creating a decoupled site. From the content creator’s perspective, the user friendly content creation and editing interface is still available, while the developer experience is improved.

So how does this work? In its decoupled mode, Frontity sources data from the CMS using the WordPress REST API. It then serves HTML as a Single Page Application. Frontity itself would either be hosted on a Node.js server, or in a serverless environment.

An advantage of using Frontity is the ease with which it can be set up. As it was designed exclusively for WordPress, few configurations are required. In addition, API queries are preconfigured according to the needs of WordPress developers. Frontity also aims to retain the flow and features present in WordPress, for example, content previewing and popular SEO plugins can still be used. For these reasons, Frontity is a good solution for WordPress developers who are new to React.

There are a few alternative React frameworks which can also be used in conjunction with WordPress as a headless CMS, although none are specifically tailored to WordPress. Next.js, like Frontity, provides server side rendering while Gatsby.js is a static site generator. All three deliver HTML pages to the browser, making them well suited to search engine optimization, unlike alternatives such as Create React App which offers client side rendering.

Gatsby uses GraphQL and React to create template files which query data for the HTML export. Note, Gatsby can also export JavaScript when a static page is not required. There are two main drawbacks. The first is the need to learn GraphQL and the API, the second is that rebuilds are required every time a change is made. Regular rebuilds may not be problematic in cases where content is seldom changed. However, even relatively static sites may become cumbersome to rebuild as they become very large.

Another consideration is the integration with WordPress plugins. Generally, extra configurations and custom code are required. That being said, Gatsby has many of its own plugins, which make it a great framework in cases where a static site generator is appropriate.

Next.js, like Frontity, is suitable when content is regularly updated. Neither would require a rebuild to reflect changes. In both cases, server-side rendering brings high performance as HTML pages are served on the fly. The downside is that both could potentially come with additional hosting costs. Although, companies such as Pantheon (Decoupled Bridge), are beginning to offer hosting services for decoupled architecture. 

A key difference between Frontity and Next.js is routing. Frontity’s decoupling of features and routing gives developers more control of the layout. In addition, Frontity is also extensible and opinionated. In terms of extensibility, Frontity comes with a package management interface where themes and extensions can be activated or deactivated without code changes. This mirrors the WordPress experience. As far as being opinionated goes, Frontity prescribes both state management and CSS. Not only does this free developers from tooling decisions but it also allows Frontity to offer off-the-shelf optimizations as packages conform to the same system.

Frontity is exceptionally easy to set up. Once Node.js is installed and your WordPress site is up and running, you can create a Frontity app using Frontity’s command line interface. During the setup, you will be prompted to select a theme. Frontity comes with two default themes, Mars and TwentyTwenty, both of which are fully customizable. TwentyTwenty was migrated from WordPress and Mars is recommended for learning purposes. There are also a few 3rd party themes to choose from. Alternatively you can build a theme from scratch. Without any further configuration, you can start the development server.

npx frontity create my-frontity-project

cd my-frontity-project

npx frontity dev

The project directory contains the ‘packages’ sub-folder where all project code is placed. The directory also contains a file named frontity.settings.js. In order to link your WordPress site and pages, simply edit the contents of this file. That’s it, you’re ready to go! You can find this and more in their documentation

/my-frontity-project

|__ frontity.settings.js

|__ package.json

|__ /node_modules

|__ /packages

|__ /my-theme

|__ /my-custom-extension-1

|__ /my-custom-extension-2

For more information visit their website. While you are there, be sure to peruse their showcase to see Frontity in action. 

 

Nichole Groener

Nichole is a software engineer based in Budapest. For more information, you can find her on LinkedIn.

Software Weekly

Software Weekly

Subscribe to Software Weekly, a curated weekly newsletter featuring the best and newest from the software engineering community.