Introduction to Strapi Plugin Development
Hello and welcome to Plugin Development 101, where we're going to learn all the basic concepts you need to know about getting started with plugin development with Strapi. First, we're going to talk about the prerequisites, what are plugins, what are we going to build, and where to find help.
For prerequisites, you need to have basic knowledge of Javascript, React, and Strapi. You need to download and install Node on your local machine. So what are plugins? Plugins allow you to add or extend new functionality in your Strapi application. This is great because you do it without altering the core code and it allows you to make your code maintainable, customizable, and you can easily share your plugin via npm or the Strapi marketplace.
So what are we going to build today? We are going to build this awesome to-do plugin. Yes, it's simple, but it's going to introduce you to all the basic concepts that you need to know when learning how to get started with plugin development with Strapi. So we are able to add our first to-do, we are able to check it, mark it as complete, we could even edit it and save it, or do full CRUD functionality within our plugin here. This is the awesome plugin we're going to build today. We're going to learn everything about it. I'm excited to get this series started with you and I hope you're excited too.
By the way, you could go to market.strapi.io to see some of the awesome plugins that were built by the Strapi team or the Strapi community or other developers. But the one-stop shop for all your plugin development needs is here at strapi.io/plugins-resources, and here you will get access to documentation, guided tutorials, and videos. So check out this page and definitely bookmark it for later reference.
But if you do have additional questions, you could definitely check out the Strapi forum and post your questions here. And better yet, you could join our awesome Strapi community on Discord where you could ask questions directly as well. And I will put all these links in the description below to make sure that you have all the resources that you need for success.
Setting Up the Strapi Application
With that being said, let's start building our plugin.
Once you open your terminal in the folder where you'd like to create your Strapi project, go ahead and make sure that you have Node version 14 installed, since that's the latest Node version that Strapi supports. We're going to create a new Strapi app by running npx create-strappy-app@latest command, and we're going to name our application strapi-app, and we're going to use the --quickstart flag to initialize our application with an SQLite database, which is perfect for development.
Once this is complete, it's going to auto-run your application and it's going to open in a new window. Let's go ahead and create our admin user account that will allow you to get into your application. Once everything is said and done, click 'Let's start' and now you have an admin account and you should be looking at the Strapi dashboard.
Scaffolding the Plugin with the Strapi CLI
Switching back to our terminal, let's stop the server, and to scaffold our plugin we're going to use the Strapi CLI to generate the initial file structure. If you haven't used the CLI, you could go to the Strapi documentation and type CLI, click the developer resources on Command Line Interface, and you could read and learn more about it and what it does.
But in a nutshell, it's going to allow us to scaffold our plugin application. So let's run yarn strapi generate to see what options we have available. We have a couple of different things we could do. For this tutorial, we're only going to use this once to generate our initial plugin. So go ahead and select 'plugin' and click enter. Give it a name and it's going to create all these files in your folder, which we'll take a look in just a moment.
Enabling the New Plugin
The last step is we have to initialize our plugin by copying this and pasting it in our configuration/plugin.js folder.
Back in our code editor, let's go into our config folder and create a new file called plugins.js. Copy and paste the code from before and make sure you save the file. Restart our application, it's going to rebuild the UI and you should now see your changes on the left side in your menu. By clicking on the 'to do', you can see our basic page.
Exploring the Plugin File Structure
But before we move on, let's familiarize ourselves with the plugin file structure. In your code editor, you can go to sources, under plugins, that's where we have our to-do plugin. We have two main folders, admin and server, and we'll come back to those in just a second. We have our package.json to help us manage all additional packages that we install into our plugin. We have our strappy-admin.js and strappy-server.js files that export our admin and server folders. And then we have our index file, which has our register function, which allows you an opportunity to extend your code because this runs before your application is initialized. And then we have our bootstrap function, which gives you an opportunity to set up your data model, run jobs like cron jobs, or perform some special logic.
So looking at our admin and server folder, our admin folder is our front-end React mini application living within our plugin. So if you're familiar with React, you are going to be very familiar and feeling at home when working here. Our server is our API or the backend mini-app of our plugin, which allows us to have access to our content types, create our controllers, middleware, policies, routes, and services. In this tutorial, we're going to spend most of the time in the content types folder, controller, routes, and services.
And if you look at our plugin folder structure, this is basically a mini full-stack application within our Strapi application. And this is awesome because it allows you to extend the functionality of Strapi without changing its core functionality directly.
Where to Find Plugin Documentation
Now, whenever you want to learn more about what we're discussing here, the best place is to check out our plugin resource page, and I'll make sure to put a link in the description below. And to give you an example, we talked about our admin and server folders in our plugin. That's part of our plugin API reference. You could click on it and you could choose which option you want. I'm going to choose server as an example, and it'll take you to the page where it will show you more examples and more information on what we're covering. Now, because this is a guided tutorial, we're not going to cover everything in this tutorial. We're mostly going to focus on content types, routes, controllers, and services, but you do have this resource available for you to read up more and learn more on your own pace.
Recap and What's Next
Not to make these videos too long, I want to conclude this one here. So let's talk about what we achieved today. We set up our initial plugin, we learned about the Strapi CLI, we also took a look at our plugin folder structure, and more importantly, you now have resources that you could go to for help, especially when learning about plugin development.
In the next video, we're going to continue building out our plugin. We're going to focus on the front end, so we're going to discuss the Strapi Design System, why you should use it. We're going to take a look at the admin folder structure in more detail. And more importantly, we're going to start building out our UI and components for our to-do plugin application.
I really want to thank you all for joining me today. I hope you all had as much fun as I did. And if you haven't subscribed to the channel, go ahead and subscribe. There's a lot of great videos and tutorials coming up. You could also find us at strapi.io and get more information there. And if you want to follow me on Twitter, you can check me out at @coding30. My name is Paul, and I hope you all have a great rest of the day and time.
