What's new in Strapi v4: Plugin API

a big investment we made in v4 was the ability to let developers extend existing strappy applications with the use of the new plugin api unlike the v3 plugin api which was built on top of file structures we decided to take a more programmatic approach and centralize almost all plugin activity to two files strappy server and stripyadmin.js so let's get into our terminal we'll stop our strappy server and we use the new interactive terminal with yarn strappy generate to create a new strappy plugin we get the option to customize our strappy app in a couple of ways so we'll select plugin to create and generate a plugin we'll name our plugin hello v4 and that will generate the relevant files for us in the cli we get asked to create a new file called plugin.js and paste the following in it so what we'll do is we'll open vs code but before that we'll just copy that and then get into vs code in config we don't have the plugins.js file so create that plugins dot js and paste in the snippet that we copied from the client we'll save this and this registers our plugin into our stripy application now a few files were created when we generated our plugin so we'll go into source plugins and we'll have our v4 folder and these are the two files that i was talking about strappyadmin.js and strappyserver.js what we'll do now is go into server.js and open our bootstrap file so that we add a console log to see if our plugin is working console.log hello from oops hello from v4 hello from v4 and we'll save that so next time we start up our stripy server it should say hello from v4 so let's try that out best practice by the way is to start your strappy server in watch mode so that all changes made reflect almost immediately so yarn develop and we use the watch ad pin flag to start in watch mode and there we see it hello from v4 and our server starts in watch mode so our plugin has been registered we'll be asked to enter our credentials and we can log in now we can see here that our hello v4 app is registered in the admin if it's not you can use yarn build to rebuild the admin plugin so that your plugin shows up here in the plugins section we can see it's registered in the list of plugins and we have happy coding showing up what we can do is go back to vs code so we can actually customize what this page says so in our plugins folder in our v4 folder we go to admin we go to pages we go to home page and we have admin so here it says plugins and home page we can change happy coding to hello from v4 and that should change to reflect our edit and this is where the design system really shines if you go into your vs code you can add components from the strappy design system to keep your app aesthetically the same and uniform with the rest of your strappy application and this way you can extend your strappy application while keeping a very pleasant experience for the people using the strappy admin and that's it with building and getting started with strappy v4 plugins api

Channel: Strapi

Views: 1,869

Keywords: Strapi, headless CMS, gatsby, gatsbyjs, react, strapi blog, gatsby blog, headless, content management, node.js, react cms, blog tool

Id: -51iT5-eO9c

Length: 4min 5sec (245 seconds)

Published: Fri Dec 03 2021