Plugin creation and setup
The content of this page might not be fully up-to-date with Strapi 5 yet.
To start developing a Strapi plugin, you need to:
- create the plugin,
- enable the plugin,
- install dependencies, build the admin panel, and start the server(s).
You created a Strapi project.
Use the CLI to create a project:
Run the corresponding command in a terminal window, replacing my-project
with the name of your choice:
- Yarn
- NPM
yarn create strapi-app my-project --quickstart
npx create-strapi-app@latest my-project --quickstart
More details can be found in the CLI installation guide.
Create the plugin using the CLI generator
The fastest way to create a Strapi plugin is to use the CLI generator. To do so:
- Navigate to the root of an existing Strapi project, or create a new one.
- Run the following command in a terminal window to start the interactive CLI:
- Yarn
- NPM
yarn strapi generate plugin
npm run strapi generate plugin
- Choose either
JavaScript
orTypeScript
for the plugin language.
Enable the plugin
Once the strapi generate plugin
CLI script has finished running, the minimum required code for the plugin to work is created for you, but the plugin is not enabled yet.
To enable a plugin:
- If it does not exist already, create the plugins configuration file file at the root of the Strapi project.
- Enable the plugin by adding the following code to the plugins configuration file:
- JavaScript
- TypeScript
module.exports = {
// ...
"my-plugin": { // name of your plugin, kebab-cased
enabled: true,
resolve: "./src/plugins/my-plugin", // path to the plugin folder
},
// ...
};
export default {
// ...
"my-plugin": {
enabled: true,
resolve: "./src/plugins/my-plugin", // path to plugin folder
},
// ...
};
If you plan to use the plugin outside the Strapi project it was created in, move your plugin file outside the Strapi project and change the resolve
value to the absolute directory path of your plugin.
Install dependencies, build the admin panel, and start servers
Once the plugin code has been generated and the plugin is enabled, the next steps slighly differ depending on whether you created a vanilla JavaScript-based plugin or a TypeScript-based plugin (see step 3 of the CLI generator instructions).
- JavaScript-based plugin
- TypeScript-based plugin
-
Navigate to the folder of the plugin.
If created from a Strapi project using the CLI generator, plugins are located in thesrc/plugins
folder (see project structure). -
Run the following command in the newly-created plugin directory to install plugin dependencies:
- Yarn
- NPM
yarn
npm install
- Navigate back to the Strapi project root with
cd ../../..
and run the following commands to build the admin panel and start the server(s):
- Yarn
- NPM
yarn build
yarn develop
npm run build
npm run develop
-
Navigate to the folder of the plugin.
If created from a Strapi project using the CLI generator, plugins are located in thesrc/plugins
folder (see project structure). -
Run the following command in the newly-created plugin directory to install plugin dependencies:
- Yarn
- NPM
yarn
npm install
- Still in the plugin directory (e.g.,
src/plugins/my-plugin
), run the following command:
- Yarn
- NPM
yarn build
npm run build
This step transpiles the TypeScript files and outputs the JavaScript files to a dist
directory that is unique to the plugin.
- Navigate back to the Strapi project root with
cd ../../..
and run the following commands to build the admin panel and start the server(s):
- Yarn
- NPM
yarn build
yarn develop
npm run build
npm run develop
You should now be ready to start developing your plugin.
You can either jump to the plugin structure documentation or read the servers and hot reloading section to learn more about different ways to start the server.
Servers and hot reloading
Strapi itself is headless . The admin panel is completely separate from the server.
The server can be started in 2 different ways: you can run the backend server only or start both the server and admin panel servers.
Start only the backend server
To start only the backend server, run the following command:
- Yarn
- NPM
yarn develop
npm run develop
This will run the server on localhost:1337
and enable hot reloading only on the back-end server, i.e. it will only auto-reload when changes are made to the server. If you are only doing development in the ./server
directory of your plugin, this will be faster.
Start both the backend and admin panel servers
If you are doing development on both the /server
and /admin
directories of your plugin, run the following command:
- Yarn
- NPM
yarn develop
npm run develop
This will run the server on localhost:1337
and enable hot reloading on both the back-end and front-end servers, i.e.it will auto-reload when changes are made to the server or the admin panel of Strapi.