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.
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 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 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. :)
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.
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!
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.
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?
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. :)
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.
Hey Josh, I don't usually comment on RU-vid 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 ✌
bro u just stop of typing and delete and chat all the times you increase the time of the video with 2h , i increase the speed with 25% and you still talk normal
Mostly to show that it's possible. But largely because the notes are public. You don't want just anyone browsing a note that was meant for someone close to you.
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?
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.
Because odds are if you're following this tutorial and using Linux you probably have an opinion on how you want to run local development. But I'm glad my joke didn't land. 😂
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 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. ☺️
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!
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! 🤯
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
@@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 !
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. ☺️
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
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.
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 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.
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
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.
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
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. :)
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. ☺️
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. :)
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. ☺️
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-XLqEfQcog84.html
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/)
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. :)
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
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.
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.
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
Using Livewire Volt specifically, there isn't really a need for controllers anymore. All of that logic is instead moved to the Volt components. But MVC stands for Model, View, Controller. :)
