Strapi Plugin development
Posted on April 10, 2024 - by Andy Cinquin
StrapiCMS HeadlessPlugin developmentAdviceJavascriptTypescript
In this article, we'll look at how I did it, why I developed a plugin for Strapi, what the associated issues are, and what advice I can offer in the end.
First of all, what's Strapi? Strapi is a headless CMS, a tool that lets you generate schemas and manage data quickly and easily, much like Firebase, Supabase, Directus, Pocketbase... The list could be very long, the CMS jungle is vast.
The language? JavaScript! the way a plugin should look: a hellish architecture! (I'm making a big deal of it, but the architecture is really quite clean!)
. \# root of the plugin folder (e.g., /src/plugins/my-plugin)
├── [admin](https://docs.strapi.io/dev-docs/api/plugins/admin-panel-api) \# Admin panel part of your plugin.
│ └── src
│ ├── components \# Contains your front-end components
│ │ ├── Initializer
│ │ │ └── index.js \# Plugin initializer
│ │ └── PluginIcon
│ │ └── index.js \# Contains the icon of your plugin in the main navigation
│ ├── pages \# Contains the pages of your plugin
│ │ ├── App
│ │ │ └── index.js \# Skeleton around the actual pages
│ │ └── HomePage
│ │ └── index.js \# Homepage of your plugin
│ ├── translations \# Translations files to make your plugin i18n-friendly
│ │ ├── en.json
│ │ └── fr.json
│ └── utils
│ │ └── getTrad.js \# getTrad function to return the corresponding plugin translations
│ ├── index.js \# Main setup of your plugin, used to register elements in the admin panel
│ └── pluginId.js \# pluginId variable computed from package.json name
├── node\_modules
├── [server](https://docs.strapi.io/dev-docs/api/plugins/server-api) \# Back-end part of your plugin
│ ├── [config](https://docs.strapi.io/dev-docs/api/plugins/server-api#configuration)
│ │ └── index.js \# Contains the default server configuration
│ ├── [content-types](https://docs.strapi.io/dev-docs/api/plugins/server-api#content-types) \# Content-types specific to your plugin
│ │ └── index.js \# Loads all the plugin's content-types
│ ├── [controllers](https://docs.strapi.io/dev-docs/api/plugins/server-api#controllers) \# Controllers specific to your plugin
│ │ ├── index.js \# Loads all the plugin's controllers
│ │ └── my-controller.js \# Custom controller example. You can rename it or delete it.
│ ├── [middlewares](https://docs.strapi.io/dev-docs/api/plugins/server-api#middlewares) \# Middlewares specific to your plugin
│ │ └── index.js \# Loads all the plugin's middlewares
│ ├── [policies](https://docs.strapi.io/dev-docs/api/plugins/server-api#policies) \# Policies specific to your plugin
│ │ └── index.js \# Loads all the plugin's policies
│ ├── [routes](https://docs.strapi.io/dev-docs/api/plugins/server-api#routes) \# Routes specific to your plugin
│ │ └── index.js \# Contains an example route for the my-controller custom controller example
│ └── [services](https://docs.strapi.io/dev-docs/api/plugins/server-api#services) \# Services specific to your plugin
│ │ ├── index.js \# Loads all the plugin's services
│ │ └── my-service.js \# Custom service example. You can rename it or delete it.
│ ├── [bootstrap.js](https://docs.strapi.io/dev-docs/api/plugins/server-api#bootstrap) \# Function that is called right after the plugin has registered
│ ├── [destroy.js](https://docs.strapi.io/dev-docs/api/plugins/server-api#destroy) \# Function that is called to clean up the plugin after Strapi instance is destroyed
│ ├── index.js \# Loads the code for all the server elements
│ └── [register.js](https://docs.strapi.io/dev-docs/api/plugins/server-api#register) \# Function that is called to load the plugin, before bootstrap.
├── package.json
├── README.md
├── [strapi-admin.js](https://docs.strapi.io/dev-docs/api/plugins/admin-panel-api) \# Entrypoint for the admin panel (front end)
└── [strapi-server.js](https://docs.strapi.io/dev-docs/api/plugins/server-api) \# Entrypoint for the server (back end)
Roughly speaking, the plugin is divided into a back & front end, with the front end in React and the back end in javascript, using Strapi's data management and API system and internal tools.
The idea here is to go through all the images in our strapi, to list them if and only if they don't have alternative texts and captions, so that when an image is clicked on, the image in question is processed to analyze it and deduce an alternative text and caption, and thus improve the SEO performance of our images in general.
After clicking on an image and waiting for the process :
We find ourselves able to fill in a very large amount of data in relation to the images present in our API.
In concrete terms, in terms of raw code, it looks like Strapi, the separation between a controller, the route, the services, and it's Strapi that takes care of the connection to the database.
Thank you for your visit, feel free to contact me for
any information, quote or collaboration proposal. I will
be happy to answer you as soon as possible.
Did you like this article? Feel free to share it!