Welcome and video roadmap
Hey everyone, welcome back to Plug and Dev 101 Part 2. I hope you all are having an excellent day. If you haven't seen the first video, go ahead and watch that first. I'm going to link to it in the description below. This is where we're going to continue building our To‑Do plugin for Strapi v4, so let's jump right into it and see what we're going to cover in this video.
UI component overview for the To‑Do plugin
So first, let's do a quick UI overview to see which components we're going to build for our To‑Do plugin. Next, we're going to take a look at Strapi Design System, learn what it is and why you must use it when building a plugin for Strapi v4. After that, we're going to jump in and go in more detail of the admin folder in our plugin application to see where we're going to be writing and adding our components. Then we're going to slowly ease our way into making changes in our plugin by replacing an icon in our navigation and I'll show you how to find the icons in our Strapi Design System. And finally we're going to build our first component.
Let's do a quick overview to see which components we're going to build for our To‑Do plugin. Our plugin is going to have four main components. We're going to start with the empty state, where basically if there's no to‑do this is what the user is going to see first. They'll be able to click the button to add a new to‑do. When they click that button it's going to open up a modal window where you could add the name of your to‑do and save it. The final last two components are going to be our to‑do count component, which will display the count of all the to‑dos that we have, as well as our table which will not only allow you to add new to‑dos to the list but allow you to check the to‑do when it's done, edit the to‑do, or delete it.
What is the Strapi Design System and how to use it
We're going to now take a look at Strapi Design System and how it will allow us to build our UI components fast while maintaining UI consistency with the rest of our application. You can learn more about Strapi Design System by going to design system.strapi.io. Now if you're not familiar with what a design system is: a design system is a collection of prebuilt, reusable asset‑like components and patterns that allow you to build your UI fast while maintaining consistency with the rest of the application. You could take a look and read about the principles used, typography, grid system, and all the additional information when you like, but we're going to jump right in and take a look at the components.
When you click the link it's going to take you to Storybooks where you will be able to see all the pre‑made components that you have available to you. And what's awesome is because under the hood they used styled‑components, you could add additional styling by extending it with the use of styled‑components. Let's take a look at the example here. If you could see the search bar component here, you could take a look at the docs. It will tell you how to import it into your program as well as a couple of different options that are available. See the code for you to pull to use in your project, as well as what props you should be able to pass. And what's awesome: when you start a Strapi project all of this is already in there by default.
Exploring the plugin admin folder and key files
Before getting our hands dirty, let's take a look and review the folder structure of our plugin front‑end by checking out the admin folder. Once you open the project in your favorite code editor — which we all know is VS Code — let's take a look at the code. Open the src folder, let's go to plugins, and here we are in our To‑Do plugin folder. Today we're going to be spending most of our time in the admin folder because we're working on the front part of our application.
Here's our components folder. This is where we're going to place all of our React components as we make them. Here's the initializer index file, which basically sets up our plugin and that gets called in our index file in the register function, which we get to in just a second. Then we'll take a look at pages. We have our app page which sets up our initial routing, and if we wanted to add additional routes we could do so here. Then we have our home page which is basically where we're going to be writing all of our code today. We don't need many pages; we're just going to work in this one view. Then we have our translations where we could eventually add our translations which we're not going to talk about in this tutorial, and we have our util folder with helpful utility functions that we can use.
And now here we are in our index.js, which is the entry point of your application. Here we have our register function where we register our plugin in the navigation. We have our registerPlugin function that initializes the initializer component that we saw earlier, and then we have our bootstrap function that allows us to add additional functionality like sending another plugin or registering a hook that allows us to add additional custom functionality that we would like to run. But the best way to learn about this is not just me telling you but to use some of the resources that you have available. For plugin development the best place is our plugin resources. If you go to Plugin API reference guide, open that up and you will see that we are in our admin folder working with our admin API for our plugin. Click that and it's going to take you to the appropriate place in the documentation where you could learn about everything we were just talking about. You could learn more about the register function, the bootstrap function, and so on. So make sure that you know that documentation is your friend and this is a great place to get additional resources when following tutorials such as this one.
Replacing the navigation icon and using admin watch mode
Now that you're familiar with the basics of plugin development or at least the folder structure, let's jump in and start building our plugin. You're going to start nice and simple and replace our icon in our navigation. Make sure that you have your application running. If you take a look here on our To‑Do menu item we have a puzzle icon. So let me first show you where to find icons and then I'll show you where to replace this in code.
When building your plugin for Strapi v4 we must use Strapi Design System for our UI. You could learn more about it, but if we go to Iconography we could see all the different icons that we have available to us. If we click Components it's going to take us to the link which will take us to Storybooks. Now it's not really apparent where to find the icon exactly, but I'll show you where. You're going to theme icons and now you have a list of icons that you could choose from. So let me close that window, and we're going to use this brush icon. When you click on it it's going to copy the import, so let's go back into the code and I'll show you where to implement it.
Now that we are in our code we're going to go to src, our plugins, to our admin folder. That's where all of the front‑end magic will happen. We're going to select components because we have this plugin icon. We're going to click it, go into the index file. Now I'm going to replace the puzzle import with our brush import. Delete this and we're going to replace this with our brush item. Now when we go back to our application and we refresh the screen our icon doesn't change. Whenever you're working on the front‑end portion of your Strapi application or plugin, whenever you run yarn develop that does not rebuild the UI and that is required for you to see the changes that you make.
So first what we're going to do: I'm going to show you a command that you should use instead. So let's stop our server and instead of using yarn develop we are actually going to add a flag called --watch-admin. This will allow you to run your application in watch mode in localhost port 8000 which will rebuild your application every time you make changes. So let's take a look. I'm going to log in first and if you take a look, look at our To‑Do item: it is now our brush that we used. And now whenever I make any changes to our components we could see them change in real time rather than having to restart the application, running yarn build and then yarn develop.
Assembling the layout with Design System components and closing notes
So let's take a look. Here I am back in my code editor. Let's go back to our plugin page, in our home page in the index file. We're now going to say "Happy Strapi" and see the changes. And now as you could see, without having to reload, we could see our changes.
So now let's go ahead and build our first component. And when I say build, I really mean using the power of Strapi Design System as building blocks like Lego pieces to put our components together. So let's take a look first what we're going to do. For brevity of the tutorial I'm just going to paste the code here and explain to you what we're doing. What we're doing here is we're getting a Layout component from Strapi Design System. We're setting a BaseHeader which takes three props: title, subtitle, and how we want to render this component. And then we have our ContentLayout component wrapper where we could put the rest of our content. And where did I find this code? This is where I found all the components that I used. You could click on Layout and I know this looks busy but you can go into Docs. It shows you where to import the component from and it will show you the code examples that they used.
So I used the Layout component from here. We also had a ContentLayout component that I'm using to wrap our content so all of them are here. And if this looks too busy for you one tip for you guys is you could literally click View Source and check out all the components. We actually used the Base component from HeaderLayout, so if I click HeaderLayout here and scroll down you guys will see there's going to be a BaseHeader that's being exported and you could do that as well. And sometimes for some of these base components you might not find them in the search here. I know for HeaderLayout it is here, so HeaderLayout and we have our Base component example here. If I look at the show code here they show an example of how to use it. So just in case if you feel like you can't find something, don't be shy looking at the source code.
Now you could see that all of our components come from Strapi Design System. So when we go back to our application and you see something like this, I'm importing those components from Strapi Design System and I'm using them in my code. Instead of writing the code from scratch you really want to rely on using Strapi Design System. Since this code is running let's take a look what it looks like for us and bam, we have a nicer view. The best part is that most of these components are already prebuilt for us, so instead of focusing on trying to recreate the wheel from scratch we rely on Strapi Design System not only to make our developer experience better but also keep consistency in our application.
Oh my gosh, there was a long video, but we made it. Congratulations to you. I know that's a lot but I wanted to make sure that we covered the most important basics even though they might seem too basic. I want you guys to know where to find all the resources that will help you to be able to continue learning about developing Strapi plugins all on your own. So what did we achieve today? We took a look at Strapi Design System and why you must use it. We took a deeper dive into your admin folder and learned about the best place to find all the resources for any of our additional questions that we have. We also built out our first component. But if you are really, really stuck we do have our Discord community and our forum where you could talk to real people. In the next video we're going to continue building out the front‑end layout, we're going to finish it, we're going to finish all the basic logic so we could finally dive into building the back end of our plugin. I'm excited to see in the next video. With that being said I just want to say thank you so much for joining me. I really appreciate your time and I hope that you're finding value in these videos. Again, this is really targeted to beginners just starting out with plugin development, so I'm trying to cover all the resources that you have available for you to succeed. You could always find me on Twitter at coding30. More importantly subscribe to this YouTube channel because we're releasing videos more frequently now and you'll be able to keep learning cool things about Strapi and development in general. With that being said, I'll see you in the next video.
