loading...
Cover image for Preact SPA into a Wordpress theme

Preact SPA into a Wordpress theme

edorka profile image Eduardo Orive Vinuesa Updated on ・2 min read

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.

Discussion

pic
Editor guide