The documentation already covers a plugin development section. However, this might be a little bit hard to follow especially if you discovered Strapi recently. This tutorial aims to make it easier for you to learn this process with a real example of a To-Do list plugin.

You will learn to create a simple To-Do plugin in which you'll create a plugin content-type for persisting data, customize the back-end, create settings, create a plugin homepage, and inject a React component in the admin, use the Strapi Design System and more.

This step by step Strapi v4 plugin development tutorial works for the Strapi v4 version only.

Generate a plugin

We assume you have a Strapi project and you are located inside of it from your terminal. From there, you can simply generate a plugin using the generate CLI command.

This command, allows you to generate APIs, controllers, content types, plugins, policies, middlewares, and services for your Strapi project.

# yarn
yarn strapi generate plugin

# npm
npm run strapi generate plugin

$ strapi generate plugin
? Plugin name todo

• We are going to call this plugin: todo

$ strapi generate plugin
? Plugin name todo
✔  +! 25 files added
...

You can now enable your plugin by adding the following in ./config/plugins.js.

─────────────────────────────────
module.exports = {
  // ...
  'todo': {
    enabled: true,
    resolve: './src/plugins/todo'
  },
  // ...
}
─────────────────────────────────

Strapi created a new ./src/plugins/todo folder containing the default files of your v4 plugin.

The result of the generate command invite you to update your ./config/plugins.js file if it already exists or to create it with the following:

1
2
3
4
5
6
7
// ./config/plugins.js
module.exports = {
  todo: {
    enabled: true,
    resolve: './src/plugins/todo',
  },
};

The last step of this section is to build the admin of your Strapi project.

Updating the admin requires building your Strapi project. By default, Strapi will inject some plugin components (menu link, homepage) in the admin which is why a build is required.

However, you can directly start your server with 'yarn'|'npm run' develop --watch-admin options. It will start your application with the autoReload enabled and the front-end development server. It allows you to customize the administration panel while not having to build every time.

Instead of building your application again and again during your plugin development, I advise you to work on your plugin while having your Strapi project running with the autoReload enabled by using: --watch-admin

Once you are done with your plugin development, you'll need to build your application

# yarn
yarn build
# or
yarn develop --watch-admin

# npm
npm run build
# or
npm run develop --watch-admin

If you start your server after building or after running develop --watch-admin, you should see your todo plugin in the main navigation linking to an empty homepage.

Next article: File structure part 2/6