Totally agree! And Fly.io provides a way to do multi-region SQLite streaming with LitesFS which is definitely something to look into if you're wanting to scale a serverless app!
This is the first comment, I'm writing for a tutorial. This is for a reason: this is the best programming tutorial I've ever seen and I've seen a lot! The length is perfect, you show all the relevant information to get an good overview about the framework and the tools and your explanation is calm and professional! Thank you very much!
I'm from Indonesia and I just wanted to say a big thank you for your tutorial video! It's really awesome, I love it! Your explanation is clear and easy to understand, and your style is really cool. I like how you can explain complicated things in a way that's easy to grasp. I'm sure this video will be really helpful for people who want to learn more about Livewire. Thanks a lot for making it! :)
This comment means a lot to me. Thank you so much for the kind words! Hopefully I can continue to make content that helps you and others in the same way! ☺️
Thanks so much for the content. I am learning livewire and was finding hard to envision the difference between full page components and integrating components into blade templates this really helped me understand the nuance. Keep up the good work!🎉
Thanks Kevin! There’s so many different ways of doing it which is why I wanted to show a full page Volt component as well! Typically though I’ll start with a Blade file and only make it a full page component if it’s absolutely necessary. :)
Appreciate seeing the “rawness” of typos, mistakes and what not. Development does not happen in a pristine vacuum, and it’s OK if we don’t know EVERYTHING at our finger tips.
Thanks for the support! I can definitely take a look at it. You can have "Almost" real time chat with LIvewire out of the box with Polling. But with things like Mercure becoming more and more popular, there are other options that are just as easy for real time connections.
Hey Josh, I don't usually comment on TH-cam videos, but I just wanted to chime in and say thank you for your time and effort in creating this awesome tutorial! I already worked with Laravel before, so this was mainly a primer for me to learn Livewire, but I still took away a ton (also about how to use Fly, I struggled with that in the past). Apart from Laravel just being a great framework, the community around it (especially creators like you or Aaron) is just something I have never experienced before in other ecosystems (I also have a JS background). It's just good vibes all around and a very constructive and pragmatic mindset towards building things and supporting others. Cheers ✌
Great video. I appreciate you making this one. Would have been great if these were done from scratch without starter kits to provide more context for newcomers out there that don't use them. Also video can be shortened for a possible future remake with new stuffs included. Thank you once again.
I wish there is another TALL Stack video. I learn so many stuff. Although is not purely MVC but i learn something new and it introduce me WIREUI. I want to learn from this guy. Keep it up bro.
I just watched the whole thing like I told you previously I would. I knew I was gonna learn great things here. Thanks for this amazing tutorial I just didn't see exactly what was that Alpine but lemme tell you this, YOU keep this up, this channel is blowing in NO TIME 💯
Thank you so much for the support! Admittedly, we didn’t really touch Alpine at all in this course. But it is intermingled in WireUI and Livewire pieces. I do have a video coming out soon of when to use Alpine and when to use Livewire that I’m excited for! Crazy that someone like you watched the whole thing! 🤯
The only reason I've chosen to study Laravel is that there is a need for PHP/Laravel developers, but there aren't many of them. Another benefit of using Laravel is that it comes with everything you need, eliminating the need for any third-party tools, unlike what you might need for a JavaScript backend.
Thanks for bringing up to youtube a tutorial over TALL stack, pretty useful and not too much known knowledge. I can address some points about the video that maybe can make more tutorials in the future even better (from a viewer perspective): - Focus of the video: i noticed along the tutorial that actually you haven't defined totally if this video was for people totally beginner in laravel, for people with some experience in laravel or for people that comes from javascript to php world. Fortunately the third option is my case, but it's not perhaps for most of the people: not everyone has ever used javascript and a lot of times you explain stuff like everyone would understand, like in 1:24:00, when you compare a resource from livewire with react and any person that doesn't have any knowledge on react would never get. I guess that focusing on intermediary to advanced level would be the way to go due to the intention of livewire and the other frameworks itself: make the life of people that knows their 'base' easier, and that implies not being a beginner. So perhaps explaining what a migration is is not necessary deeply. - Deploy part: i personally liked this part and it fits well for tutorials with this purpose of introducing new technologies use with a well-known framework as laravel, but again the issue of the focus: people that don't even know what 'deploy' means, which can be possible to have seen this part (you've said in the start that beginners could also see the video totally fine), perhaps have struggled to process this. Anyway the tutorial was good in general, but these points have damaged the intention and well, you also can be less fast sometimes: you have oscillated with fast (which made me pause the video to understand the code and write it too) and slow speed, but reaching a middle level is the way to go i think... Thanks!
Thanks for the feedback. I’m consistently trying to improve and even 7 months later, I would have done this video differently. Maybe I’ll post an updated version soon, but the goal of upcoming free and paid content (at least on this channel) is specifically for developers looking to try out Laravel unless otherwise stated. I’ll be releasing a video on the official channel for Laravel for brand new developers. Anyways. Thanks for the feedback. Continuing to work to get better as a creator and teacher. :)
Great tutorial, easy to follow along, moderately paced. Enjoyed it. Thanks Josh. The only change with Laravel 11 I found is that the command scheduling bit has moved to routes/console.php
Hey there. First full Laravel vid I've watched, and I'm enjoying it so far. Thanks for the good quality tutorial. I truly don't know if I'm supposed to fall asleep or become the best Laravel dev on planet earth. Maybe both at the same time. Audio feels like we're working on a secret project together at 3:17am and we're whispering because someone is asleep in the bathtub in the room next door, but we press on!
Amazing video Josh, thanks i'm a frontend dev transitioning from react to laravel. And i love it, i always ask my self, why no body told me about this !!?
Thanks for making this video. I think the length is justified by the topic and I appreciate the livestream format and not cutting corners to trim the video down to size. However some nits made it difficult for me to learn much from this video: - you spend a lot of time on fly, which is tangential to the meat of the video and makes the stack overly specific - I'd have preferred if you handwaved those parts more instead of spending time to explain how to configure that service unless you were literally sponsored by them; same with Postmark although to a much smaller extent obviously - your tone is very hushed - you mention elsewhere that you were recording this while your daughter was asleep but tbh watching this video at night made me sleepy af - when tabbing away from code to show and explain what it does it helps to then show the code again after the explanation - I had to backtrack to figure out what code you were talking about at times because I wasn't constantly paying close attention and eventually just gave up on doing that unless it sounded super interesting - the level of explanations sometimes oscillates between assuming the viewer is a complete novice or that they already know all the technologies involved - it might help to outline features you want to cover and then check them off as you go so you don't skip over important concepts or overexplain ideas you've already shown I think the video was a mix of a "let's play" for building a demo app with Laravel and a tutorial for how to do it. Both of those things sound interesting to me but I think it was a bit too disorganized for a tutorial and a bit too much explaining for a "let's play" style demo video. Given laracasts already exists, I think a "let's play" style video where you demonstrate building an app without going into too much detail with the explanations and focus on the TALL stack specific aspects would be more interesting to see in the future.
Thank you for this resource Josh, it's great, and I find it very educative. I have a little feedback. I had to replay some parts of the video repeatedly because you pasted and executed commands to fast for someone to see. So perhaps some milliseconds or highlight before hitting the enter key would really help. Thank you.
Hey, thank you so much for the tutorial, I really enjoyed it and learned a lot from this. I was wondering why didn't you use Alpine in this project as I was more interested in learning Alpine with Livewire but only got to see it working in action message component.
Man I appreciate your work a lot, very useful video, it helped me a lot. Could you do a video regarding how to implement a 'comment-on-note' functionality, kinda like in a social media way? Keep up with the videos man, im already a huge fan!
Thank you so much! This means a lot to hear and that idea is a perfect one to implement. It will be a great "part two" for this tutorial. Have a wonderful holiday season. :)
Thanks a lot for this tutorial. I read documentation and wrote simple tasks in Livewire but after this tutorial I think I can independently work on TALL stack projects. It's really good to know there's Livewire components (Volt) like React. It reduces code a lot. Everything was great but we didn't see any Alpine JS, did we? How we use Alpine? How we used that in this project if we did?
You're right! I wish I touched on this a little bit more in the tutorial but a lot of what Alpine is doing in Livewire is obfuscated by the component library (WireUI) we are using and by Livewire itself. I have some other videos about Alpine and am working on a Livewire crash course soon that will have a section all about Alpine. ☺️
Hi! I’ve been watching your content, and I love it! I recently started working with Livewire and Volt. It’s great, but the error pages are very unhelpful. Whether there’s a syntax error, logical error, or null error, it shows the same screen and the same message, which makes debugging difficult. Could you make a short video on this or suggest any tools? Also, I’d love a detailed video on Livewire debugging tools.
After connecting app with postgres and setting db_url i get internal server 500. removing DB_CONNECTION = 'pgsql' solved the issue (but i guess now I am using sqlite)....=> I've added it again, and it all works smoothely now. Thank you for your video!
Yep! I would say that HTMX probably solves the same set of issues that Livewire is solving, but I think if you aren't in Laravel than HTMX is a SOLID alternative. Also, take a look at Alpine Ajax which is an HTMX alternative with AlpineJS baked in (alpine-ajax.js.org/)
Ok great tutorial and all but I gotta say WHAT IS THIS OS!? From browser to terminal, from IDE to notepad everything looks so clean and awesome! Jeez I'm having a designgasm
Well thank you! This is actually just macOS with VSCode (with a lot of modifications). Terminal is "Warp" and the notepad is in the Arc browser. I try to keep things as distraction-free as possible!
Correct me if I'm wrong, but when using route('edit', $note) it's passing the Note Model, but Laravel simply uses the PrimaryKey (ID) to creates the URL ROUTE... when you mount(Note $note) it's using Dependency Injection and retrieving the Model from the Route Parameter to a Note Object... so it's really no different than just using the ID....
You’re correct that Laravel obfuscates that in a way to make the code much cleaner, but it doesn’t just have to be the ID. Additionally it performs checks that you would otherwise have to write out by hand if the ID didn’t exist. Here’s a great article about the inner workings: 100r0bh.medium.com/demistifying-route-model-binding-in-laravel-a6e27e5a458e
I liked this video, thanks for the hard work that has gone into creating the content. I'm off to try more out like it and deploy to my own servers now. I guess as I only saw in your video your changing client side rendering things like tailwind but not so much alpine. Is it just being used by livewire ? I was quite prepared to get busy with Alpine but seemingly not necessary at this point at any rate. Nice.
Looking back, I wished I touched on Alpine more than I did (which was never!) The WireUI components we installed are using Alpine under the hood, but we don’t see what they are doing. I guess the tutorial goes to show that for the majority of projects, I lean towards server side rendering first and then adding Alpine when I need it (for toggles, UI niceties, etc.) I actually have a video I’m recording about when to reach for Livewire vs. Alpine in components!
@@joshcirre that will be great to see. I'm looking at laravel websockets from beyond with a view longer term to use socket connections and real time messaging / updates in livewire but for the moment long polling is just fine. I'm guessing there are edge cases like these using javascript on the client will begin to make sense. mean time i am astonished how much can be done in pretty much blade templates and php to have this teleported to the client with components that feel like vue and dare I say react even
Hi Josh, it's really nice tutorial, thank you so much for your content, btw i already use natty theme, but its different colors, did you tweak it??? and what is the icon you use in vscode, i really like your vscode setup!
Hi there! I probably did tweak it a bit. I am using Catpuccin now so I can't remember exactly what I tweaked, but a lot of it stemmed from Caleb Porzio's "Make VS Code Awesome" course.
I am not sure I understand the question. Tailwind provides all of the styles you will ever need since it's just shorthand for CSS. So, there's no reason for me to create styles on top of it. :) If you mean use @apply or create my own components, that's why I chose the WireUI components. ☺️
Hi Josh, thank you so much for your content. I am curious on how you do the indexing using uuid as id in the table ? Is it the best approach using uuid instead of incremental ?
Hey there! In this particular use-case we opted for UUIDs instead of incremental because if you send a note you would prefer that note to be private (accessible only via link). Incremental is really easy to guess and therefore access notes that aren't meant for you. UUIDs are much more difficult to do so. Nearly impossible. Indexing is done through Laravel when we made the UUID a primary key. :)
i did get an error when i ran the command 'fly launch': > [internal] load build context: ------ Error: failed to fetch an image or build from source: error building: failed to solve: rpc error: code = Canceled desc = grpc: the client connection is closing what could be the issue Josh?
Curious why Breeze instead of JetStream as a starting point? I thought the main difference was that JetStream includes Livewire and a profile page with 2FA.
Main difference is Breeze is a lot more lightweight but still scaffolds auth and a dashboard for you. I really only choose Jetstream if I need the majority of the features it provides (2FA, teams, API tokens, profile pictures, etc.) Usually in the apps I do choose Jetstream, there’s some changes I make to make it fit the application I’m building but Breeze just gets out of your way more. ☺️
I love Filament. I'm planning on recording a few in-depth Filament tutorials since it's something I really enjoy using and one of my SaaS products is built entirely in Filament. :)
I have something really odd going on here. The only want I can get the x-button to show is I have to copy the HTML that was generated for the button and paste that into code. From there I have to save it, thus showing 2 buttons. I can remove the one I copy in and it still works, but if I change it from primary to secondary it doesn't show that button unless I copy the HTML again. Seems like there is a disconnect going on somewhere. Any ideas what might be going on?
i had the problem profile dropdown turns into a white dots which makes me cannot access profile and logout. im not sure is wireui problem or others causing that. i anyone have that issue and how to fix that?
can you help me? the result after running fly launch: : No security vulnerability advisories found. Using version ^1.0 for fly-apps/dockerfile-laravel Running: vendor/bin/dockerfile-laravel generate 'vendor' is not recognized as an internal or external command, operable program or batch file. Error: failed to generate Dockerfile: exit status 1
Hey! Sorry I can't help with that. My first guess is this after or before you have installed a new Laravel Application? Just make sure you're in your Laravel Application directory and then ensure that the Fly CLI was properly installed.
So that is done through Laravel Herd which is a tool to install all of the necessary components for local development. It is MacOS only, but there is ports of Laravel Valet on Linux and Laragon for Windows. Or if you prefer Docker, you can use Laravel Sail. :)
Hey there! I installed from scratch today to test this and wasn't having any issues. Is there a specific error it's giving when it highlights red? This is after running the composer require command? composer require wireui/wireui
@@joshcirre Thanks a lot for your help, it means a lot (at least to me :p) I haven't gone back to the project, but I will during the weekend, however, I don't see any specific errors on the editor, and will let you know in case someone else faces the same issue again
@@joshcirre the red highlight was due to the blade template extension not being installed. But the wireui still isn't working properly. The buttons don't have color until I add color directly to the button class and the trash and eye buttons aren't circular
For sure! In this video it was the "Natty" theme. Most of (if not all) of my setup in VSCode is taken from Caleb Porzio's "Make VS Code Awesome" course. Highly recommend.
Hey Digitezy! I do! I try to do as much "live editing" with OBS while recording, but there's a lot of times where I have to remove a bunch of stuff if things don't work like I want, so I do it all in Davinci Resolve. I'm actually making a video about my creativity process that I'm doing through Aaron Francis' Screencasting.com Creator Spotlight soon!
@@joshcirre That's Great man. Way to go! I'm an editor, I can help you with editing your videos so it can save your time as well. If there's anything, let me know, I'll be happy to help. Let's connect
There's a couple of different ways. The easiest way is to store it in the Cache. Might not be the best way but could be an option. Technically you would probably have the Shopping Cart be it's own Livewire component. THEN you would use Livewire Events to dispatch and receive changes to the cart from child components. This events page is a good start: livewire.laravel.com/docs/events#dispatching-events
@@joshcirre I always had the idea of using those listeners to render the cart component but where to save the cart is where I have my doubts, I even taught in the localstorage but well that idea of the cache can
Interesting! Would love to hear how it's broken for you? This video talks about a cool snippet where all actions completed by Livewire are given a "SPA" feel: th-cam.com/video/XLqEfQcog84/w-d-xo.html
@@joshcirre Man you are the best, as promised I just started following the tutorial. Since I was on Linux and rushed the installation of composer seems like I had some issues with it, anyways, did a fresh install of everything and this time it worked like a charm. I appreciate you looked into it though, keep the good work !
Can you build a system like zoom or any SaaS products example. Thanks snd Regards The thing must be scratch I mean Teach me lil bit of tailwind Alpine.
Hey! I am working on a full application build through in Laravel and Livewire for a Laracasts course coming soon. Additionally, I have some smaller videos teaching some SaaS concepts, as well. Would love to have you input ideas into: cir.re/suggest
Modals are tricky within Livewire, but some packages (and some of Caleb Porzio's content) makes them a little bit easier. I would take a look at wire-elements/modal for a great package which would work in Volt. You can then just pass the $note into the nested Livewire component.
In the TALL stack, there is no way to install ShadCN, but it’s possible with Laravel and React with Inertia. There are a couple options for ShadCN style components with TALL stack, however.
While you can definitely follow along with no knowledge, this assumes you understand basic programming concepts (functions, classes, etc.) and HTML and Tailwind. I try to explain everything as I’m going but we don’t take time to talk about how everything works from the ground up. ☺️
Thanks for the tutorial, one question, I have read in several places that Laravel is not so scalable, is this true? I have doubts about building a saas with Laravel and not being able to scale it as much as necessary.
100% yes absolutely. There are people running Laravel applications with millions of users. Totally doable on traditional architecture, but Laravel has Laravel Vapor which can scale on AWS effortlessly, as well.
SQLite is the best option in 99% of cases of small and medium project. This little bastard deserve more love.
Totally agree! And Fly.io provides a way to do multi-region SQLite streaming with LitesFS which is definitely something to look into if you're wanting to scale a serverless app!
@@joshcirre I will dig deeper here. Thanks for the tip!
why little bastard?
If you like SQLite check out Turso!
Yeah boiiiiiii! Dude.. PHP is dope.. I don't give a shit what the haters say.. I enjoy learning it.
The only reason I found about the haters of PHP is just jealousy. Being stupid can be another one.
This is the first comment, I'm writing for a tutorial. This is for a reason: this is the best programming tutorial I've ever seen and I've seen a lot! The length is perfect, you show all the relevant information to get an good overview about the framework and the tools and your explanation is calm and professional! Thank you very much!
Wow. Thanks so much Tobias. This is an awesome first comment. I'm truly honored. I'm hoping to be able to make more stuff like this. ☺️
I'm from Indonesia and I just wanted to say a big thank you for your tutorial video! It's really awesome, I love it!
Your explanation is clear and easy to understand, and your style is really cool. I like how you can explain complicated things in a way that's easy to grasp.
I'm sure this video will be really helpful for people who want to learn more about Livewire. Thanks a lot for making it! :)
This comment means a lot to me. Thank you so much for the kind words! Hopefully I can continue to make content that helps you and others in the same way! ☺️
JS junkie exploring Laravel for the first time. This is awesome! Learning some cool patterns from Livewire I'd love to pull into Astro :)
Absolutely love your content (and Astro) Ben! Thanks so much for watching. :) I’m hoping to do a Laravel and Astro video soon!
What a pattern man 👌👌
Thanks so much for the content. I am learning livewire and was finding hard to envision the difference between full page components and integrating components into blade templates this really helped me understand the nuance. Keep up the good work!🎉
Thanks Kevin! There’s so many different ways of doing it which is why I wanted to show a full page Volt component as well!
Typically though I’ll start with a Blade file and only make it a full page component if it’s absolutely necessary. :)
I love your channel is like watch asmr but learning and evangelizing with laravel
Best comment. 🥰
Appreciate seeing the “rawness” of typos, mistakes and what not. Development does not happen in a pristine vacuum, and it’s OK if we don’t know EVERYTHING at our finger tips.
Thx for the effort sir...May you get blessed by the algorithm
This project was tooo helpful. Please make more projects like real time chat system with file sharing using Tall Stack
Thanks for the support! I can definitely take a look at it. You can have "Almost" real time chat with LIvewire out of the box with Polling. But with things like Mercure becoming more and more popular, there are other options that are just as easy for real time connections.
Hey Josh, I don't usually comment on TH-cam videos, but I just wanted to chime in and say thank you for your time and effort in creating this awesome tutorial! I already worked with Laravel before, so this was mainly a primer for me to learn Livewire, but I still took away a ton (also about how to use Fly, I struggled with that in the past).
Apart from Laravel just being a great framework, the community around it (especially creators like you or Aaron) is just something I have never experienced before in other ecosystems (I also have a JS background). It's just good vibes all around and a very constructive and pragmatic mindset towards building things and supporting others.
Cheers ✌
Wow. This means a lot. Thank you for taking the time to comment / chime in. It means more than you know! :)
Great video. I appreciate you making this one. Would have been great if these were done from scratch without starter kits to provide more context for newcomers out there that don't use them. Also video can be shortened for a possible future remake with new stuffs included. Thank you once again.
This guys is the only person who makes good thumbnails for Laravel
Wow. Thanks. ☺️
I wish there is another TALL Stack video. I learn so many stuff. Although is not purely MVC but i learn something new and it introduce me WIREUI. I want to learn from this guy. Keep it up bro.
Well thank you so much for the love! More TALL stack specific tutorials coming. :)
Wow im excited 😊🎉🎉. I rewatch your video when im idle just to be sure i absorb it very well.
I just watched the whole thing like I told you previously I would. I knew I was gonna learn great things here. Thanks for this amazing tutorial I just didn't see exactly what was that Alpine but lemme tell you this, YOU keep this up, this channel is blowing in NO TIME 💯
Thank you so much for the support! Admittedly, we didn’t really touch Alpine at all in this course. But it is intermingled in WireUI and Livewire pieces.
I do have a video coming out soon of when to use Alpine and when to use Livewire that I’m excited for!
Crazy that someone like you watched the whole thing! 🤯
The only reason I've chosen to study Laravel is that there is a need for PHP/Laravel developers, but there aren't many of them. Another benefit of using Laravel is that it comes with everything you need, eliminating the need for any third-party tools, unlike what you might need for a JavaScript backend.
Especially Laravel specific developers are harder to find from a Wordpress dev, for example. And yes, I agree!
do you have a discord? i want to add you. I also study laravel.
This was really fun to follow along with - managed to get my own version up and live on the internet :) thanks for the effort and the expertise.
That's awesome Jason. ☺️ Thanks for following along! Let me know what I can change and improve in the next version. :)
i'm from Argentina and tomorrow i have a TALL stack interview, you saved me!. Hopefully i get the job.
Thanks for bringing up to youtube a tutorial over TALL stack, pretty useful and not too much known knowledge. I can address some points about the video that maybe can make more tutorials in the future even better (from a viewer perspective):
- Focus of the video: i noticed along the tutorial that actually you haven't defined totally if this video was for people totally beginner in laravel, for people with some experience in laravel or for people that comes from javascript to php world. Fortunately the third option is my case, but it's not perhaps for most of the people: not everyone has ever used javascript and a lot of times you explain stuff like everyone would understand, like in 1:24:00, when you compare a resource from livewire with react and any person that doesn't have any knowledge on react would never get. I guess that focusing on intermediary to advanced level would be the way to go due to the intention of livewire and the other frameworks itself: make the life of people that knows their 'base' easier, and that implies not being a beginner. So perhaps explaining what a migration is is not necessary deeply.
- Deploy part: i personally liked this part and it fits well for tutorials with this purpose of introducing new technologies use with a well-known framework as laravel, but again the issue of the focus: people that don't even know what 'deploy' means, which can be possible to have seen this part (you've said in the start that beginners could also see the video totally fine), perhaps have struggled to process this.
Anyway the tutorial was good in general, but these points have damaged the intention and well, you also can be less fast sometimes: you have oscillated with fast (which made me pause the video to understand the code and write it too) and slow speed, but reaching a middle level is the way to go i think... Thanks!
Thanks for the feedback. I’m consistently trying to improve and even 7 months later, I would have done this video differently. Maybe I’ll post an updated version soon, but the goal of upcoming free and paid content (at least on this channel) is specifically for developers looking to try out Laravel unless otherwise stated.
I’ll be releasing a video on the official channel for Laravel for brand new developers.
Anyways. Thanks for the feedback. Continuing to work to get better as a creator and teacher. :)
Great tutorial, easy to follow along, moderately paced. Enjoyed it. Thanks Josh.
The only change with Laravel 11 I found is that the command scheduling bit has moved to routes/console.php
Hey there. First full Laravel vid I've watched, and I'm enjoying it so far. Thanks for the good quality tutorial. I truly don't know if I'm supposed to fall asleep or become the best Laravel dev on planet earth. Maybe both at the same time. Audio feels like we're working on a secret project together at 3:17am and we're whispering because someone is asleep in the bathtub in the room next door, but we press on!
haha, my thoughts exactly!
I already know laravel, but I just love your calm way of explaning things. Thanks for the tutorial. Dont stop please.
Thank you so much. This means a lot. ☺️
Amazing video Josh, thanks i'm a frontend dev transitioning from react to laravel. And i love it, i always ask my self, why no body told me about this !!?
I feel the same way! I'm glad that I could help out. ☺️
Thanks for making this video. I think the length is justified by the topic and I appreciate the livestream format and not cutting corners to trim the video down to size. However some nits made it difficult for me to learn much from this video:
- you spend a lot of time on fly, which is tangential to the meat of the video and makes the stack overly specific - I'd have preferred if you handwaved those parts more instead of spending time to explain how to configure that service unless you were literally sponsored by them; same with Postmark although to a much smaller extent obviously
- your tone is very hushed - you mention elsewhere that you were recording this while your daughter was asleep but tbh watching this video at night made me sleepy af
- when tabbing away from code to show and explain what it does it helps to then show the code again after the explanation - I had to backtrack to figure out what code you were talking about at times because I wasn't constantly paying close attention and eventually just gave up on doing that unless it sounded super interesting
- the level of explanations sometimes oscillates between assuming the viewer is a complete novice or that they already know all the technologies involved - it might help to outline features you want to cover and then check them off as you go so you don't skip over important concepts or overexplain ideas you've already shown
I think the video was a mix of a "let's play" for building a demo app with Laravel and a tutorial for how to do it. Both of those things sound interesting to me but I think it was a bit too disorganized for a tutorial and a bit too much explaining for a "let's play" style demo video. Given laracasts already exists, I think a "let's play" style video where you demonstrate building an app without going into too much detail with the explanations and focus on the TALL stack specific aspects would be more interesting to see in the future.
Thanks for the feedback. I’m definitely looking to consistently improve even for free content like this. :)
Thank you for this resource Josh, it's great, and I find it very educative. I have a little feedback. I had to replay some parts of the video repeatedly because you pasted and executed commands to fast for someone to see. So perhaps some milliseconds or highlight before hitting the enter key would really help. Thank you.
Good point! I've become much better since then so I appreciate the thoughts. :)
Yessss! I've been waiting for this! You're awesome!
I was shock when I saw your tutorial in first place. It's awesome man. I really really appreciate it. HUGE THANK ❤
Thanks so much for the support! Let me know if there's other things you'd like to learn about. :)
best channel for laravel developers.....
Thank you so much for the incredibly kind words!
man you deserve much more subscribers, I love your channel
I appreciate that! I'm gonna keep working hard to get there. :)
Thank you for making this video, this is what I have been looking for the last 2 months.
That means a lot. Thank you! 😊
Fantastic tutorial thanks Josh!
Thank you so much. I’m hoping to make this better in the coming months. ☺️
Hey, thank you so much for the tutorial, I really enjoyed it and learned a lot from this. I was wondering why didn't you use Alpine in this project as I was more interested in learning Alpine with Livewire but only got to see it working in action message component.
your voice is soothing
Thank you! ☺️
Man I appreciate your work a lot, very useful video, it helped me a lot. Could you do a video regarding how to implement a 'comment-on-note' functionality, kinda like in a social media way? Keep up with the videos man, im already a huge fan!
Thank you so much! This means a lot to hear and that idea is a perfect one to implement. It will be a great "part two" for this tutorial. Have a wonderful holiday season. :)
Thanks a lot for this tutorial. I read documentation and wrote simple tasks in Livewire but after this tutorial I think I can independently work on TALL stack projects. It's really good to know there's Livewire components (Volt) like React. It reduces code a lot. Everything was great but we didn't see any Alpine JS, did we? How we use Alpine? How we used that in this project if we did?
You're right! I wish I touched on this a little bit more in the tutorial but a lot of what Alpine is doing in Livewire is obfuscated by the component library (WireUI) we are using and by Livewire itself.
I have some other videos about Alpine and am working on a Livewire crash course soon that will have a section all about Alpine. ☺️
What a wonderful video, i learnt a lot and all thanks to you mate! Would you mind doing more TALL stack stuff? i am hungry for that!
Thanks for the support! I do have a video coming out on my Laravel Toolkit, TALL Stack for JS devs, and Livewire Security video!
Thank you, that way we could actually learn
Hi! I’ve been watching your content, and I love it! I recently started working with Livewire and Volt. It’s great, but the error pages are very unhelpful. Whether there’s a syntax error, logical error, or null error, it shows the same screen and the same message, which makes debugging difficult. Could you make a short video on this or suggest any tools? Also, I’d love a detailed video on Livewire debugging tools.
I'll have to add it to the list. Thanks! :)
Thank you for this tutorial, I really love it! I also wanna know how you get/setup your warp terminal. Many thanks!
I'll have to put a quick short together to show this. It changed a bit from this video, but I'm currently using the "Catppuccin Frappe" theme. :)
@@joshcirre nice! I look forward on it. Thanks bro.
4:16 I'm on Linux, thanks buddy, I felt like a genius or something :D
great course to get going on Livewire!
Thanks! I have a brand new one building an app from start to finish with Livewire coming out on Laracasts soon!
Looking forward to it
Thank you, Josh! ♥
Thank YOU!
After connecting app with postgres and setting db_url i get internal server 500. removing DB_CONNECTION = 'pgsql' solved the issue (but i guess now I am using sqlite)....=> I've added it again, and it all works smoothely now. Thank you for your video!
Awesome Style Boy.
Thank you so much for this video. Therefore I become the 1000th subscriber !
Thank you! :)
I love your editor theme and font. Please which is it?
I have a full video on my setup but the theme is Natty (in this video, since then I've moved to Catppuccin Frappe), and the font is Dank Mono. :)
Awesome job man, have learned a lot!
So glad to hear that! Thank you!
Great stuff! I've also been wondering if htmx would be a good addition to this stack. I think it may remove the need for livewire
Yep! I would say that HTMX probably solves the same set of issues that Livewire is solving, but I think if you aren't in Laravel than HTMX is a SOLID alternative. Also, take a look at Alpine Ajax which is an HTMX alternative with AlpineJS baked in (alpine-ajax.js.org/)
Ok great tutorial and all but I gotta say WHAT IS THIS OS!? From browser to terminal, from IDE to notepad everything looks so clean and awesome! Jeez I'm having a designgasm
Well thank you!
This is actually just macOS with VSCode (with a lot of modifications). Terminal is "Warp" and the notepad is in the Arc browser.
I try to keep things as distraction-free as possible!
Correct me if I'm wrong, but when using route('edit', $note) it's passing the Note Model, but Laravel simply uses the PrimaryKey (ID)
to creates the URL ROUTE... when you mount(Note $note) it's using Dependency Injection and retrieving the Model from the Route Parameter to a Note Object... so it's really no different than just using the ID....
You’re correct that Laravel obfuscates that in a way to make the code much cleaner, but it doesn’t just have to be the ID.
Additionally it performs checks that you would otherwise have to write out by hand if the ID didn’t exist.
Here’s a great article about the inner workings:
100r0bh.medium.com/demistifying-route-model-binding-in-laravel-a6e27e5a458e
This is like the Laravel version of what I call the ADHD stack
Alpine, Django, HTMx, DaisyUI.
That sounds like a stack you can get things done with though!
@joshcirre sure can!
53:22 Templatized template 😂. Great stuff
I never said I'm smart. 😂
@@joshcirre you said what I normally think out loud
Can you share the plugins you have used in your app? especially the auto populate part for tailwind and laravel related code.
I liked this video, thanks for the hard work that has gone into creating the content. I'm off to try more out like it and deploy to my own servers now.
I guess as I only saw in your video your changing client side rendering things like tailwind but not so much alpine. Is it just being used by livewire ?
I was quite prepared to get busy with Alpine but seemingly not necessary at this point at any rate. Nice.
Looking back, I wished I touched on Alpine more than I did (which was never!)
The WireUI components we installed are using Alpine under the hood, but we don’t see what they are doing.
I guess the tutorial goes to show that for the majority of projects, I lean towards server side rendering first and then adding Alpine when I need it (for toggles, UI niceties, etc.)
I actually have a video I’m recording about when to reach for Livewire vs. Alpine in components!
@@joshcirre that will be great to see. I'm looking at laravel websockets from beyond with a view longer term to use socket connections and real time messaging / updates in livewire but for the moment long polling is just fine. I'm guessing there are edge cases like these using javascript on the client will begin to make sense.
mean time i am astonished how much can be done in pretty much blade templates and php to have this teleported to the client with components that feel like vue and dare I say react even
moooooreee tall episode
I'm glad you like it. 😊
@@joshcirre extension name for terminal suggestions like ai
Hi Josh, it's really nice tutorial, thank you so much for your content,
btw i already use natty theme, but its different colors, did you tweak it??? and what is the icon you use in vscode,
i really like your vscode setup!
Hi there! I probably did tweak it a bit. I am using Catpuccin now so I can't remember exactly what I tweaked, but a lot of it stemmed from Caleb Porzio's "Make VS Code Awesome" course.
Great content. One Q: Why wouldn't you create your own CSS styles on top of Tailwind?
I am not sure I understand the question. Tailwind provides all of the styles you will ever need since it's just shorthand for CSS. So, there's no reason for me to create styles on top of it. :)
If you mean use @apply or create my own components, that's why I chose the WireUI components. ☺️
love this video, only question is how you got your web browser to look the way it does?
Thanks Jose! It is the Arc browser for macOS!
Hi Josh, thank you so much for your content. I am curious on how you do the indexing using uuid as id in the table ? Is it the best approach using uuid instead of incremental ?
Hey there! In this particular use-case we opted for UUIDs instead of incremental because if you send a note you would prefer that note to be private (accessible only via link).
Incremental is really easy to guess and therefore access notes that aren't meant for you. UUIDs are much more difficult to do so. Nearly impossible.
Indexing is done through Laravel when we made the UUID a primary key. :)
i did get an error when i ran the command 'fly launch':
> [internal] load build context:
------
Error: failed to fetch an image or build from source: error building: failed to solve: rpc error: code = Canceled desc = grpc: the client connection is closing
what could be the issue Josh?
I haven’t come against this error, but a quick search seems like it might be related to WSL. Are you on Windows?
@@joshcirre yes i am on windows, i setup wsl2 with ubuntu and docker.
another great tut and saved in my fav playlist
24:11 Heads up laravel 11 users! Before running the migration you need to run fly secrets set DB_URL="", otherwise it will fail your deployment!
Thank you for this. I did just do a fly deployment myself so I'll have to add this to the description!
awesomeee josh thank 🎉
Glad you liked it! :)
Curious why Breeze instead of JetStream as a starting point? I thought the main difference was that JetStream includes Livewire and a profile page with 2FA.
Main difference is Breeze is a lot more lightweight but still scaffolds auth and a dashboard for you.
I really only choose Jetstream if I need the majority of the features it provides (2FA, teams, API tokens, profile pictures, etc.)
Usually in the apps I do choose Jetstream, there’s some changes I make to make it fit the application I’m building but Breeze just gets out of your way more. ☺️
@@joshcirrethanks, that makes sense!
great content need more like this next time please tell how to connect cms with laravel
Thanks for the encouragement Rahul! I have a video I'm looking to create using Filament as a CMS!
That's amazing . would also love to know what coding tools and useful extension you use a video on that would be helpful
Nice tutorial!, just one question, which font do you use in your vscode?
This is Dank Mono. One of my favorites! ☺️
Nice vidéo ! What do you think about Filament ?
I love Filament. I'm planning on recording a few in-depth Filament tutorials since it's something I really enjoy using and one of my SaaS products is built entirely in Filament. :)
I subscribed because of your voice
Thank you ha! :)
I have something really odd going on here. The only want I can get the x-button to show is I have to copy the HTML that was generated for the button and paste that into code. From there I have to save it, thus showing 2 buttons. I can remove the one I copy in and it still works, but if I change it from primary to secondary it doesn't show that button unless I copy the HTML again.
Seems like there is a disconnect going on somewhere.
Any ideas what might be going on?
Very odd! Maybe your WireUI config is overriding the Breeze buttons?
If you can put it in a Github repo, I can take a look. :)
Jezz oh God.... you're my savior ! Not God you Josh ! Thanks for detailed tutorial !
So glad you find it useful. Thank you so much! :)
i had the problem profile dropdown turns into a white dots which makes me cannot access profile and logout. im not sure is wireui problem or others causing that. i anyone have that issue and how to fix that?
Great video! What notes app are you using around the 27:00 mark?
This is actually just the Notes feature in the Arc browser. Great for quick notes like this.
In my daily life, I do use the Reflect Notes App. :)
@@joshcirre Thanks so much for the quick reply!
Man you are pushing some quality videos on the TALL stack, fantastic
Thank you so much for the kind words. I'm going to continue improving and pushing out as much content as I can. Thanks for the support! :)
can you help me? the result after running fly launch: : No security vulnerability advisories found.
Using version ^1.0 for fly-apps/dockerfile-laravel
Running: vendor/bin/dockerfile-laravel generate
'vendor' is not recognized as an internal or external command,
operable program or batch file.
Error: failed to generate Dockerfile: exit status 1
Hey! Sorry I can't help with that. My first guess is this after or before you have installed a new Laravel Application? Just make sure you're in your Laravel Application directory and then ensure that the Fly CLI was properly installed.
can we just focus on the "stink stank STUNK" for a moment.
what kind of tooling do you use that implements a vhost right then and there from the CLI? is that a MacOS-Exclusive feature?
So that is done through Laravel Herd which is a tool to install all of the necessary components for local development. It is MacOS only, but there is ports of Laravel Valet on Linux and Laragon for Windows. Or if you prefer Docker, you can use Laravel Sail. :)
@@joshcirre What a beauty! thanks for all the info, I've been off from Laravel from a while but want to come back for a project
Love the video. What’s the font on your IDE
This is Dank Mono! Paid, but worth it (to me).
@@joshcirrewhat about theme?
i try use the filamentphp as full stack but the problem bad performance
LESGOOOOOOO DUDE
Hey Josh. Wire ui doesn't work for some reason. The highlights red on my vs code and the buttons don't display on 1:12:29
Same here, I can't make it work :(
Hey there! I installed from scratch today to test this and wasn't having any issues. Is there a specific error it's giving when it highlights red? This is after running the composer require command?
composer require wireui/wireui
@@joshcirre Thanks a lot for your help, it means a lot (at least to me :p)
I haven't gone back to the project, but I will during the weekend, however, I don't see any specific errors on the editor, and will let you know in case someone else faces the same issue again
@@joshcirre the red highlight was due to the blade template extension not being installed. But the wireui still isn't working properly.
The buttons don't have color until I add color directly to the button class and the trash and eye buttons aren't circular
Josh, can I ask what vs code theme you are using? I like to have the same exact theme on my vs code. Thank you.
For sure! In this video it was the "Natty" theme. Most of (if not all) of my setup in VSCode is taken from Caleb Porzio's "Make VS Code Awesome" course. Highly recommend.
Great Videos!
Do you edit them by yourself?
Hey Digitezy! I do!
I try to do as much "live editing" with OBS while recording, but there's a lot of times where I have to remove a bunch of stuff if things don't work like I want, so I do it all in Davinci Resolve.
I'm actually making a video about my creativity process that I'm doing through Aaron Francis' Screencasting.com Creator Spotlight soon!
@@joshcirre That's Great man. Way to go!
I'm an editor, I can help you with editing your videos so it can save your time as well. If there's anything, let me know, I'll be happy to help. Let's connect
what keyboard you are using, Josh?
This is actually a Mac app called "Klack", so no actual keyboard sound, all digital. 😅
@@joshcirre I know, now :D i watched your last video about your recording setup :) great job! And thaks for answare :)
Brother, how could I share a state with Laravel Volt? For example, a shopping cart
There's a couple of different ways. The easiest way is to store it in the Cache. Might not be the best way but could be an option.
Technically you would probably have the Shopping Cart be it's own Livewire component. THEN you would use Livewire Events to dispatch and receive changes to the cart from child components.
This events page is a good start:
livewire.laravel.com/docs/events#dispatching-events
@@joshcirre I always had the idea of using those listeners to render the cart component but where to save the cart is where I have my doubts, I even taught in the localstorage but well that idea of the cache can
I wish livewire's spa functionality wasn't utterly broken 🥺 im sticking with Vue
Interesting! Would love to hear how it's broken for you? This video talks about a cool snippet where all actions completed by Livewire are given a "SPA" feel: th-cam.com/video/XLqEfQcog84/w-d-xo.html
Great video! Too bad I'm the second person that has problems with the inclusion of styles for livewire :(
Even ChatGPT couldn't fix the issues!
Oh no! Let me take a look this week! It’s possible that something changed. ☺️
Hey Miguel! Sorry to hear that. I did a fresh install and everything seems to be working for me. Is there any errors that are being shown in VS Code?
@@joshcirre Man you are the best, as promised I just started following the tutorial.
Since I was on Linux and rushed the installation of composer seems like I had some issues with it, anyways, did a fresh install of everything and this time it worked like a charm. I appreciate you looked into it though, keep the good work !
Can you build a system like zoom or any SaaS products example.
Thanks snd Regards
The thing must be scratch I mean Teach me lil bit of tailwind Alpine.
Hey! I am working on a full application build through in Laravel and Livewire for a Laracasts course coming soon. Additionally, I have some smaller videos teaching some SaaS concepts, as well.
Would love to have you input ideas into:
cir.re/suggest
Laravel My favourite Framework
Really?! Mine too. 😇
whats the name font in your vs code bro ?
what extension you use that it auto suggest a vode snippets?
This should be the "PHP Intelephense" plugin! :)
But it's possible you're also just seeing Github Copilot, as well!
i tried implement edit note using modal, and its so hard to make. i can't get the current edit note
volt makes it hard to implement because each livewire file is separate.
Modals are tricky within Livewire, but some packages (and some of Caleb Porzio's content) makes them a little bit easier. I would take a look at wire-elements/modal for a great package which would work in Volt. You can then just pass the $note into the nested Livewire component.
Which terminal app are you using in this video?
This is the “Warp” terminal app. ☺️
hey a question im from nextjs land and wanted to learnd tall stack are there a way to install shadcn?
In the TALL stack, there is no way to install ShadCN, but it’s possible with Laravel and React with Inertia.
There are a couple options for ShadCN style components with TALL stack, however.
@@joshcirreCan you suggest some of it for me
Please if you can please create one with jetstream
what’s that note app you were using
This is actually the "notes" section built into the Arc browser. :)
what are the prerequisites for this course?
While you can definitely follow along with no knowledge, this assumes you understand basic programming concepts (functions, classes, etc.) and HTML and Tailwind.
I try to explain everything as I’m going but we don’t take time to talk about how everything works from the ground up. ☺️
Thank you 🤝
Which vs code theme are you using sir? Please tell us.
This is the "Natty" VS Code Theme. :)
@@joshcirre Thanks sir. Can you share your vs code settings with us?
Can u tell me u r browser and how i customize like that
This is the Arc browser. :)
Maybe it's just me, why does the livewire website take long to load or navigate?
Interesting. All good on my end!
Thanks for the tutorial, one question, I have read in several places that Laravel is not so scalable, is this true? I have doubts about building a saas with Laravel and not being able to scale it as much as necessary.
100% yes absolutely. There are people running Laravel applications with millions of users. Totally doable on traditional architecture, but Laravel has Laravel Vapor which can scale on AWS effortlessly, as well.