- Dec 09, 2020
0- by A2 Dev Team
There are lots of modern web development tools available to help you build Single Page Applications (SPA). However, many of these tools require you to learn new technologies, or perform complex setup and configuration.
Using the Frontity framework, you can reap the benefits of the modern React framework while continuing to use the familiar WordPress back end. You can even deploy your WordPress-powered SPA using your favorite WordPress hosting solution.
In this post, we’ll explore what Frontity is, and share why you may want to use it with your latest headless WordPress project. We’ll then provide an overview of how you’d set up, create and launch an SPA, using the Frontity framework. Let’s get started!
An Introduction to Frontity
Frontity is a server-side, open-source framework that’s optimized for both WordPress.org and WordPress.com. There are many popular frameworks compatible with WordPress, including Next.js and Gatsby.js. However, these frameworks aren’t designed exclusively for WordPress. As such, you may need to perform some additional configuration in order to optimize these frameworks for the platform.
By contrast, every part of the Frontity framework has been optimized for the WordPress platform. The APIs required to request content are also pre-configured, potentially saving you even more time and effort.
This ease-of-use is something that has been mentioned multiple times by the Frontity community. This includes Columbus-based design studio Fort, who recently redesigned their corporate website using Frontity.
This redesign features a distinctive yellow cursor that expands when positioned over clickable elements, and animated backgrounds that highlight some of Fort’s best design work.
Speaking about the redesign, a Fort representative said: “It’s kind of crazy how quickly I was able to do this knowing nothing about Frontity and not being super advanced with React. It was a 2.5 week dev timeline.”
Taylor Chase, who recently redesigned his personal blog, also praised Frontity’s ease of use. “I was expecting to have so many “deployment” issues, so many “configuration” issues that I’d have to go into my server or WordPress configuration and see what’s going wrong,” he said. “But really I just followed the documentation steps and everything just worked.”
In short, Frontity is a framework that makes it easier to create SPAs using WordPress and React. If you’re looking for a quick and easy way to create a Content Management System (CMS)-powered site with modern web development tools, Frontity does the trick and can be up and running in minutes.
Why Developers Are Turning to Frontity
Now we’ve discussed what Frontity is, it’s time to talk about why so many developers are turning to this React-based framework. Let’s look at what Frontity has to offer you.
Build a WordPress Website With Modern Web Development Tools
You can use Frontity to build a front end for a headless WordPress website. Instead of coupling your content to a specific output, such as a web page, a headless CMS provides your content as data via the REST Application Programming Interface (API).
Your front end will then consume this data and render it in the browser as an SPA. An SPA dynamically rewrites the same page with new data that it retrieves from the server, so the visitor experiences all of your content within a single web page.
Frontity may be a framework, but you can also think of it as an alternative rendering engine for WordPress. Traditionally, WordPress generated HTML using a theme based on PHP template files.
When the REST API was merged into WordPress core, it removed the dependency on the PHP rendering engine. This opened up new possibilities for web developers, including creating front end websites using React – which is how we ended up with Frontity!
Frontity’s support for the modern, scalable React framework has earned it praise from web developers. Oriol Egea recently migrated his blog to Frontity, and expressed excitement at where he might take his project in the future.
“As it’s a React app, the possibilities are unlimited,” he said. “I’m already thinking to add some extra-features with business-logic to my blog, and using WordPress as a headless CMS, and having an isolated React App to develop the front end is the best scenario to achieve that.”
Oriol’s personal blog has a streamlined look and feel, with some distinctive, stand-out features. This includes a progress bar positioned along the top of the screen, and an animated slideshow.
Continue Using the Familiar WordPress Back End
A new framework may require you to learn new technologies, tools, and concepts. Even if a framework promises long-term benefits, it can still spell bad news for your short-term productivity.
With Frontity, you can continue using the familiar WordPress dashboard. Every change you make in the WordPress back will get pushed to your site’s end automatically. This means you can transition to Frontity without taking a hit to your short-term productivity.
In particular, Frontity has its own state manager and uses Emotion for the CSS. This means you don’t have to learn the complexities of technologies such as Redux. Since the data is available via the state manager, there’s also no need to learn GraphQL or the REST API.
Improve Your Website’s Performance
A slow, unresponsive website with long loading times always results in a bad user experience. Frontity can improve your site’s performance in a number of key areas.
Firstly, Frontity uses Serverless Pre-Rendering (SPR) to render HTML on the fly. By taking this approach, the Frontity team aims to combine the speed and reliability of static rendering with the versatility of dynamic data rendering. A Content Delivery Network (CDN) saves the HTML, then serves it as static content.
Frontity also sends a navigation-ready HTML page that’s immediately usable. This minimizes your site’s initial load time. It also eliminates the need for extra assets and round trips.
Once React has loaded, the router prefetches other routes and data automatically. Every second that the visitor has to wait, is another opportunity for them to abandon your site. By prefetching other routes and data, visitors should never have to wait while navigating your Frontity website.
Some companies have documented their website’s performance after switching to Frontity. This includes cloud product studio Awsm Digital Innovations. Awsm recently redesigned their web design and development site using Frontity.
Following the redesign, Awsm Digital Innovations scored a clean 100 in speed tests using both Google Page Speed Insights Desktop and Gtmetrix. According to Awsm’s Frontity case study their website took 2.5-3.7 seconds to load, with a total page size of 440KB and 24 requests.
These positive results are echoed by freelance web developer David. He recently used Frontity to build a website for Linda Jean’s Restaurant.
“Site speed is where Frontity outshines everything else,” said David. “Between the SSR, Frontity’s image lazy-loading, Vercel’s CDN and stale-while-revalidate, it was as if I had already spent a day optimizing the site when in reality, all I did was deploy the first iteration.”
Get a Search Engine Optimization (SEO) Boost
Frontity can deliver an SEO boost, while also taking steps to ensure it doesn’t damage your SEO efforts. Frontity stores all your content in HTML, and responds to requests with a fully populated and well-formed HTML file generated from the React code. This file is then served to engine crawlers, which keeps Google happy and helps you avoid SEO penalties.
In addition, the Frontity team has produced a REST API – Head Tags plugin. This plugin adds all the meta tags in your website’s HEAD section, to the REST API’s responses.
This is particularly helpful if you’re using WordPress for a headless setup but still want to use the meta tags generated by a third-party SEO plugin. The Head Tags plugin supports many popular SEO solutions. This includes Yoast SEO, All in One SEO Pack, and WP SEO. These third party meta tags will be added to your WordPress REST API output.
Enhance With Plugins and Extensions
Frontity has lots to offer in terms of customization opportunities, thanks to a flexible extensibility pattern. You can interact with this pattern without making changes at the code level. This includes adding new features, and activating themes and extensions.
Frontity’s themes are compatible with the React packages available from the popular Node Package Manager (NPM). The Frontity team is also working on extensions for several plugins and services. This includes AdSense, Disqus, and Google Analytics. These extensions aren’t available yet, but Frontity has created a GitHub page, ready for the finished extensions.
What’s more, Frontity is compatible with all the WordPress plugins that support the REST API. For plugins not compatible with this API, you can either adapt the logic in your Frontity project, or use PHP to extend the incompatible plugin. This is exactly what Awsm Digital Innovations did, when they created a Frontity Package for their WP Job Openings plugin.
Support ECMAScript 6 (ES6) Where Available
To reach the largest possible audience, you need to support the majority of web browsers. Although they’re easy to overlook, you should also support older web browsers such as Internet Explorer (IE).
Many businesses and organizations find it difficult to migrate to modern web browsers. This means corporate visitors in particular may be viewing your site on an outdated browser. According to NetMarketShare, IE still has a 5.37 percent share of the browser market.
Supporting as many browsers as possible is a smart move, but there’s a problem – React uses ECMAScript 6 (ES6). ES6 is a general-purpose programming language that’s designed to ensure interoperability with different browsers. React may use ES6, but older web browsers don’t support ES6.
To overcome this problem, Frontity generates two bundles of JavaScript. One bundle is ES6 without ‘transpilation’ or ‘polyfills’, and another is for older browsers that don’t support ES6. Modern browsers that do support ES6 will request the ES6 bundle. This results in a reduced bundle size and shorter evaluation time within the web browser. Older web browsers will receive the bundle that doesn’t support ES6.
By generating these two packages, Frontity provides better performance for users on modern browsers. At the same time, Frontity remains backwards compatible with older browsers such as IE. This enables you to connect with the largest potential audience.
Compatible With Your Favorite Hosting
Once you’re happy with your site, you can deploy it to any Node.js server or serverless provider. Alternatively, you can choose your favorite WordPress hosting solution.
This enables you to select the hosting that has exactly the features your website needs to succeed. Frontity’s SPR, CDN, and navigation-ready HTML may already help you deliver a fast, responsive website – but why not get an additional speed boost?
By opting for a hosting provider that prioritizes performance, you can supercharge your website. If you’re lucky, your hosting plan may even provide Turbo Servers – 20X faster than competing WordPress hosting providers.
Choice is important, so the Frontity team also ensures their server code is small enough to work with serverless technologies. Recommended serverless solutions include Vercel and AWS Lambda.
The Disadvantages of Using Frontity
Frontity has lots to offer web developers and designers. However, there are some drawbacks you should be aware of. This can help you decide whether Frontity is the right framework for your particular project.
Frontity is designed to be easy to use. However, you will still benefit from some previous experience with React. You should also be prepared to adapt to the CSS-in-JS concept.
Since it was released in 2019, Frontity is classed as a relatively new framework. This means there are limited resources and community support.
The Frontity team has done a great job publishing all the documentation you need to start using this React-based framework. There’s also an active community forum where the Frontity developers take an active role in answering questions and offering advice. However, Frontity simply hasn’t had the time to build up the resources you’d expect from a more established project.
While some WordPress plugins are supported via Frontity packages, it’s far from the majority, particularly since Frontity is still a relatively new framework. If you have a specific plugin in mind, then you may need to build your own custom solution.
Finally, since Frontity is designed to be used with headless WordPress, it shares many of the disadvantages of a headless CMS. In particular, the headless approach can be challenging for users who don’t have extensive content management and programming experience. A headless CMS may also require more maintenance than traditional CMS installations.
How to Migrate Your Website to Frontity (in 4 Easy Steps)
Now we’ve discussed the pros and cons of using Frontity, it’s time to talk about how to get started. We previously published a detailed, step-by-step guide to building your first web application using the Frontity framework.
However, if you just want a high-level overview of the process, in this section we’ve broken the setup, development, and deployment journey into four quick, easy-to-digest steps.
Step 1: Create a New Frontity Project
To build a web application using Frontity, you’ll need Node.js and a WordPress installation. You can then create a local Frontity project by opening your laptop or computer’s Terminal and running the following command:
npx frontity create my-project
Make sure you replace my-project with the name of your project. When prompted, select the theme that you want to use. Frontity will now create a local Frontity directory on your laptop or computer.
Step 2: Connect Frontity to Your WordPress Website
By default, the Frontity folder is created in your users directory. You’ll need to
change directory (cd) so that the Terminal is pointing at your project’s root directory. For example:
cd /users/my-project
You can now start development, by running the following command:
npx frontity dev
When you run this command, a new page should open automatically in your default web browser. Initially, Frontity will connect to a test blog that displays demo content.
To connect Frontity to your WordPress website, navigate to the Frontity folder on your laptop or computer. Find the frontity.settings.js file and open it in a text editor, such as Apple’s TextEdit application.
In this file, find the following line: “api”: “https://test.frontity.org/wp-json”
You’ll need to change this to the address of your own website, with the wp-json extension. For example, if your website is https://example.com you should use: “api”: “https://example.com/wp-json”
Save your changes, and refresh the Frontity tab in your web browser. This page should now update to display content pulled directly from your WordPress website.
Step 3: Customize the Default Menu
By default, the Frontity menu contains links to placeholder content. Clicking on any of these links will throw a 404 error, so you should customize this menu with links to your own content.
In your local frontity.settings.js file, find the packages section. This section defines the links to Frontity’s demo content (Nature, Travel, Japan, and About Us).
You should replace these placeholder pages with your own content. For example, if you wanted to link to your website’s Contact page, located at https://example.com/contact, you’d use the following:
"packages": [
{
"name": "@frontity/mars-theme",
"state": {
"theme": {
"menu": [
[
"Contact",
"/contact/"
],
...
...
...
]
],
Now, save your changes and refresh your web browser. Your menu should now update with links to your website’s own unique content.
Step 4: Publish Your Website
Once you’re happy with your web application, you can create a production-ready bundle containing your React application and Frontity (Node.js) server. To create a production-ready bundle, run the following command in the Terminal:
npx frontity build
This will create a build folder containing your React application and Frontity (Node.js) server. You can then deploy this folder to any web hosting that’s optimized for Node.js.
You can also upload your project to a CDN and serverless service. Frontity recommends Vercel as a serverless solution. Alternatively, you could use AWS Lambda, Netlify or Google Functions.
Conclusion
Creating a headless WordPress website using React isn’t always straightforward, but Frontity removes much of the complexity involved. Since the initial configuration is handled for you, Frontity makes it easier to build a modern web application using WordPress and React.
To develop an SPA using Frontity, you need to:
- Create a new Frontity project.
- Connect Frontity to your WordPress website.
- Customize the default menu.
- Publish your web application.
When it comes to hosting your app, you can use a serverless environment or opt for Node.js hosting. At A2 Hosting, we’ve optimized our web hosting servers for Node.js and can provide up to 20X faster performance than competing Node.js hosting providers.
Image credit: Unsplash.
