Importing Plugins

Overview

Throughout our docs, and especially in the how-to guides, we often show which plugins you need to use to achieve certain goals, but we skip the step-by-step instructions on how to enable those plugins. That is to prevent redundant content being copied in every article. In those guides, you’ll simply see an instruction like “Add this plugin to your Admin Area application”.

This article explains how to add plugins to:

• React applications (Admin Area and Website)
• GraphQL APIs (Main GraphQL API and Headless CMS API)
• Webiny CLI

React Applications

Both Admin Area and Website React applications follow the same folder structure, and so, the process of registering new plugins into both applications is the same.

The plugins entry files for these applications can be found at the following locations:

• Admin Area: apps/admin/src/plugins/index.ts
• Website: apps/website/src/plugins/index.ts

// A dedicated file for your custom plugin(s)
export default [
  {
    type: "my-plugin-type",
    hello() {
      console.log("Hello!");
    }
  }
];

Now that we have a file containing our plugins, we can import it and register in the React application:

import { plugins } from "@webiny/plugins";
// ...other imports...

// Import your custom plugins
import myPlugins from "./myPlugins";

plugins.register([
  // ... other plugins ...

  // Add your own plugins at the very end of the array.
  myPlugins
]);

With this, your new plugin(s) will be registered into the application.

GraphQL APIs

All GraphQL API Lambda function handlers present in the default Webiny project follow the same structure, and so, the process of registering new plugins is the same for all of them.

We’ll cover the two main GraphQL API Lambda function handlers: Main GraphQL API and Headless CMS GraphQL API. Their entry files can be found at the following locations:

• Main GraphQL API: apps/api/graphql/src/index.ts
• Headless CMS GraphQL API: apps/api/headlessCMS/src/index.ts

To register a new plugin, you need to add it to the end of the plugins array that is being passed to the createHandler factory function.

// A dedicated file for your custom plugin(s)
export default [
  {
    type: "my-plugin-type",
    hello() {
      console.log("Hello!");
    }
  }
];

Now that we have a file containing our plugins, we can import it and register in the corresponding Lambda function entry file:

// ...other imports...

// Import your custom plugins
import myPlugins from "./plugins/myPlugins";

export const handler = createHandler({
  plugins: [
    // ... other plugins ...

    // Add your own plugins at the very end of the array.
    myPlugins
  ]
});

Webiny CLI

To register a new plugin into the Webiny CLI, navigate to webiny.project.ts file, located in the root of your Webiny project, and add your new plugin to the plugins array.

As usual, we recommend creating a dedicated file/folder for your custom plugins, to keep things nicely organized.

export default [
  {
    type: "cli-command",
    create({ yargs, context }) {
      yargs.command("say-hi", "Prints a welcome message.", () => {
        console.log("Hi there! I'm a new Webiny CLI command.");
      });
    }
  }
];

Now add your new plugin to the Webiny CLI:

// ... other imports ...
import cliPlugins from "./cliPlugins";

export default {
  template: "@webiny/cwp-template-aws@5.x.y",
  name: "my-project",
  cli: {
    plugins: [
      // ... other plugins ...
      cliPlugins
    ]
  }
};

Next time you run the Webiny CLI, your new plugin will be applied.