Exposing routes with Ziggy: Build a Starter Kit With Inertia and Fortify

00:08

So we'll head over to our project. And I'm just going to go ahead and just generate out a controller in here for our dashboard. So let's just create our dashboard controller.

00:18

And of course, we'll head over to our routes and just register this out. So this is just going to be slash dashboard. Let's reference that dashboard controller.

00:28

And we're just going to call this dashboard. Now we've been naming these routes, but at the moment we can't access these on the client side because our client is not aware of our routes.

00:39

So let's implement our dashboard really quickly. And then we'll figure out how to do this. So we'll go ahead and return an inertial response here and we'll render out a dashboard page.

00:50

And let's head over to our pages section and just create this dashboard page out really quickly. We can pretty much steal the code from our homepage here since we're using the same layout.

01:01

And we'll just switch this over to say dashboard. And of course we'll change over our title as well. Okay, so this isn't linked up at the moment, but the way that we might do that

01:12

is head over to our navigation, head over to where we have our dashboard defined, and let's find our actual desktop one. We might do something like this.

01:23

And for the homepage, we might do something like this. So that's gonna work. It's not gonna refresh the page. It's going to link through with inertia.

01:31

But really good practice to get into is always referencing routes by name in case the URL changes. You don't wanna have to go through

01:40

all of your pages in your app and change over URLs. So that's where Ziggy comes in, which is used within the standard Laravel starter kits that you've probably already used.

01:52

So we're gonna go ahead and install this and just get it pulled in and see how it works. And we'll do this step-by-step. So basically this just allows you

01:59

to use your Laravel routes in JavaScript. So the first thing that we need to do is pull this in on the backend. So let's go and use Composer to require this in.

02:08

And then we need to go ahead and pull this in on the front end. So let's find the NPM install for this and let's pull this in as well.

02:19

And we should be good. Okay, so the first thing that we wanna do is expose somewhere in our app, all of our routes. Now we need to be really careful about this.

02:29

There is a way to limit what routes you're exposing. We're not gonna do that here because we don't really have any routes that we don't want exposed.

02:38

But over in our app file here, we can just use this routes directive. So let's actually define that properly. And what that's gonna do is just dump out

02:46

all of the routes in our app into a global window object. So let's go over to our app here and let's go ahead and just, let's view the page source.

02:55

So let's open this up and you can see here, we've got this constant defined up here, this global Ziggy constant. And you can see that this exposes

03:05

all of the routes of our application. Now, if you have any routes that you really don't want exposed and you wanna kind of hide them

03:12

and not have them accessible on your client side, you can control this with the Ziggy config. That's all in the documentation, but it's just a warning there if you need to.

03:21

But all of these now have the name of the route and you can see if we look for dashboard in here, we've got our dashboard route. This is the name.

03:30

We've got the URI for this and we've got the methods as well. So now what we can do is integrate this into our inertia app.

03:38

So we have a global function, which will allow us to do things like this. Let's head over to our navigation and see. So we wanna be able to do this route home

03:48

and reference that route by its name. And because we're using a function there, we want to bind this in. Now, at the moment, that's not gonna work

03:54

because we've not pulled in the plugin for this. So we're gonna get an error on the page, but let's go ahead and add this plugin in now and then see this map up.

04:02

So we're gonna go over to app.js where we created our inertia app and we're gonna add a new plugin into here. And we're gonna basically just pass in the Ziggy plugin.

04:12

Then we're gonna pass that global list of routes for that Ziggy plugin, so it can give us our route function, but also know where them routes are.

04:20

So the Ziggy plugin, if we just comment this out, comes from, it's not easy to import this if we pull in Ziggy view from, we need to go back into our vendor directory

04:33

into Titan Co Ziggy. And I think it's in the distribution folder and we've got the view file just here. So that is the plugin that we import.

04:43

Let's go and pull this into here. And then because we have that Ziggy global constant now, we can just pass that directly and we don't need to pull it in from anywhere.

04:55

So now that will have registered that route helper that we just saw in our navigation, but also passed in all of the routes for our application. So route knows where to map this up to.

05:05

So if we head up now, sure enough, we don't see any errors in the console. And when we click through to home, this works. So we can try this out for our dashboard as well.

05:14

Let's just swap this over to bind in this route with our dashboard. And there we go. So we now have named routes on our client side.

05:26

So we can reference them by name rather than reference them directly by their URL. And this is really helpful for Fortify as well, because as we saw earlier,

05:37

if we just go ahead and do a PHP artisan route list again, all of these are named. So we can just reference them by name rather than coming in here

05:45

and trying to figure out which URL we need to use. And because we're using Fortify, the URLs of this might change in later versions. We don't want to break anything.

05:55

Okay, so let's just change over some of the other routes that we have here, because remember, we've got our mobile navigation as well. So let's go ahead and just pull these down

06:04

and swap these over and we should be good. So let's switch the HRF here. Let's switch the HRF here to home and we don't have create an account yet,

06:17

but when we do, we know we're going to be able to reference them by name. Okay, so let's head over. We can access these nicely

06:24

and let's just again, pull up our responsive view and they are working as well. Great. So that is Ziggy installed,

06:34

our routes exposed and we can use our helper. We can also use this helper in our actual script part of our view as well. We'll look at how we do that later.

Sign up to access "Build a Starter Kit With Inertia and Fortify" right now.

Episodes

Transcript

Episode summary

Episode discussion