This episode is for members only

Sign up to access "Build a File Marketplace with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
09. Installing Livewire

Episodes

0%
Your progress
  • Total: 3h 32m
  • Played: 0m
  • Remaining: 3h 32m
Join or sign in to track your progress

Transcript

00:00
We're going to be using Laravel Livewire for our forms, our product create and edit form. So if you are new, we're going to go ahead and just quickly get this installed now and talk a little bit about how this works. So if we head over to Livewire, we're going to head over to
00:13
the installation section and we're very quickly going to pull in the package here. Livewire is very, very quick to get installed and that's the first thing. Next, we need to include these assets. We're not going to use this syntax. We're going to use the tag syntax and we need to place this inside of our overall template, which we've already seen, which is app.blade.php under layouts.
00:34
So for the styles, we're going to put these at the top here. So let's just add, we can just add that down there. And then for the scripts, we're going to add that at the very bottom of our page down here, just before the closing body tag. And that's pretty much it to get Livewire set up. Now, what Livewire does is it will create out a blade style component for you,
00:56
but it will make this interactive via JavaScript and make requests, Ajax requests to your backend. So effectively, what we could do is when we get to our product create page, which we're going to build next, is have a form, but then just sprinkle in that functionality that we saw from the introduction. And Livewire makes this really nice to do. So it's just going to be a really simple
01:18
component that we put in, not building the entire app with Livewire. We're just using this to enhance a form, which includes things like file uploads, automatically generating that slug and all that good stuff. So Livewire is going to make this incredibly easy for us to do. So Livewire is now installed. We can test this out really quickly just to verify this is working by heading over
01:40
to the command line and using the Livewire make command. Let's just create a component called hello, and we won't start that just yet. Now, what this will do is if we head over to our views, this will create out a hello.blade.php file, which is the blade component that Livewire uses to render. So we'll just write hello in there for now. And what you'll also find is under your HTTP
02:05
section, this will have created the component in here for your Livewire component. So it's just a Livewire component. So what we can now do is use this anywhere on our app. So if we head over to dashboard.blade.php real quick and we go ahead and just get rid of this, we can output this hello component with Livewire hello. And if we head over to our dashboard, sure enough, we should be
02:29
able to see that component. Now, what we can do with this is start to sprinkle in any of that JavaScript style functionality into here and make this work really nicely. We're not going to do that with that hello component, so we can actually go ahead and delete this component. But if you can see that in your app and it's working, then you know that you've got Livewire installed correctly.
34 episodes3 hrs 32 mins

Overview

Build a marketplace where sellers can list and sell files, while we take a cut of each sale using Stripe Connect.

We'll cover onboarding users with Stripe Connect, creating products and uploading files, payments, and delivering purchased files to your customers.

Here's everything we'll cover:

  • The Stripe Connect onboarding flow
  • Effortlessly creating products (and uploading files) with Livewire forms
  • Subdomains for your user's marketplace
  • Stripe Checkout for a beautiful, secure payment flow
  • Securely delivering files with Signed URLs in Laravel
  • Showing sales stats on a dashboard
Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.