Preact SPA into a Wordpress theme

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:

1. 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);
   }
   

2. 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.

3. Copy or rename wp-theme/index.html as wp-theme/index.php.

4. 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);
   }
   

5. 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.
   */
   

6. [optional] Consider some cleanup before shipping:
   

   rm wp-theme/*map wp-theme/sw-debug.js
   

7. 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?

Questions? Comments? Please comment below I would be happy to help.