The Complete TALL Stack Tutorial - FROM NOTHING TO PROD (Tailwind, Alpine, Laravel, Livewire & More)
Vložit
- čas přidán 19. 06. 2024
- I put a lot of time and effort into crafting a video that shows off some of the fantastic developer experience that comes with building in the TALL stack. I hope you find value in it. :)
**WITH THE UPDATED WIREUI PACKAGE, YOU WILL HAVE TO UPDATE COMPONENTS FOR MODAL AS WELL AS DROPDOWN TO WUI-DROPDOWN/WUI-MODAL. FOLLOWING INSTRUCTIONS FROM THE WIREUI DOCUMENTATION SHOULD WORK GREAT FOR INSTALL.**
Help me choose my next video:
cir.re/suggest
Links:
Github Repo: github.com/joshcirre/sendnotes
Deployed Site: sendnotes.fly.dev
Laravel: laravel.com
Livewire: livewire.laravel.com/
TailwindCSS: tailwindcss.com/
AlpineJS: alpinejs.dev/
WireUI: v1.wireui.dev/
Fly.io: fly.io/
Postmark: postmark.com/
Chapters:
00:00:00 - Introduction and Stack Setup
00:07:53 - Setting up the Development Environment
00:16:46 - Setting up the Application
00:25:49 - Creating an Application Structure
00:34:29 - Creating the Notes Table
00:44:00 - Modifying the Database
00:52:45 - Implementing Live Wire in Laravel
01:02:17 - Creating a Landing Page with Improved Design and Button
01:12:14 - Running PHP Code in Laravel
01:23:04 - Setting up the UI
01:33:07 - Adding a recipient to the notes table
01:42:02 - Wiring up the front end
01:50:54 - Creating a note
02:00:43 - Deleting a Note
02:10:03 - Creating Policies for User Actions
02:19:01 - Mounting the Note and Initializing the Note
02:28:31 - Building the Form
02:38:17 - Using Laravel Breeze's Action Component
02:48:08 - Fixing Date Format and Creating a Public View of a Note
02:58:12 - Generating the Note Interface and Functionality
03:07:34 - Setting up Scheduled Notes Emails
03:16:58 - Setting up Scheduled Notes in Production
03:26:28 - Limiting Edit Accessibility Based on Date
03:36:15 - Comment, Like, and Subscribe to Support
for the algo:
laravel, laravel livewire tutorials, laravel and livewire project,laravel and livewire tutorial,laravel livewire, alpine laravel, learn laravel framework ,laravel how to, learn laravel 10, livewire tutorial, laravel application development, tall stack, tailwind stack, livewire events, flydotio, laravel sending emails, laravel full tutorial, laravel basic tutorial, laravel crud tutorial, laravel crud, livewire stack, laravel tutorial for beginners step by step, laravel volt, livewire volt - Hudba
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 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.
Yessss! I've been waiting for this! You're awesome!
Thx for the effort sir...May you get blessed by the algorithm
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 👌👌
Thank you for making this video, this is what I have been looking for the last 2 months.
That means a lot. Thank you! 😊
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. :)
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 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! 🤯
My god, 20 minutes of setting up tooling and third party services before even writing any code. Modern web development is soul crushing.
Thank you for creating such a comprehensive video, by the way.
Well, I think the 20 minutes is a little bit of a smoking gun the next time you work in the TALL stack.
I wanted to just show that if you have never worked in the TALL stack or Laravel before, how can you get up and running.
That being said, I’ll add a note in the description for when to start writing THIS PROJECT specific code. ☺️
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! ☺️
I love your channel is like watch asmr but learning and evangelizing with laravel
Best comment. 🥰
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.
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 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.
man you deserve much more subscribers, I love your channel
I appreciate that! I'm gonna keep working hard to get there. :)
Awesome job man, have learned a lot!
So glad to hear that! Thank you!
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!
another great tut and saved in my fav playlist
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, that way we could actually learn
Thank you, Josh! ♥
Thank YOU!
awesomeee josh thank 🎉
Glad you liked it! :)
best channel for laravel developers.....
Thank you so much for the incredibly kind words!
4:16 I'm on Linux, thanks buddy, I felt like a genius or something :D
Thank you so much for this video. Therefore I become the 1000th subscriber !
Thank you! :)
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.
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
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!
LESGOOOOOOO DUDE
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. :)
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.
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! :)
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!
Nice tutorial!, just one question, which font do you use in your vscode?
This is Dank Mono. One of my favorites! ☺️
can we just focus on the "stink stank STUNK" for a moment.
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 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 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
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!
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
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.
moooooreee tall episode
I'm glad you like it. 😊
@@joshcirre extension name for terminal suggestions like ai
Love the video. What’s the font on your IDE
This is Dank Mono! Paid, but worth it (to me).
@@joshcirrewhat about theme?
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
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!
Which terminal app are you using in this video?
This is the “Warp” terminal app. ☺️
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.
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.
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?
🤩🤩🤩🤩🤩🤩
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
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! :)
Laravel My favourite Framework
Really?! Mine too. 😇
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
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.
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 🤝
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: czcams.com/video/XLqEfQcog84/video.html
Please if you can please create one with jetstream
How make clean browser ?
This is the Arc browser. I love it, especially for screencasts. :)
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 !
Maybe it's just me, why does the livewire website take long to load or navigate?
Interesting. All good on my end!
i hope if you can make your video 60Fps
MVC ??
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. :)
Hi!
Please re-upload. Just 360p option for resolution 😂
I was happy the first time I saw the video until i see this comment 🤣🤣
i have 1080p resolution available
Looks like it just took CZcams a bit to catch up! The downsides of being too early. 😂
It seems that when the video finishes uploading, CZcams is still rendering FHD resolution 😜😅
Thank you bro @joshcirre 👍🏻
HTMX?
I need to play around with HTMX more but within Laravel, I think Livewire fills that spot! :)
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. ☺️
What about VILT?
I am not a Vue master (yet), but I think that there is a lot of potential and power in using the VILT or LIRT stack. :)
I would also check out Hybridly (hybridly.dev) if you are a Vue fan.