Intro to Nova Tools 0:00Let's take a look at one of the various ways on how you can extend Laravel Nova. So with all the resources and metrics and custom actions, we already have the abilities to create a very unique admin dashboard. But the real powerful tools that allow Nova to become unique for your specific use case is with such additions like custom tools, custom cards, custom fields, or custom themes. So we will start by looking at custom tools. And tools are basically navigation entries that live inside your Laravel Nova toolbar that redirect to a completely new page that you can then customize and interact with. To get started with a custom tool, there is a Nova CLI tool that we can use. So it's phpArtisan nova-tool. Generate Tool via CLI 0:52To get started with a custom tool, there is a Nova CLI tool that we can use. So it's phpArtisan nova-tool. And unlike the other commands that expect just a class name, this is really made to be able to share the tools with others. So it expects a format that is being used by Composer. So you should supply a vendor name. So I'm using beyond code and then slash and a package name or in this case, the tool name. So the tool that I want to build with you would be a very simple one that allows us to cache the views inside of our application. So we will just call it view cache.to cache the views inside of our application. So we will just call it view cache. Now as I said, tools in Nova give you a blank page that you can then work on. So the CLI tool asks you if you want to install the tools NPM dependencies and yeah, we want to do this. Next the CLI tool asks us if we want to compile the tools assets. So let's do this so that we can see what the initial output looks like. And last but not least, we also want to update the Composer packages for this specific tool. All right, now our custom tool is set up and as you can see, it is already being discovered by Laravel.All right, now our custom tool is set up and as you can see, it is already being discovered by Laravel. So let's take a look at what Nova generated for us. So if we go to Sublime, there is now a folder called Nova components and this folder holds all the custom tools, custom cards and fields that you can create to extend your Nova installation. So this is our view cache tool that we created and it basically is a standalone PHP package that ships with its own Composer JSON file. It has its own package JSON file and it comes with its own service provider, its own routes, it has its own resources and basically all the files that we need in order to customize this tool. Register Tool in Nova 3:09it has its own resources and basically all the files that we need in order to customize this tool. But before we dive into the code of this, let's add this tool to Nova so that we can see what it looks like out of the box. So we can register these tools by adding them to the Nova service provider, which is in the app providers directory. And in there, there is this tools method. And here we can just register the tools that we want to be available. So in our case, it will be new view cache and let's import the class. So now if I go back to Nova and refresh, I have here on my sidebar a new entry which Explore Generated Structure 3:43So in our case, it will be new view cache and let's import the class. So now if I go back to Nova and refresh, I have here on my sidebar a new entry which is called view cache. And if I click on it, I just see this blank state that points me to the file that I can edit to modify this website. So let's take a look at the code again and break it into different pieces. So if we open our Nova components view cache directory, we can see that we have a tool service provider. And this is basically the entry point for Laravel, which loads our custom tool. So whenever the service provider is being booted, we tell Laravel to load views fromAnd this is basically the entry point for Laravel, which loads our custom tool. So whenever the service provider is being booted, we tell Laravel to load views from our resources views directory, and it has the view cache namespace. When the application is booted, we also load some routes. And then we have this Nova serving event where we can modify and alter the behavior of Nova at the time it is being loaded. The routes is also pretty simple. When the routes are cached, we return nothing. And other than that, we have a routes API PHP file that gets loaded. It has the prefix Nova vendor slash view cache, and it has the Nova middleware andAnd other than that, we have a routes API PHP file that gets loaded. It has the prefix Nova vendor slash view cache, and it has the Nova middleware and an authorized middleware. Okay. And register is empty. So we could use it just like any other Laravel package to register our own application services. So let's take a look at the JavaScript file. So if we go to resources, JS components, tool dot view, then this is the file that we see when we look at the custom tools page. Here you see you can edit this tools component ad.when we look at the custom tools page. Here you see you can edit this tools component ad. And this is basically what we have in here. So this will hold all our logic that we want to display to our users. Next we have a tool dot JS file. So this adds a new route to the Vue router, telling it that we want to load our view cache component. Next we have some SAS file that we can use for a custom CSS. And we have a navigation view that we can use to modify the icon and the text of our sidebar.And we have a navigation view that we can use to modify the icon and the text of our sidebar. So if I view cache as two different words, go again and refresh, then this is the new navigation. Okay. What else do we have here? We have the routes, the API dot PHP file, which is right now just a blank API dot PHP routes definition file. Here we can add routes that our custom tool might want to make use of. We have the Vue cache PHP file, which is essentially the tool.Here we can add routes that our custom tool might want to make use of. We have the Vue cache PHP file, which is essentially the tool. And this does a few things. So this is the tool that is being registered in the Nova service provider. And in the boot method, we tell Nova that we load a custom JavaScript called Vue cache. And the file that we want to load is in the dist folder, the JS tool dot JS. And we load a custom CSS file, which is also being used from the dist CSS tool dot CSS file. So this way, Nova knows which additional JavaScript or CSS files it needs to load when your tool is being added to the service provider.So this way, Nova knows which additional JavaScript or CSS files it needs to load when your tool is being added to the service provider. And here we have the render navigation function, which you could modify to return something else for the navigation template. Okay. What else do we have? We have an HTTP folder, which has a middleware. And this is the authorized middleware that is being used for our custom tool. This basically just does the standard Nova authorization features. And if the user is not authorized to view our custom tool, it returns a 403. Set Up Asset Watching 8:15This basically just does the standard Nova authorization features. And if the user is not authorized to view our custom tool, it returns a 403. But if you want to modify this, this would be the place. All right, so let's get started with our custom tool. In order to modify the JavaScript files and to actually see the changes in our browser, we need to use Laravel Mix. So as you can see, in our custom tool, we also have a webpack.mix.js file, which basically just tells Laravel Mix to use this JavaScript file and use this Sass file. So let's go into our Nova components directory, into the view cache. And in here, I'm just going to say npm run watch.So let's go into our Nova components directory, into the view cache. And in here, I'm just going to say npm run watch. And this basically just allows me to modify my Vue file. And then the JavaScript file gets combined. And I can see the changes in the browser. Okay, so to get started, we have this card with the style with the min-height. That's all good. Let's get rid of the SVG here. We have the heading. Let's change the title to Vue cache.We have the heading. Let's change the title to Vue cache. And the title would be enable your application Vue cache. And then we would have, instead of a p tag, we would have a button. So maybe a button with a class, btn, btn-primary. And we'd say something like enable cache. All right, now let's see, checking here, okay, this still runs. That's good. If we go back to Chrome and refresh, we now see that we have modified our custom tool. So now here we have this button class.If we go back to Chrome and refresh, we now see that we have modified our custom tool. So now here we have this button class. We have a dark card. So let's add the actual logic to it. So I want a more of a light background. So let's get rid of this. How does it look? Okay, now this should be text black. Okay, that's better. Okay, let's go and steal the correct button class, maybe from this button here.Okay, that's better. Okay, let's go and steal the correct button class, maybe from this button here. So what do we have here? btn-default. All right, that's missing. So let's add this. Refresh, okay, that looks much better. Now what I want to do is I want to click on this button, then perform maybe a POST request to one of our API routes. And then within this route, I want to enable the view cache for our application. Wire API Route and Action 11:29to one of our API routes. And then within this route, I want to enable the view cache for our application. So to add a route, as we have this routes API.php file, all we need to do is define our route in here. So let's just say route POST slash, I don't want a specific endpoint. And we got the request and have our route. So in here, I am just going to say, artisan view cache, and it's cache view, right? And then just return success true. So that's for this example, all we need to do. Now to perform this POST request from our tool, let's add a click method on our button.So that's for this example, all we need to do. Now to perform this POST request from our tool, let's add a click method on our button. So we will say add click, activate cache. And in our script, we define methods. And one method would be activate cache. And in here, we want to make this POST request. So Nova has a global object that is being exposed, which is called Nova. So we can use this to make HTTP requests. So all we need to do now is Nova.request.POST, then give it the route where we want to post the information to.So all we need to do now is Nova.request.POST, then give it the route where we want to post the information to. So this would be Nova window view cache. So this route is the one that we see in the service provider. Here's the prefix. So this is the prefix for the route. And then in our API.php file, since I just use a slash, I don't need to append anything else to it. So we just post to Nova vendor slash view cache. And this returns a promise.So we just post to Nova vendor slash view cache. And this returns a promise. So we can do something like then, and then just alert success. Real simple just to show you how a custom tool works. All right. So if we refresh, okay, that's right, because I was doing this wrong. So in here, this is not Artisan, but instead it's using the Artisan facade, and then it has a call method. So this would be the way to call our custom cache view Artisan command. But as you can see, Nova is smart enough to tell you the actual error that happened.So this would be the way to call our custom cache view Artisan command. But as you can see, Nova is smart enough to tell you the actual error that happened. And it's view cache. So if we try this again, we now get the alert that this was successful. Now of course, this is just a basic example of what you could do with a custom tool. But it gives you the basic idea. So with a Nova package, you have all the flexibility that you get from a regular Laravel package, combined with a custom view component that you can modify in any way you want.
