Converting a NextJS App to Laravel Livewire
ฝัง
- เผยแพร่เมื่อ 21 ต.ค. 2024
- You might be surprised to learn that I think React Server Actions and React Server Components are a step in the right direction. In fact, I think it means there's even less of a learning curve if you're wanting to jump into Laravel because Laravel Livewire (specifically Volt) has a very similar DX feel to NextJS Server Actions and Server Components.
So, after I watched a video from @leerob showing off Server Actions and Server Components, I wanted to show what the same application might look like... in Laravel and Livewire.
Links:
Original Video: • The blazing fast emoji...
NextJS repo: github.com/rau...
Livewire repo: github.com/jos...
Keep creating.
---
📹 *Watch My VSCode Setup Video:* • My Minimal and Beautif...
🎓 *Make VSCode Awesome - Caleb Porzio's Course (support me with this link):* gumroad.com/a/...
Love your niche of guiding JS developers into Laravel!
Thanks Alex! Some people might think it would be weird not to get JS developers to use React / Vue in Laravel. I think there's some who like that idea, but even with Inertia it still seems too "separated" for people really leaning into stuff like RSC / Server Actions.
I think Livewire is a great bridge, even if there are syntax differences.
@@joshcirre not sure if you bringing them to the light or dark side yet 😅
Maybe both? 😁
@@codernerd7076 He's the guide to the promise land.
Yes I agree. Would love more of this content
Brilliant. Nice to see this as a comparison with nextjs. There is so much laravel has to offer by way of Auth out of the box. This makes life so much easier. More like this video will always be well received in my book. Thanks again
Thanks Jon! Especially for the encouragement and guidance. I'll try to make more like this one. :)
Django developer here and fascinating to see how SSR frameworks actually perfect for web development, those JS developers always doing web development in a wrong and hardest way.
Great video overall. Love the ideas at the end around rate limiting + deployment. The deployment journey especially could be facinating to show and lesrn more about.
It's also important to note that in the app thus far, no external dependencies have been generated. You own the DB, and the auth - at least locally so far. Now yes, in NextJS, you could have Lucia and a local DB, but the setup time likely would be far greater.
Good point! I actually did deploy on Laravel Forge with a Hetzner server so it's up and running live here:
emoji-todo.joshcirre.com
I should record how I set that up, but nothing really changed from the code itself. It "just works".
The rate limiting is something I need to dig in more on how to do this myself for this method without limiting the entire application. But once I do that, I think it would be a great "second" video. ☺️
Cool, thanks - the thing with authenticated User adding is so simple in Laravel - and also your approach in showing the easy path from next.js to Laravel 😀
It is crazy how easy authentication is huh? That's one of the main reasons I switched to using Laravel. And I'm glad that it was helpful for you. :)
can you make a video on how you made your vs code setup look like that? I really love the fonts, themes and how simply minimalistic it looks.
It's pretty well voted on my Suggest.gg (cir.re/suggest) so that might be coming up in the pipeline. 😁
@@joshcirreplease make it
Great content here!
Thank you! It seems like there are a lot of people who agree too. I'll have to do more of these! ☺️
I am in the inertia side, but like your video to attract js devs to laravel ecosystems
Thank you! I love Inertia too, but I definitely am quicker in the Livewire land. :)
Espectacular, gracias!
Thank you! ☺️
I'm still waiting for the video about how you styled your vscode 🤣
It's coming! 😅
Dumb question, what if you want them to transition in nicely ie one slides down top one fades in. Svelte has an in/out option you can apply based on a boolean. Is there something similar to this approach?
Great question! Livewire does have built in Animation that has some basic parameters. livewire.laravel.com/docs/wire-transition
But additionally, things like AutoAnimate is a great option with minimal setup.
Unfortunately looks like this use case doesn't work with Livewire.
"There is currently no way to transition dynamic lists in Livewire using wire:transition."
Awesome ❤
Thank you! I'm glad you found it helpful. ☺️
Great share Josh!
Thank you. I appreciate you watching. ☺️
What's the package of icons of your vscode?
This is the Catppuccin Frappé theme. ☺️
Am I crazy or are we hearing crickets in the background ahah?
Great video otherwise.
Makes me want to try to build projects with Laravel
You are probably not crazy. The downsides of recording in my garage. 😂
18:35 this is not actually 100% true, or you just worded it a bit wrong. Any HTML button element inside a form without explicit "type" is actually a "submit" type by default. This means you can have multiple submit buttons inside a form, not just a single one. Not sure why would you require multiple buttons, but it's possible to do.
One neat trick as well is that you can actually bind buttons outside a form to be the submit button for a particular form. Set "id" attribute on the form element and then put the value of that id inside "form" attribute on a button that lives outside that form. That way that button will be associated with the form and actually trigger form's submit event even though it's placed outside the form. Found this quite useful in many situations like modals where submit button might be located in the footer of the modal, but actual form is in the body of the modal and not wrapping the button in any way. It uses native HTML and doesn't require me to bind click handlers to that button manually.
Great video, loved this comparison.
Thanks for teaching me something. Seriously! I didn't know about the buttons outside of the form or that a button without a type is "submit" but default. I guess I've always added type="submit" to my buttons. 😂
That's awesome. And Thank You for watching. That means a lot. ☺️
@@joshcirre No problem, we are all here to learn. To be honest I think adding explicit type="submit" might not be a bad idea to convey intent in clear way. I usually like explicit code if it's not ridiculously verbose and I think this is not.
Thanks. The nextjs version loads a custom font.
You're right. Good catch! Fairly easy to do with Laravel as well, even if you didn't want to load it via URL.
Salvation!
Premium content ❤
Thank you. 😊
Your content is great but not a fan of the green screen. It's distracting and I notice I quit watching almost immediately. Which is a shame.
Thanks for the feedback. I’d rather record and publish as many videos as I can even if I’m not in my default “studio”.
I record these ones in my garage. :)