Writing a Plugin

Learn how to extend Frontal with plugins

Plugins allows developers to extend Frontal with more features, and since Frontal is powered by Webpack, most plugins will actually be modifying the Webpack config to either apply loaders or Webpack plugins and therefore add more functionalities.

In this guide we will go through a basic plugin example, however if you are looking for more complex plugin examples have a look at the source code of some of the plugins implemented in Frontal.

The Basics

a Frontal plugin is essentially a javascript module that exports a class, that class must extend @frontal/plugin, once the plugin interface is extended, implement some or all of the available methods in order to extend Frontal behaviour.

Your plugin can be simply a javascript file within your frontal application or an NPM package whose main file is a javascript file that exports a valid class.

Plugin Interface Example

// ./my-awesome-plugin.js
const Plugin = require('@frontal/plugin');

module.exports = class MyPlugin extends Plugin {
  /**
   * @param app - A frontal.js application instance
   * @param opts - Options passed to the plugin
   */
  constructor(app, opts) {
    // methods from the frontal application instance can be used such as the 'inDevMode()'
    this.isDev = app.inDevMode();

    // plugin options can be used as well
    this.opts = opts;
  }

  /**
   * the webpack method enables modifying the Webpack compiler configuration.
   *
   * @param config - An object that exposes methods for modifying webpack configuration
   */
  webpack(config) {
    // Allows adding a new plugin to the webpack compiler
    config.addPlugin(
        new WebpackPlugin()
    );

    // Allows adding module rules to webpack,
    // therefore adding new loaders for certain files.
    config.addModuleRule({
      test: /\.(png)$/i,
      use: [
        {
          loader: require.resolve('file-loader'),
        },
      ],
    });

    // Allows merging configuration with the final webpack config.
    // Be careful as this might break core Frontal features.
    config.merge({
      ...
    })
  }

  /**
   * the bundles method can be used to modify the final bundles object
   * by either adding or removing assets from all bundles or adding
   * new bundles entirely to the build process.
   *
   * @param bundles - the bundles object
   * @return bundles - the modified bundles object is returned
   */
  bundles(bundles) {
    // Create a new bundle named 'myUniqueBundle' with 'file.js' assets to all pages
    bundles['myUniqueBundle'] = {
      assets: ['./file.js'],
      pages: ['**/*.html']
    }

    // return final modified bundles
    return bundles;
  }
}

Using a Plugin

From within your frontal.config.js file, you can activate a plugin as follows:

// frontal.config.js
module.exports = {
  plugins: [
    {
      plugin: require.resolve('./my-awesome-plugin.js'),
      options: {
        // options to pass to the plugin
      },
    }
  ]
}
Would You Like To KnowAbout Our Next Products & Free Tools?