Skip to content

Instantly share code, notes, and snippets.

@ComfortablyCoding
Created June 7, 2022 06:27
Show Gist options
  • Save ComfortablyCoding/5852bd2fb259d1fdee144818f6e824c0 to your computer and use it in GitHub Desktop.
Save ComfortablyCoding/5852bd2fb259d1fdee144818f6e824c0 to your computer and use it in GitHub Desktop.
Unofficial docs for Strapi plugins, to be used as a quick reference and not a docs replacement

Create a plugin

  1. Navigate to the root of the strapi project
  2. Run strapi generate
  3. Select plugin
  4. Add the requested data

The Admin is the frontend part of your plugin. All of its code will be locate in the admin/ folder located within the plugin.

Lifecycle Functions

Within the admin we have access to the following lifecycle functions.

  • register
  • bootstrap

Injection Zones

Injection zones are sections of the strapi backend that support custom react components to be injected into them.

Predefined Injection Zones

The list of predefined injection zones can be found in the injection zones api section of the docs.

They are used like so

// path: my-plugin/admin/src/index.js

export default {
  bootstrap(app) {
    app.injectContentManagerComponent('view name', 'injection zone location', {
      name: 'name of the component',
      Component: () => 'react compo', // function or class
    });
  }
}

The useCMEditViewDataManager hook can be used to access the records data in edit view. Their is no equivalent for list view at this time.

The Server is the backend part of your plugin. All of its code will be locate in the server/ folder located within the plugin.

Lifecycle Functions

Within the server we have access to the following lifecycle functions.

  • register
  • bootstrap
  • destroy

The plugin routes are defined in the routes/ folder. By default all routes are admin routes meaning they can only be accessed internally by the plugin. To define both admin and content-api routes for the plugin the following structure can be used

// path: ./src/plugins/my-plugin/server/routes/index.js

module.exports = {
    'content-api': {
        type: 'content-api',
        routes: [],
    },
    'admin': {
        type: 'admin',
        routes: [],
    },
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment