Laravel Subscriptions
This episode is for members only

Sign up to access "Laravel Subscriptions" right now.

Get started
Already a member? Sign in to continue
Playing
03. Adjusting Laravel Breeze

Episodes

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

Transcript

00:00
Let's slightly adjust Laravel Breeze so it feels a little bit more like an app. Now, at the moment, we have two main layouts to a Breeze app. We have an authenticated layout, which is what you can see here.
00:11
We have an unauthenticated layout, which is the things like the register and the login page. Ideally, what we want to do is create a sort of homepage that looks a little bit like the dashboard with some login and register links at the top here. We can't do that by default.
00:25
So let's go ahead and tweak things around to get things how we want. OK, so the first thing I'm going to do is head over to the web routes and the route that we've got here returns this welcome view directly. I'm going to switch this up to use a controller.
00:39
So let's go ahead and make a controller on the command line. So we're going to create out a home controller and switch this up. We can keep the same view in here. It doesn't really matter.
00:48
Or we can just rename it. So let's swap out this closure for a home controller, which we've just created. And we can go ahead and give that a name as well of home just in case we need to reference it later. We open up our home controller now inside of here.
01:03
We can just make this an invocable controller by using the invoke magic method. And we can go ahead and return and do exactly the same thing. But let's create out a view called home. OK, so we can go ahead and create that on the command line.
01:15
Let's go ahead and say make view. And let's just create a home view. OK, now that we've done that, we're going to go and find the dashboard page. So let's just open up the dashboard.blade.php page, which we've already seen.
01:28
And we're going to take this entire thing. And we're going to move it over to the home page that we've just created. So now, technically, when we access this home route, we should just see that we're on the home page. Let's go ahead and just switch out some of the text on here.
01:42
And let's check this out in the browser. OK, so if we go over to the home page, you can see, sure enough now, we're on the home page. Now, the issue here is that we are currently signed in. Let's go ahead and log out here.
01:54
And you'll see that when we do try and access the home page now, we get an attempt to read a property name on null. That's because we are technically using the authenticated layout and attempting to do that for the home page. So what we're going to do is head over to the navigation partial. So let's open up under resources, views, and layouts.
02:14
And let's look for anywhere that we are trying to access the user's name or any of their credentials. So the first place is just here in this settings dropdown. Now, if we are not signed in, we don't need to show a settings dropdown. So we're going to take this entire block, and we're going to wrap it with the auth helper within Blade.
02:35
And we end that out with end auth. So if we pull that in, that now won't be shown unless we are authenticated. Let's go ahead and look for anywhere else that we're using the user's name. And we've got the responsive settings option, which is shown on a smaller viewport.
02:49
We can do exactly the same thing here as well. So let's go ahead and wrap that in auth, and we'll say end auth here as well. Let's pull this in, and let's head back over and see if that fixes it. And sure enough, it does.
03:01
So now we're just missing the ability to click to log in and register. We can do that very easily. So we could take the link for the dashboard. Let's just find that just down here under the navigation link section.
03:13
And we can pretty much just take all of this code here and put this over the other side. So let's actually go ahead and just take the navigation link here. And for the settings dropdown, let's just change this up very slightly. I'm not going to do this for the responsive version.
03:29
I'm just going to hide it completely. But of course, you can change that up as well. So let's open this block back up, and we've got this dropdown just here. Let's make that auth only.
03:39
So let's change that over and do this inside of here instead. Now that we've done that, we can also use a guest helper in Blade. So let's say end guest, and these are called directives. And we can put just any code in there that we want.
03:53
So if the user is a guest, and let's just re-indent this really quickly, then we're going to show a login and register link. And let's just change the text over for now. OK, if we head over and give that a refresh, there we go.
04:05
So we now have a login link directly inside of here. It doesn't look great at the moment, so we can fiddle around with the way that this works. So let's go ahead and just wrap this out.
04:15
So I'm going to create a container around here, and this will match up the height to the height of the navigation. So in here, we could say flex justify between using Tailwind and set a height of 16.
04:27
And that should just about fix that up. So it basically looks like the other options we have here as well. OK, so we can do the same thing here. So let's duplicate this down for register.
04:38
So I'm going to call this create an account, and I'm going to call this sign in. And we'll just redirect these over to the pages we already have. So that's the login route, and we want to highlight this
04:49
when we are on the login route. And we will do the same thing here for register, and we want to highlight this when we're on the register route. OK, so now, even if we're not signed in, we can hit create an account, register,
05:00
or we can go ahead and sign in. Let's go ahead and just add, finally, a bit of spacing between these. So let's set a space x of, say, 6, and just check that out. And at the moment, we're not running npm run dev,
05:11
so any of these styles are not quite going to work. It's another thing we should have done earlier. Let's go ahead and run npm run dev to start to compile all of our assets. OK, let's go over, give that a refresh, and there we go.
05:23
I think that will do for now. We could probably get away with reducing that slightly, but now we have a nice template that we can work with. OK, so the last thing I want to do is create another link up here
05:33
to go through to the home page. When we click on this link here, this also goes through to the dashboard. Doesn't kind of make sense for the kind of app we're building. So let's look for any references to dashboard,
05:45
and we won't do this in the responsive navigation, but I'll let you do that if you want to. So let's go ahead and look for our navigation links here. We're going to create another one out here for the home page,
05:55
so let's redirect to the home page here. Remember, we named that, and we'll write home, and then we'll do the same for the logo as well. We will go back to the home page if we click on the logo.
06:07
OK, so now when I click on home or the logo that goes to home, we can access the dashboard if we're authenticated. We also have the ability to sign in and create an account directly up here as well. So let's go ahead and sign back in, make sure everything looks good,
06:22
and then we have a nice solid base to work with. OK, great, so we're signed in, everything looks good here. We can still go back to the home page when we're signed in, and that is a much nicer structure for the kind of app that we're about to build.

Episode summary

In this episode, we take a fresh Laravel Breeze setup and start tweaking it to feel more like a real app, rather than just the default starter. Out of the box, Breeze gives us two layouts—one for authenticated users (like the dashboard) and another for unauthenticated users (like login and register pages).

We begin by replacing the default welcome page route with a controller action, setting up a new home controller to handle the homepage. Next, we copy over the dashboard layout to serve as the new homepage view, giving it a more "app"-like feel with navigation links up top.

From there, we encounter an issue: when logged out, the app tries to access user info that's not available (because we're not logged in)—so we use Blade's auth and guest directives to conditionally show or hide navigation elements based on the user's authentication state. This means only logged-in users see the settings drop-down, while guests get links to log in or register.

We also spruce up the navigation, adding links for signing in and creating an account, and clean up the layout with some quick Tailwind tweaks. Plus, we update the main navigation and logo to correctly route users to the right pages depending on their state.

By the end, we have a much more polished, user-friendly starting point that makes it easy to continue building out our app—whether the user is signed in or not!

Episode discussion

No comments, yet. Be the first!