Using Alpine with HTMX (& Laravel) #1 - Intro & Setup

Key Takeaways

Hey there gang and welcome to this Alpine with HTMX and Laravel course. [Music] Okay then gang. In this course we're going to be adding Alpine which is a front-end lightweight JavaScript library to a Laravel and HTMX project that currently looks like this. And this is a novel planning application where you can plan chapters, add summaries, you can reorder those chapters and also add codeex entries for things like characters, locations and items in the novel as well. So, all of this was built using Laravel and HDMX. And if you want to see how that was made, I've got a whole series about it. It's this one right here. So, I'm going to leave this link down below the video. Anyway, we'll be adding Alpine to this project to add some frontend state and interactivity to make this final version of the project. So, we'll be adding a codeex filter to control what type of entries we see here. We'll also be making a search bar, which then only shows entries that match the term inside that search. And we'll also be adding a light and dark theme as well. Now, I actually already have an Alpine crash course on the channel. So, if you want to learn Alpine on its own without it being used in a Laravel and HTMX stack, then definitely check that out. But I wanted to make this course to show you how it can be used in conjunction with other frameworks and libraries and in the case of this project, how it can work really well alongside HTMX without the two things stepping on each other. But there are a few things you need to watch out for, and I'm going to be covering those as well. So if we go back to the starter project, you can see that we're on this outline dashboard page and all of this content is being injected using HTMX. So it sends requests to the Laravel back end. Laravel detects the request is an HTMX one and it sends back fragments which are essentially chunks of HTML template and then those get injected into the DOM by HTMX. And again, if you want to build this from the ground up, then definitely go and check out my earlier Laravel with HTMX series. Anyway, all of this HTML stuff progressively enhances the website in such that if we disable JavaScript in the browser, which I'm going to do now, and then refresh the page, then we get a more traditional CRUD application, only now we have to manually navigate to the different resource pages to interact with the data. So, it's much more of an archaic user experience than just having everything on one dashboard. But the point is that we're doing this to progressively enhance the web app for those that do have JavaScript enabled in the browser. And for those that don't, then they still get the normal functionality. All right. So, let's allow it again. And then we're going to refresh the outline dashboard page. And then we should see all of that content again. Right. So, this is the starter project. This is what we're going to be heading towards using Alpine, this other one. Next, I'm going to show you how you can get the starter project and get it up and running. And by the way, just one very quick thing. This is not going to be any kind of introduction to Laravel or how to set up a Laravel application. I do already expect you to know how to do all that. So, if you're completely new to Laravel, this is not the place to start. Check out my beginner's Laravel course first of all, and the link to that will be down below the video. Okay. So, to get the starter project, you need to head to this GitHub repo right here, which I will leave the link to down below the video. And you just need to select the starter branch from the branch dropdown over here. Once you've done that, you can download the code by hitting the code button and then choosing to download a zip of the branch. When that's downloaded, extract the project folder, rename it to whatever you want, and then put it into whatever directory you serve Laravel projects from on your computer. I'm using Herd, so I put all my projects in a Herd folder, and then Herd automatically serves them up for me. But if you're using something like XAMP, then you'll probably be putting this into the HT docs folder instead. Anyway, do all that. Then open up the project in VS Code or whatever other editor you use. All right, then. So, I've got this project up inside VS Code. I've called it architect_lpine. Call it whatever you want. And there's a few things we need to do to get this starter project up and running. We need to install the PHP dependencies, uh, node dependencies. We need to create an environment file, uh, generate an app key, and we also then need to run all the database migrations. So, let's start by installing the PHP dependencies. I'm going to open up a terminal and inside the root directory, we need to type composer and then install and press enter to do that. Okay. And then when that's done, we need to install all the node dependencies. So let's type npm install to do that. Okay. And then next we need to create av file. Now we have an example one right here with all the basic information inside it. We just need to change a couple of things inside it and call itenv. So, I'm going to copy this file down in the terminal by making sure I'm in the root directory. Then typing cp and then the name of the file I want to copy, which is env.example and then the name of the file I want to create and that is env. Press enter and we should see av file right here. Okay, so one of the things that we need to change or add rather is this app key right here and we can generate that using artisan. So let's open up the terminal again. And to do this we can just type PHP artisan first of all then key and then a colon and then generate and press enter. And we should see a key generated right here. Okay. So we also want to update this to whatever the um app URL is. In my case because I'm using herd it automatically serves it up using the name of the project. So mine would be architect_lalpine. Oops. If I can spell this test like I cannot spell test like so. All right. So that's all we need to update for now. And then next up we want to create a database. And I'm going to use SQLite for this project. So I'm going to go to the database folder, create a new file, call this database.sqlite. And when I view this file, I'm going to be able to see those tables in VS Code. Now if you can't see those, then you should install a package. And let me search over here for SQL light. Press enter. I've already got it installed. It's called SQL light viewer. Just install that and you should be able to see the table when you open the file. All right. But then also we need to run the migration. So now let's open up the terminal. I'm going to clear this to give us some room. And we want to say PHP artisan migrate. And then I've also created seeders. So it's going to create some dummy data for us using factories. So we're going to say seed as well. double dash seed to seed the database with that dummy data. So, press enter and then it should do all that. We should when we open this file now see the tables which we can. We can see this data I've added because we've got a couple of models, one for chapters and one for codeexes. So, we've got some dummy data for the chapters and we've got some dummy data for the codeexes as well. Awesome. So now we want to view this in a browser and to do that we're going to run npm run oops dev and press enter and we do this so we can serve up all the assets using vits and now you can see I can view this in the browser using this address right here. All right then so here we go this is the starter project now in the browser we can see that everything's working. I can reorder these. Can we add new chapters? Yes we can. We can add new codeex entries as well hopefully. Yep. Okay, cool. So, everything's working there. So, that's the starter project up and running now. And in the next lesson, we'll be adding Alpine to this project, and we'll use it to make a little filter for the codeex entries. By the way, if you want to watch this entire course now without YouTube adverts, you can do it's all up on the Net Ninja website, netinja.dev. You can buy the course for $2 to get instant access to all of it. Or you can sign up to Net Ninja Pro and get instant access to all of my courses without adverts as well as premium courses not found on YouTube, including my Udemy ones. That's $9 a month, and you can get your first month half price when you use this promo code right here. So, I'm going to leave this link down below in the video description for you to sign up. And I really hope you enjoy this series. And please do not forget to share, subscribe, and like the videos. That really helps a lot. And I'm going to see you in the very next lesson. Heat. [Music] [Music] Hey, heat. Hey, heat. [Music] [Music]