How to Create a Strapi v4 Plugin : Generate a Plugin 1/6
Tags: strapi, plugins, marketplace
Published: 2022-05-23 13:53:35


The documentation already covers a [plugin development](https://docs.strapi.io/developer-docs/latest/development/plugins-development.html) 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](https://design-system.strapi.io/) 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](https://docs.strapi.io/developer-docs/latest/developer-resources/cli/CLI.html#strapi-generate) CLI command.

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

```bash
# yarn
yarn strapi generate plugin

# npm
npm run strapi generate plugin
```

```bash
$ strapi generate plugin
? Plugin name todo
```

- We are going to call this plugin: `todo`

```bash
$ 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:

```js
// ./config/plugins.js
module.exports = {
  todo: {
    enabled: true,
    resolve: './src/plugins/todo',
  },
};
```

The last step of this section is to [build the admin](https://docs.strapi.io/developer-docs/latest/developer-resources/cli/CLI.html#strapi-build) 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**


```bash
# 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:

[Step 2 - How to create a Strapi v4 plugin : File structure 2/6](https://strapi.io/blog/how-to-create-a-strapi-v4-plugin-file-structure-2-6)

[Step 3- How to create a Strapi v4 plugin : Add a content-type to a plugin 3/6](https://strapi.io/blog/how-to-create-a-strapi-v4-plugin-add-a-content-type-to-a-plugin-3-6)

[Step 4- How to create a Strapi v4 plugin : Server customization 4/6](https://strapi.io/blog/how-to-create-a-strapi-v4-plugin-server-customization-4-6)

[Step 5- How to create a Strapi v4 plugin : Admin customization 5/6](https://strapi.io/blog/how-to-create-a-strapi-v4-plugin-admin-customization-5-6)

[Step 6- How to create a Strapi v4 plugin : Publish on npm 6/6](https://strapi.io/blog/how-to-create-a-strapi-v4-plugin-publish-on-npm-6-6)