Build An Uptime Monitor with Inertia

Sign in Get started

This episode is for members only

Sign up to access "Build An Uptime Monitor with Inertia" right now.

Already a member? Sign in to continue

Playing

02. A fresh Inertia project

Episodes

0%

Your progress

Total: 4h 59m
Played: 0m
Remaining: 4h 59m

Join or sign in to track your progress

01. Introduction

01. Introduction and demo

02. A fresh Inertia project

02. Sites

03. Site and dashboard setup

04. Building the site selector dropdown

05. Making use of API resources

06. Setting the default site

07. Setting up Vue modals

08. Creating a site

03. Endpoints

09. Setting up endpoints

10. Enum endpoint frequencies

11. Creating the endpoint form

12. Storing an endpoint

13. Validating and authorizing endpoint stores

14. Normalizing the endpoint location

15. Displaying endpoints

16. Deleting endpoints

17. Toggling inline editing for endpoints

18. Applying a watcher to the endpoint form

19. Storing endpoint edits

04. Checking endpoints

20. Determining endpoints to check

21. Creating a job to perform a check

22. Making an HTTP request

23. Scheduling checks every second

24. Setting up the check relationship

25. Updating the job

26. Showing the last status

27. Expanded list of checks

28. The response body modal

29. Authorizing the endpoint details

30. Calculating uptime for endpoints

05. Queuing

31. Setting up queues

32. Queuing the endpoint check

06. Email notifications

33. Setting up email in Laravel

34. Site model email notification storage

35. Adding email addresses via the UI

36. Listing and deleting email addresses

07. Downtime notifications

37. Observing when to notify

38. Creating an endpoint down notification

39. Creating an endpoint recovery notification

40. Making the emails a bit friendlier

08. Extras

41. Deleting sites

42. Eager loading

43. Recovery notification bug

44. No sites fix and placeholder

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.

Episode summary

In this episode, we kick things off by creating a brand new Laravel project—squeaky clean, nothing custom yet. We walk through setting up the database connection and then bring in Laravel Breeze as our starter kit, opting for the Inertia + Vue flavor. This gives us built-in authentication and a nice scaffolding to start building Vue-powered pages right away.

We go step-by-step: installing the breeze package, making sure to select the view preset for Inertia, setting up our .env to point to the right database, running migrations, and finally installing our frontend dependencies (npm install + npm run dev) so our assets are ready to go. After registering a new user, we explore what our fresh app looks like: a dashboard rendered with Inertia, not the classic Blade templates. We pop the hood to see how Inertia uses Vue components to render pages, check out the layout structure, and discuss how slots work in Vue layouts, similar to Blade layouts but in a more JavaScript-y way.

There's also a quick look at Vite, the modern build tool that gives us instant browser reloads while working on Vue files—super handy for speedy development. We wrap up with a comparison between traditional Blade setups and the new Inertia approach, then set up for the next lesson where we'll start building out our main features, like setting up sites and endpoints to monitor. Basically, if you're new to Inertia or the Laravel + JS ecosystem, this episode gets you oriented and ready to build!

Episode discussion

No comments, yet. Be the first!