< Go Back

Getting Started With Your First Strapi Plugin

Your Strapi 101 Certification 🏅

In this how-to, you will be getting your Strapi 101 certification 🏅 for getting a development workstation setup and creating your first plugin!

Requirements:

Yarn v1.2.0+
Node >=v14
Git
Basic CLI experience

Setup Your Strapi Work Environment

To begin, we will setup our Strapi work environment. This will ease the testing and development process when creating our new Strapi plugin.

Fork the repository to your GitHub account

On Github, fork strapi/strapi.git to your personal account.

Git Clone Your Strapi Forked Repository

Navigate to the location where your Strapi application will live.

git clone https://github.com/SharpeTronics/strapi.git && cd strapi

Checkout Latest Release

git checkout v4.9.2 && git status

Install the Dependencies

yarn install && yarn setup

After a few moments, the core Strapi app will be ready to Go!

> NX Successfully ran target build for 16 projects (45s)

Launch the Strapi Example Application

In the ./examples/ directory, we have 3 different example apps to use that quickly gets a Strapi app up in running in no time. We will make use of the ./examples/getstarted/ application.

cd ./examples/getstarted && yarn develop

Now, navigate to localhost:1337 from your web browser if it doesn't automatically launch for you.

Next, create a username and click Let's start.

Congrats! We now have a running Strapi application we can use to test our new plugin.

This process is also in alignment with Contributing to Strapi and sets you up for success!

Create Your First Strapi Plugin

Strapi created a CLI tool that makes things much simpler when it comes to giving back to their ecosystem.
In the root of your Strapi app ./getstarted, we will run one of these tools that allows us to build our first app scaffolding.

yarn strapi generate

then, scroll down to the "plugin" and touch "enter". The prompt will ask you some basic questions.


? Strapi Generators plugin - Generate a basic plugin 
? Plugin name my-first-plugin 
? Choose your preferred language JavaScript 
✔ +! 24 files added 
-> /plugins/my-first-plugin/strapi-admin.js 
-> /plugins/my-first-plugin/strapi-server.js 
-> /plugins/my-first-plugin/server/bootstrap.js 
-> /plugins/my-first-plugin/server/destroy.js 
-> /plugins/my-first-plugin/server/index.js 
-> /plugins/my-first-plugin/server/register.js 
-> /plugins/my-first-plugin/admin/src/index.js 
-> /plugins/my-first-plugin/admin/src/pluginId.js 
-> /plugins/my-first-plugin/server/config/index.js 
-> /plugins/my-first-plugin/server/content-types/index.js 
-> /plugins/my-first-plugin/server/controllers/index.js 
-> /plugins/my-first-plugin/server/controllers/my-controller.js 
-> /plugins/my-first-plugin/server/middlewares/index.js 
-> /plugins/my-first-plugin/server/policies/index.js 
-> /plugins/my-first-plugin/server/routes/index.js 
-> /plugins/my-first-plugin/server/services/index.js 
-> /plugins/my-first-plugin/server/services/my-service.js 
-> /plugins/my-first-plugin/admin/src/translations/en.json 
-> /plugins/my-first-plugin/admin/src/translations/fr.json 
-> /plugins/my-first-plugin/admin/src/utils/getTrad.js 
-> /plugins/my-first-plugin/admin/src/components/Initializer/index.js 
-> /plugins/my-first-plugin/admin/src/components/PluginIcon/index.js 
-> /plugins/my-first-plugin/admin/src/pages/App/index.js 
-> /plugins/my-first-plugin/admin/src/pages/HomePage/index.js 
✔ ++ /plugins/my-first-plugin/README.md 
✔ ++ /plugins/my-first-plugin/package.json 
✔ -> 
You can now enable your plugin by adding the following in ./config/plugins.js 
──────────────────────────────────────────── 
module.exports = { 
// ... 
'my-first-plugin': { 
enabled: true, 
resolve: './src/plugins/my-first-plugin' 
}, 
// ... 
} 
────────────────────────────────────────────

Next, we update our ./src/plugins.js file and re-launch our Strapi app.

nano ./config/plugins.js

Add the following snippet provided for you from the Strapi team.

module.exports = { 
// ... 
'my-first-plugin': { 
enabled: true, 
resolve: './src/plugins/my-first-plugin' 
}, 
// ... 
}

Then save/exit and launch Strapi

yarn build && yarn develop

If you followed the instructions, you should now have your very first Strapi Plugin you created!

You will see a new left hand menu called: my-first-plugin or whatever you named your first plugin. If you click on that plugin, you will see the plugin homepage that says:

my-first-plugin's HomePage 
Happy coding

The next step would be to learn how to begin integrating your idea into Strapi and also learning how to publish your package to NPM.com, but that is another how-to for another day.

Financial Support & Donations

I mainly debug code, drive, yak shave and deep dive into research for Linux base operating systems.

I am a Free Software Associate (FSF), privacy advocate and Cosmopolitan that enjoys philosophie, meta-physics, hacking and debugging computer hardware/software.

https://liberapay.com/oDinZu/