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!
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.
Hey Josh, I don't usually comment on UA-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 ✌
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.
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.
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!
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. :)
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! 🤯
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
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.
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 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.
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. :)
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. ☺️
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?
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. :)
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.
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.
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
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?
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.
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 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 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?
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!
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. :)
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/)
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!
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. ☺️
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
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.
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
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.
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.
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. ☺️
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
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: ua-cam.com/video/XLqEfQcog84/v-deo.html
Hi there! You would do this with Laravel's Gate and Policies like we implemented, but if you wanted to give different roles to different users in an easier format than doing it all manually within the Policy, then Spatie's laravel-permissions is a fantastic package to help with this. In Livewire, nothing would change because you can still authorize like we do in the Policy section.
@@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 !
Hello, I really enjoyed your tutorial. However, something that bothered me a bit throughout was the impression that you were whispering when speaking. It made it a bit difficult for me to follow along effectively.
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?
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.
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. :)
Thx for the effort sir...May you get blessed by the algorithm
I love your channel is like watch asmr but learning and evangelizing with laravel
Best comment. 🥰
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. :)
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.
Hey Josh, I don't usually comment on UA-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! :)
i'm from Argentina and tomorrow i have a TALL stack interview, you saved me!. Hopefully i get the job.
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.
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.
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!
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. :)
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! 🤯
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
Yessss! I've been waiting for this! You're awesome!
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. :)
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. ☺️
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.
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. :)
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. :)
Fantastic tutorial thanks Josh!
Thank you so much. I’m hoping to make this better in the coming months. ☺️
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! 😊
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
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. ☺️
best channel for laravel developers.....
Thank you so much for the incredibly kind words!
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.
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. :)
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.
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
your voice is soothing
Thank you! ☺️
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.
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
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. :)
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 :)
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.
4:16 I'm on Linux, thanks buddy, I felt like a genius or something :D
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!
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 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.
Nice tutorial!, just one question, which font do you use in your vscode?
This is Dank Mono. One of my favorites! ☺️
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
Awesome Style Boy.
I couldn't follow the fly setup, its not beginner friendly because of the card authorization, mine gets rejected.
Good to know. Hopefully there will be a better and easier way to host Laravel apps soon. :)
I spent a lot of time to setup successfully. You just need to research a little bit. If you have any issues you can write.
Thank you, Josh! ♥
Thank YOU!
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. ☺️
Thank you, that way we could actually learn
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 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!
Awesome job man, have learned a lot!
So glad to hear that! 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. :)
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!
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!
Thank you so much for this video. Therefore I become the 1000th subscriber !
Thank you! :)
Can you share the plugins you have used in your app? especially the auto populate part for tailwind and laravel related code.
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. :)
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/)
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!
Which terminal app are you using in this video?
This is the “Warp” terminal app. ☺️
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!
I subscribed because of your voice
Thank you ha! :)
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?
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 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!
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
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! :)
whats the name font in your vs code bro ?
awesomeee josh thank 🎉
Glad you liked it! :)
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! :)
i try use the filamentphp as full stack but the problem bad performance
another great tut and saved in my fav playlist
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
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!
Maybe it's just me, why does the livewire website take long to load or navigate?
Interesting. All good on my end!
what’s that note app you were using
This is actually the "notes" section built into the Arc browser. :)
Laravel My favourite Framework
Really?! Mine too. 😇
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.
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.
can we just focus on the "stink stank STUNK" for a moment.
moooooreee tall episode
I'm glad you like it. 😊
@@joshcirre extension name for terminal suggestions like ai
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
Love the video. What’s the font on your IDE
This is Dank Mono! Paid, but worth it (to me).
@@joshcirrewhat about theme?
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 🤝
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
Can u tell me u r browser and how i customize like that
This is the Arc browser. :)
LESGOOOOOOO DUDE
How do you rate limit Laravel live wire calls ?
So Laravel has it's own rate limiter that you can then use in Livewire methods.
laravel.com/docs/10.x/rate-limiting
@@joshcirre Thank you!
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: ua-cam.com/video/XLqEfQcog84/v-deo.html
hello sir can u help me to learn how to give permissions to the users as per their roles in laravel livewire please
Hi there! You would do this with Laravel's Gate and Policies like we implemented, but if you wanted to give different roles to different users in an easier format than doing it all manually within the Policy, then Spatie's laravel-permissions is a fantastic package to help with this.
In Livewire, nothing would change because you can still authorize like we do in the Policy section.
@@joshcirre thanks a lot 😇
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 !
How make clean browser ?
This is the Arc browser. I love it, especially for screencasts. :)
🤩🤩🤩🤩🤩🤩
Please if you can please create one with jetstream
Hello, I really enjoyed your tutorial. However, something that bothered me a bit throughout was the impression that you were whispering when speaking. It made it a bit difficult for me to follow along effectively.
Sorry about that! I recorded most of this while my daughters were asleep. I’ll make sure to adjust for future tutorials. ☺️