HOW TO: Serve Frontity inside WordPress on any environment (no node.js)

This is a proof-of-concept based on a plugin in progress by Frontity developer Luis Herranz. It is not meant for production just yet but I encourage you to give it a go on your current WordPress hosting environment and share feedback on the Frontity Forum here.

What is this all about?

This is a method to serve Frontity from a Node.js server directly through WordPress using this plugin to bypass your theme and render your Frontity assets on the frontend instead.

This way you can use the same domain for your frontend and backend (and allowing post/page previews to work), you'll even be able to keep your WordPress admin bar when viewing the frontend:

This has huge implications for caching, sitemaps, 404 pages, etc and allows you to effectively render Frontity on any shared hosting - as most don't yet provide Node.js support.

I've kept the steps minimal but I'll assume you don't have a Node.js server with Frontity already (we'll use Digital Ocean for this). I'll also assume you have a WordPress site already made.

Let's do this!

Spin up a Digital Ocean Node.js droplet (the $5 p/m droplet is more than enough), note its IP address and connect to the droplet via SSH.

Run the following to ensure npm is up to date, npx is present and port 3000 is able to serve Frontity externally

sudo npm cache clean -f
sudo npm install -g n
sudo n stable
npm install -g npx
ufw allow 3000
sudo ufw restart

Create a Frontity project (rename YOUR_FRONTITY_PROJECT to whatever you like):

mkdir /var/www/html && cd /var/www/html
npx frontity create YOUR_FRONTITY_PROJECT

Follow the on-screen instructions and when done cd into your project directory and edit the frontity.settings.js file:

cd YOUR_FRONTITY_PROJECT && nano frontity.settings.js

Scroll down the menu segment and remove all categories except home so it looks like this:

"menu": [
[
"Home",
"/"
]
],
"featured": {

Scroll down a little further in the file to api and change the URL to your WordPress domain:

"name": "@frontity/wp-source",
"state": {
"source": {
"api": "https://YOUR_DOMAIN.COM/wp-json"

Save and exit the frontity.settings.js file and begin serving the Frontity project publicly:

npx frontity build && npx frontity serve

Next, go to your WordPress site and wp-admin -> Settings -> Permalinks and ensure they are NOT set to Plain (Post name is ideal)

Download the Theme Bridge (working title, developed by Frontity's Luis Herranz) package as a ZIP from Github here, and upload it to your WordPress site as a plugin.

You'll need to edit the top part of the file wp-content/plugins/theme-bridge-poc/includes/template.php.

Change both instances of http://localhost:3000/ to match the Node.js server IP you noted before (where I have 123.123.123.123 below):

<?php

// Redirect Webpack HMR to the Frontity server.
if ( $_SERVER['REQUEST_URI'] === '/__webpack_hmr' ) {
  header( 'Location: http://123.123.123.123:3000/__webpack_hmr' );
  status_header( 301 );
  exit();
} 

// Build the URL to do the request to the Frontity server.
$url = 'http://123.123.123.123:3000' . $_SERVER['REQUEST_URI'];

After saving those changes, activate the plugin.

If you're running your WordPress site on Apache, you should be all set!

Additional step if your WordPress instance is on nginx:

If you're running in nginx you'll to add this to ensure the /static files come from the Node.js server (change YOUR_NODEJS_SERVER_IP to the IP address you noted before):

#Serve /static from node server through main domain
location ~* ^/static/?(.*) {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Cache-Control $http_cache_control;
proxy_pass http://YOUR_NODEJS_SERVER_IP:3000;
}

Nice work!

You'll now be able to load both the frontend and backend on the same domain! You'll also notice that the admin-bar is present on the frontend when logged in, sitemaps will load on your domain without redirects and post/page previews work too!

Sick work Luis Herranz and Frontity team!

Go ahead and test it out on your hosting provider of choice and share feedback in the Frontity forums here.