Build a Strapi 5 Plugin with Medium & Dev.to APIs — Part 1
Build a Strapi 5 Plugin with Medium & Dev.to APIs — Part 1 Introduction to Strapi Plugins Strapi plugins allow you to add extra functionalities and custom features to power up your Strapi application. One of the features of the Strapi CMS is the ability it gives you to unlock the full potential of content management, thus allowing you to build custom features for yourself and the community. Victor Coisne, the VP of marketing at Strapi, explained this in his article “Building Communities That Drive Growth”. “Strapi builds trust and shows that member input matters. They also foster transparency through forums, AMAs, and regular updates that keep members informed and valued.” “Strapi builds trust and shows that member input matters. They also foster transparency through forums, AMAs, and regular updates that keep members informed and valued.” In this article, we will build a custom Strapi plugin that will allow us publish content to Medium and Dev.to using their APIs from the Strapi admin panel. Tutorial Outline This article is divided into two parts: Part 1: Initializing the plugin, content types, and Dev.to API integration Part 2: Medium API integration, pagination, search functionality, and injection zones What You Will Learn In this comprehensive tutorial, you will learn about the following: Initializing a Strapi plugin Utilizing a Strapi Lifecycle function Creating a Content Type for a Strapi plugin and Storing Data Passing data from the server to the admin of a Strapi plugin Integrating and consuming Medium and Dev APIs with Strapi plugin Injecting a Strapi Plugin to a specific collection type with injection zones Adding Pagination and Search functionality to a Strapi plugin Prerequisites To follow along with this tutorial, please consider the following: A basic knowledge of React is required. Strapi plugins are developed using React.js. The latest Node.js runtime installed on your machine. A Dev account. A Medium account. An API platform like Postman. What We Will Be Building One of the features of the Strapi CMS is the ability it gives you to unlock the full potential of content management. This means that contents like blog posts can also be published from Strapi to platforms like Medium and Dev. In this article, we will make use of Dev API and Medium API, integrate them with Strapi headless CMS to allow us publish contents from the Strapi admin panel to these platforms. What is a Strapi Plugin? Strapi plugins allow you to extend Strapi core features. They can be in 4 forms. Built-in plugins like the Upload plugin, Users and Permissions plugin, Email plugin, etc. 3rd-party plugins developed by the community and can be found in the Strapi Marketplace. Examples include the Redirects, Algolia, AWS S3, etc. Custom plugins that you can develop on your own and share on the Strapi Marketplace or use alone. An example a Strapi custom plugin is the one for this tutorial. Extended Strapi plugin. This is when you extend the features of an existing plugin. To learn more about Strapi plugins, please visit its Strapi documentation page. Strapi Design System To develop a Strapi plugin, you will be making use of the Strapi design system. This is a collection of typographies, colors, components, icons, etc. that are in line with Strapi brand design. The Strapi design system allows you to make Strapi’s contributions more cohesive and to build plugins more efficiently. This comes with a new Strapi app. Install Strapi and Create New Collection Types Install a Strapi 5 Application Install a new Strapi 5 application by running the command below. For this project, we will be using NPM; you can choose any package manager of your choice: # npm npx create-strapi-app@latest # npm # yarn yarn create strapi # yarn # pnpm pnpm create strapi # pnpm The name of our project is plugin-project as shown below. The terminal will ask you a few questions. Choose a Yes or a No depending on your setup options. From the installation process, the name of our project is plugin-project. Feel free to give it a name of your choice. Start Strapi Application After the successful installation of your Strapi project, you should be able to start your Strapi application. CD into your Strapi project: cd plugin-project Run the command below to start your Strapi development server: npm run develop The command above will redirect you to the Strapi admin registration page. Ensure you create a new admin user. Create New Strapi Content Types Strapi content types or models are data structures for the content we want to manage. Create the Strapi collection types Blog and Tag. Later on, we will create a collection type called Post for our Strapi plugin. Blog refers to entries we want to publish. Post on the other hand are entries containing details of a blog we

Build a Strapi 5 Plugin with Medium & Dev.to APIs — Part 1
Introduction to Strapi Plugins
Strapi plugins allow you to add extra functionalities and custom features to power up your Strapi application.
One of the features of the Strapi CMS is the ability it gives you to unlock the full potential of content management, thus allowing you to build custom features for yourself and the community. Victor Coisne, the VP of marketing at Strapi, explained this in his article “Building Communities That Drive Growth”.
“Strapi builds trust and shows that member input matters. They also foster transparency through forums, AMAs, and regular updates that keep members informed and valued.”
“Strapi builds trust and shows that member input matters. They also foster transparency through forums, AMAs, and regular updates that keep members informed and valued.”
In this article, we will build a custom Strapi plugin that will allow us publish content to Medium and Dev.to using their APIs from the Strapi admin panel.
Tutorial Outline
This article is divided into two parts:
- Part 1: Initializing the plugin, content types, and Dev.to API integration
- Part 2: Medium API integration, pagination, search functionality, and injection zones
What You Will Learn
In this comprehensive tutorial, you will learn about the following:
- Initializing a Strapi plugin
- Utilizing a Strapi Lifecycle function
- Creating a Content Type for a Strapi plugin and Storing Data
- Passing data from the server to the admin of a Strapi plugin
- Integrating and consuming Medium and Dev APIs with Strapi plugin
- Injecting a Strapi Plugin to a specific collection type with injection zones
- Adding Pagination and Search functionality to a Strapi plugin
Prerequisites
To follow along with this tutorial, please consider the following:
- A basic knowledge of React is required. Strapi plugins are developed using React.js.
- The latest Node.js runtime installed on your machine.
- A Dev account.
- A Medium account.
- An API platform like Postman.
What We Will Be Building
One of the features of the Strapi CMS is the ability it gives you to unlock the full potential of content management. This means that contents like blog posts can also be published from Strapi to platforms like Medium and Dev.
In this article, we will make use of Dev API and Medium API, integrate them with Strapi headless CMS to allow us publish contents from the Strapi admin panel to these platforms.
What is a Strapi Plugin?
Strapi plugins allow you to extend Strapi core features.
They can be in 4 forms.
- Built-in plugins like the Upload plugin, Users and Permissions plugin, Email plugin, etc.
- 3rd-party plugins developed by the community and can be found in the Strapi Marketplace. Examples include the Redirects, Algolia, AWS S3, etc.
- Custom plugins that you can develop on your own and share on the Strapi Marketplace or use alone. An example a Strapi custom plugin is the one for this tutorial.
- Extended Strapi plugin. This is when you extend the features of an existing plugin.
To learn more about Strapi plugins, please visit its Strapi documentation page.
Strapi Design System
To develop a Strapi plugin, you will be making use of the Strapi design system. This is a collection of typographies, colors, components, icons, etc. that are in line with Strapi brand design.
The Strapi design system allows you to make Strapi’s contributions more cohesive and to build plugins more efficiently.
This comes with a new Strapi app.
Install Strapi and Create New Collection Types
Install a Strapi 5 Application
Install a new Strapi 5 application by running the command below. For this project, we will be using NPM; you can choose any package manager of your choice:
# npm
npx create-strapi-app@latest # npm
# yarn
yarn create strapi # yarn
# pnpm
pnpm create strapi # pnpm
The name of our project is plugin-project as shown below. The terminal will ask you a few questions. Choose a Yes or a No depending on your setup options.
From the installation process, the name of our project is plugin-project. Feel free to give it a name of your choice.
Start Strapi Application
After the successful installation of your Strapi project, you should be able to start your Strapi application.
CD into your Strapi project:
cd plugin-project
Run the command below to start your Strapi development server:
npm run develop
The command above will redirect you to the Strapi admin registration page. Ensure you create a new admin user.
Create New Strapi Content Types
Strapi content types or models are data structures for the content we want to manage.
Create the Strapi collection types Blog and Tag. Later on, we will create a collection type called Post for our Strapi plugin.
Blog refers to entries we want to publish. Post on the other hand are entries containing details of a blog we want to publish such as the blog link, Medium link, etc. A Post entry will be created automatically using Strapi Life Cycle upon creating a Blog entry.
If you are new to Strapi, learn about content-types here.
To create a new Strapi collection type, navigate to the Content-type Builder and click on the “+ Create new collection type” as shown in the first image below. After that, proceed to enter the name of the Collection type and click “Continue” to create fields for each collection type as shown in the second image below.
Now, create the following collection types.
Tag Collection Type This represents the category a blog post belongs to. It is required for both the Medium and Dev API. As we will see in the Blog collection type below, it has a “many to one” relation with the Blog collection, i.e., a blog entry can have more than one tag.
Blog Collection Type The Blog collection type represents the blog post. It has fields like canonicalUrl and tags, which are required parameters when making requests to the Medium API or the Dev API.