This episode is for members only
Sign up to access "Build An Uptime Monitor with Inertia" right now.
Get started
Already a member? Sign in to continue
Playing
02. A fresh Inertia project
Episodes
01. Introduction
02. Sites
03. Endpoints
09. Setting up endpoints
4m 23s
0%
10. Enum endpoint frequencies
3m 50s
0%
11. Creating the endpoint form
12m 58s
0%
12. Storing an endpoint
7m 21s
0%
13. Validating and authorizing endpoint stores
7m 6s
0%
14. Normalizing the endpoint location
6m 4s
0%
15. Displaying endpoints
6m 22s
0%
16. Deleting endpoints
6m 21s
0%
17. Toggling inline editing for endpoints
5m 12s
0%
18. Applying a watcher to the endpoint form
5m 31s
0%
19. Storing endpoint edits
8m 56s
0%
04. Checking endpoints
20. Determining endpoints to check
2m 57s
0%
21. Creating a job to perform a check
3m 21s
0%
22. Making an HTTP request
3m 39s
0%
23. Scheduling checks every second
4m 27s
0%
24. Setting up the check relationship
3m 14s
0%
25. Updating the job
2m 10s
0%
26. Showing the last status
12m 50s
0%
27. Expanded list of checks
14m 10s
0%
28. The response body modal
2m 49s
0%
29. Authorizing the endpoint details
2m 27s
0%
30. Calculating uptime for endpoints
8m 29s
0%
06. Email notifications
07. Downtime notifications
Transcript
00:00
Okay so we're starting out with a completely fresh Laravel app here. I've already gone ahead and created the database here with the same name as the project although of course you can configure that and what we're going to do now is go ahead and set up a starter kit within Laravel. We're going to choose Laravel Breeze with this just because it's a lot simpler than Jetstream and
00:20
it comes with a view template which uses inertia so we can set that really easily, have inertia running and we can start to build straight away. So the first thing we want to do is install Laravel Breeze so we get some authentication. So let's head up in the documentation and grab the composer require command. So I'm going to go ahead and just
00:39
pop that in there. Once that's downloaded we can go ahead and install Breeze but we want to make sure we use the view preset. So let's head over paste this in with view and that's going to go ahead and pull all of that in for us and once we're done we can start to migrate our database. So if we head over here we can run phpr to migrate npm install and npm run dev and we are ready to go.
01:04
So let's head over to our env file first and let's set up our database. So I'm going to choose Postgres here, it doesn't matter what database software we use. The database name is the same and I'm just going to switch over the username and we are pretty much done. So once that's finished we're going to go ahead and run php artisan migrate to migrate everything. If we head over
01:26
to the database you can see that's created the users table. Pretty standard stuff when you are first installing a Laravel app. Then we're going to run npm install and npm run dev. You can do these as two separate commands if you want to. So we'll wait for that to finish and there we go. We now have a Laravel app up and running at InertiaUptimeMonitor.test or localhost 5173.
01:51
So we're going to go ahead and open this up, give this a refresh and we now have the ability to register and this is now an Inertia app. We'll dive into that in a little bit more detail if you're new to Inertia and you're not sure how it works. But the first thing we're going to do is go ahead and register an account so we can head over to our dashboard. So let's register an
02:11
account here and we're now over in our dashboard. Brilliant. So let's take a really quick look around the difference between a standard Laravel app when we use Breeze with blade templates and see how this compares with Inertia templates. We'll just sort of dive into this if you're new. So the first thing I like to do is just start over in the roots file just so we can get an
02:33
idea of what's happening here. So if we come down to our web root for our dashboard you can see this is using Inertia to render a dashboard template. It also includes the middleware and the name here much like you'd get even if you weren't using Inertia. So what is actually happening here? Well this is actually referencing a view file. We're not using blade templates here,
02:55
we're using view files. So I'm going to go ahead and just have a look inside of the resources here under JS and you can see that we've got a few things here. We've got a layout section which we'll take a look at soon but we've got this pages section as well. So we have register, we have login, all of these are view templates. When we went and registered an account over in here
03:16
that was also an Inertia template or a view template rendered by Inertia. So if we go over to dashboard and have a look here which is what we're viewing just over here in the browser, this is of course a lot different to your standard blade file. So for example we've got a script section here because of course we're working in view. We're importing the head component from
03:38
Inertia which allows us to show the title just up here so we can adjust that if we want to. And we're also importing this authenticated layout so rather than using a standard blade layout what we're using is this layout here which gives us the entire section here with the navigation menu, this slot here for our dashboard title or any other title we're using. So it pretty much
04:02
looks exactly like the blade templates that you're used to except it's within Vue.js. So let's head back over to the dashboard and take a look here. So we've got this authenticated layout which is putting all of this information inside of this layout. We've got a slot here called header which is placing this h2 inside of this section just here. So if we head back over to that authenticated
04:25
layout and let's take a look here. So let's search for header and you can see we've got this slot here called header. So that's just slotting that content directly into here and then we've got the rest of the page content in here which is very simple. It's just a very basic container with the text you're logged in. So that's how it's working. Now we're going to dive more into how
04:47
this works as we go on the course. If you've already worked with Inertia this is going to be very simple to you but also note that this isn't within a controller. For the rest of the course we're going to be using controllers and we're actually going to move the dashboard over to a controller as well and it's going to work in exactly the same way. Now one thing to
05:04
note is what we're running at the moment is Vite. So if we go over to our dashboard and we make a change. So let's say you're logged in and get rid of the exclamation mark. When I save this we're going to get an instant reload of this page. So because this is javascript it can instantly reload and show you the changes directly within the browser. So if you're editing away and this
05:26
changes instantly that is what is happening when we're running this with Vite. So that's just a look around the difference between a standard Laravel install with Breeze using blade templates and the difference with Inertia as well. We're not going to dive too much into the kind of behind the scenes of Inertia. We're just going to start building with it so you can get the hang of the
05:48
higher level and then later on you can dive in to the details if you need to. Okay so that is everything set up with a little bit of a look into how this works with Inertia. Let's go over to the next section and start building and we're going to look at setting up our sites that we can add endpoints to.
44 episodes•4 hrs 59 mins•1 year ago
Overview
Ready to dive into Inertia? Let's build a real-world app with Laravel, Inertia and Vue! If you're already working with Inertia, you'll pick up some tips and techniques for future projects.
This uptime monitor allows you to create and switch between sites, then add endpoints to monitor with frequency intervals. Using the power of scheduling and queues, it'll automatically alert the email addresses you've added via the UI when an endpoint goes down.
In this course, you'll learn to:
- Build a real app from scratch with Inertia
- Work with Laravel queues
- Perform actions on models at user-defined intervals
- Work with sub-minute schedules in Laravel
- Send out channel notifications with Laravel
- Use API resources to simplify Inertia data
- Organise apps with events and observers
- Create modals in Vue
- Perform inline editing with Inertia forms
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.