Build a URL Shortener with Volt and Folio
This episode is for members only

Sign up to access "Build a URL Shortener with Volt and Folio" right now.

Get started
Already a member? Sign in to continue
Playing
07. The redirection flow

Episodes

0%
Your progress
  • Total: 53m
  • Played: 0m
  • Remaining: 53m
Join or sign in to track your progress

Transcript

00:00
Okay, so we're gonna cover the entire redirection flow now
00:02
when we hit one of these URLs with the hash ID at the end. So let's go ahead and grab one from the database. We'll just grab this first one, GY for Google. And effectively this, when we land on it,
00:15
needs to obviously grab this record out of the database, redirect the user to the correct URL, log a visit, but we also need to be able to grab this URL and show it in the initial form that we have just here.
00:30
So let's stay on this page and let's build this out with Folio. So we've got our pages here. We've looked at a relatively simple one so far,
00:38
which is just index.blade.php, very, very simple. But how do we come up with something a little bit more complex? How do we grab one of these root parameters
00:49
and use this inside of here? Well, let's just think about how we would do this in our roots first of all. So if I were building out a root that responded to this,
00:57
I would have a get root in here with forward slash, and then in here, I would take in the URL with root model binding. Now with that, I could choose what I wanted
01:08
to actually represent in terms of the property, and we know that's the hash ID. And then obviously I would build out a controller or pass this over to a live wire component.
01:17
Now that's not what we're doing. We're using Folio here. So there's a slightly different approach to this, and that is just the way that we name the page here.
01:25
So to do this, we go ahead and within square brackets use .blade.php, and in here we give the model name. So in this case, it's URL.
01:34
And then we just do the same thing. We have a colon, and then we have the name of the database column that we want to pull this out by.
01:42
So there we go. That's pretty much it. Now inside of here, let's go ahead and set up our PHP tags,
01:48
and we'll go ahead and just create out a div in here and just say, you should be redirected. Obviously the user might not be redirected at this point. So that would just show if we're not,
02:02
and we'll go ahead and add in our vault and end vault in there. Okay, so let's head over to that page and give it a refresh,
02:09
and we see you should be redirected. Now the question is, how do we access that URL by this hash ID within vault? Well, that's where our state comes back in.
02:19
So we're gonna go ahead and just, we'll just copy this over from one of our other pages just to make things a little bit easier, and we just need state in this case.
02:30
So we're gonna go ahead and say state, and in here we want to store a URL, but we are using root model binding. So for this, we use a closure,
02:41
and then we access URL, which will be already given to us. So let's go ahead and just dump this out on the page. So we'll just say URL and URL,
02:51
and let's come over and give that a refresh, and there we go. So that is the process of root model binding within vault. We define our state,
02:59
we have a closure in here, and the thing that comes back from root model binding will be available to us here, which we now store in our state,
03:08
and we can access anything we need. Now we don't want to show anything on the page about this URL. What we want to do instead is redirect the user.
03:19
Now let's just try this out in here. We know how to redirect in Laravel, we just use the redirect helper, and we pass in the URL that we want to redirect to.
03:28
So let's try this out and see what happens. We're also gonna set a 301 status. So I'm gonna give this a refresh, and you can see we get a temp-to-reproperty URL on string.
03:38
So what is happening here? Well, at this point, we haven't mounted this component, so we don't actually have access to this state except within our templates.
03:47
So what we can actually do is within Vault, we can go ahead and use mount, much like we would do in a standard Livewire component. So we're gonna go ahead and say mount,
03:58
we have a closure inside of here, and then into this, we can access the URL. So let's go ahead and put our redirect back in here, and make sure we put in the URL model,
04:13
and let's head over, and there we go. Didn't even need to refresh because Vi has refreshed this for me. We have been redirected, great.
04:20
Okay, so in here, we can also log one of them visits. So we have access to that URL, so we can go ahead and increment the visits counter. Let's go over and just try that again with this one.
04:34
Pop that on the end here, and let's go over to the database. There we go, great. So really, really easy to do with Eloquent.
04:41
Okay, so now that we've done this, we need to figure out how to get the URL in the first place because when we're on our form here, at the moment, we are just outputting the ID.
04:54
We need the full URL to this with this on the end. Now, that's pretty easy. We could just concatenate this on, but we kinda wanna do this by just building up a route
05:04
like we normally would within Laravel by its name. Now, the key thing here is by its name. We don't have any named routes here unless we specify these with folio.
05:15
So let's go over to our URL model. I'm gonna create a helper function on or a helper method on here called redirect URL, and that's gonna return a route for us by name,
05:30
and we're maybe gonna call that redirect. We don't have a name for our route at the moment, and then the URL that we want to pass into this to be put into route model binding
05:39
is just gonna be this model. So normally this would work if we were building up our routes normally and naming them, and if you're not sure about that,
05:47
that would be something like this. So we would normally give this a name. We can't do that because we're using folio. So this isn't gonna work if we try and reference this.
06:00
If we just go over to our index here and replace out the value of the URL with this method call, and we try and do this, and hit this,
06:14
we obviously get route redirect was not defined, so we don't have a route called redirect. Now within folio, if we come over to our redirect template here,
06:25
we can actually specify the name inside of here. So we're gonna go up to the top here. This isn't actually part of Vault, so we're gonna go ahead and pull this in
06:33
from laravel folio and name. So this is a name function, which we can then call and give the name for. That's as easy as it is.
06:43
So we can name our routes directly within the folio template that we're working with or the folio file that we're working with. So now when we come over and we enter a URL,
06:55
there we go. So we've got the URL built up based on the name. The hash ID has been injected into this, and of course we can take this,
07:04
go over to it, and we're redirected as we would expect. Now, just before we finish up, an interesting part about what we've done here
07:11
is when we use this state originally, we use that to demonstrate outputting this in the template, which of course should never be seen unless this redirect fails for some reason.
07:21
But we don't actually need this state now because we are grabbing the URL directly from the mount function. If you wanted to show the URL in the template
07:31
for any reason, so the user could click on this to be redirected, then of course you could leave this in. But in our case,
07:37
we can actually get rid of this because this URL comes in from root model binding. So if you wanted to leave that in there, fine, I'll go ahead and comment out,
07:45
but we'll just about do with this for now. So you can see here that when we, let's just grab one from the database and we go over to redirect over to here,
07:55
you can see it still works. So just a little bit of information there. You don't need this state unless you're referencing this directly in your templates.
08:03
So there we go. This is the complete redirect flow done. Let's go over and just add some enhancements to this just to make it a little bit nicer.

Episode summary

In this episode, we dive into building out the entire redirect flow for our URL shortener app. We kick things off by grabbing a shortened URL from the database and discussing what needs to happen when a user lands on it — namely: find the record, log the visit, and redirect to the final destination. Plus, we'll make sure that the original URL can be shown in our form when needed.

We get hands-on with Laravel Folio, showing how to create dynamic route pages simply by naming your .blade.php files appropriately (using square brackets with the model/column you want to bind by). We explore how route model binding works in Folio and how to access the bound URL inside our template, storing it in state if needed.

Next, we wire up the redirect logic itself. You'll see how we use Folio's mount function to handle the redirect and logging as soon as the component is loaded—no unnecessary output shown to the user. We handle the actual redirect with a 301 status, and increment the visits counter every time a redirect happens.

After that, we improve our form to output the full redirect URL by building it the Laravel way: using named routes. Since Folio doesn't create named routes by default, we show how to easily name your Folio routes using the name() helper.

Finally, we tidy up by demonstrating which pieces of state are necessary, and which can be removed to keep things clean. By the end of this episode, you'll have a fully functioning redirect route, with route model binding, visit logging, user redirection, and nicely named routes for building links in your app.

Episode discussion

No comments, yet. Be the first!