Preact SPA into a Wordpress theme

Eduardo Orive Vinuesa — Tue, 18 Aug 2020 12:25:50 +0000

Updated: Aug 19th, Found a solution that, however manual it's pretty clean and doesn't require adding new dependencies.

Why?

Recently I was asked to run a small web to hub the contents of a poetry event. Wordpress or Strapi were my first options but I don't feel confident with PHP to fully customize wordpress and I had no practice with Strapi at all.

I have ran some test projects with Preact and it's CLI (https://github.com/preactjs/preact-cli/) makes it pretty easy to start a SPA.

What?

Given we have done an SPA capable of fetch Wordpress posts from it's API, and categories and all that; we still will have to manage with deployment and issues like CORS.

The obvious solution is to use your SPA as a Wordpress Theme.

How to do it myself?

Imagine that our theme formal name is preact-spa. We will store the output into the folder wp-theme.

Then, step by step:

Create a preact-wp.config.js with this content:

import previous from './preact.config.js';

export default function (config, env, helpers) {
    config.output.publicPath = '/wp-content/themes/preact-spa/';
    previous(config, env, helpers);
}

Now we have to build it:
```
yarn build -c preact-wp.config.js --dest wp-theme
```
you can also run npm run build ... if not using yarn.
Copy or rename wp-theme/index.html as wp-theme/index.php.

If you are using css urls you may notice that the path to these files is not set to be under wp-content/... a barbarian but practical solution is to install string-replace-loader as a development dependency and expand our preact-wp.config.js

import previous from './preact.config.js';

export default function (config, env, helpers) {
    const publicPath = '/wp-content/themes/nsp/';
    config.output.publicPath = publicPath;
    config.module.rules.push({
        test: /\.css/,
        loader: 'string-replace-loader',
        options: {
          search: /url\('\/assets\/(.*)?'\)/ig, 
          replace: (_match, resource) => `url('${publicPath}assets/${resource}')`,
          flags: 'g',
        }
      });
    previous(config, env, helpers);
}

create a new wp-theme/style.css file:

/*
Theme Name: Preact SPA
Author: Your Name
Author URI: https://github.com/your-github
Description: Create React WP Theme in no time
Version: 0.0.1
License: GPL
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: generated
Text Domain: your-domain

This theme, like WordPress, is licensed under the GPL.
*/

[optional] Consider some cleanup before shipping:
```
rm wp-theme/*map wp-theme/sw-debug.js
```
Zip it to your Wordpress site and switch to this theme.

Issues?

Sure, Creating a theme from running yarn dev so it updates it self as the code changes. However I don't consider it really necessary.

Yes... But?