Build a Livewire CSV Importer
Playing
02. Fresh app and design

Episodes

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

Transcript

00:00
Okay so we're going to get started with a fresh Laravel app if you're following along, we're also going to go ahead and pull in Laravel Breeze as our starter kit just so we have
00:09
authentication and everything we need, we're of course going to install Livewire and we're also going to be pulling across the template that we're going to need for our CSV importer and I'll walk you through that as well so we can just familiarize ourselves with it. Okay so let's just get started with our fresh project so I'm going to call this
00:30
Livewire import and we're just going to run that. Okay so that's been downloaded and I've just opened that up, the first thing that we're going to do is just head over to our env file and we're going to scroll down here to our database connection settings, let's just switch these over to what I have here and we also need to create the database as well which I've already
00:51
done so we're going to go ahead and just add all of our details just so we can get these migrations running, if we head over here you can see that I've already got the database created, of course it's completely empty but once we've switched over our credentials we can go ahead and run php artisan migrate and we should be good to run the default migrations and give us
01:09
everything that we need there. Great so next step is just going ahead and running this so let's run php artisan serve, that's pretty much all we need for that and we'll open up another tab so we can run any other commands, give this a refresh and there we go we have our fresh laravel app. So let's put in our starter kit here we're going to use laravel breeze just really really simple
01:29
authentication and some other features that we might need so we're going to run the composer command for that and once that's done if we just come down here we can go ahead and run the breeze install command which is going to build everything for us so let's go ahead and run that that's going to scaffold everything out and we're going to go ahead and run npm install and npm run dev just to
01:52
compile everything. Okay that's all done we've got vite working here and if we just head over and give this a refresh hit register we should be able to register an account so let's go ahead and just do that now just so we've got that in the database and we're authenticated then we'll go ahead and give livewire an install and check that everything's working nicely so we've got this dashboard page at
02:14
the moment that's not what we're going to be using but we'll create out this livewire component with the starter template for the csv importer and we'll just stick it on the dashboard just so we can see it's working and then we can shift it around a little bit later so the last thing really to do then is just install livewire so very very simple we're just going to run the composer
02:34
command for this i'm going to open up a new tab here just so i can let vite build this for me and once we've done that we just want to pull in the livewire styles and the livewire scripts so the livewire styles are going to go in the head of our app so we can come over to app.blade.php under views and layouts and we can stick them just in the top down here and we can go ahead and pull
02:57
the scripts in and we're going to put them at the very bottom just before the closing body so if we just head over to our app now livewire is technically installed we don't see anything at the moment haven't got anything in the console but we can start by building out our csv importer component so to do this we're going to go ahead and run php artisan livewire make and let's call
03:18
this csv importer makes sense and let's go and find out where these live if you're new to livewire so under app and http you'll find a livewire directory this is the main class for our livewire component will of course be adding to this a little bit later and the view is just pretty much where you'd expect it under the views section just here under livewire and csv importer so we
03:43
can actually test that this works by heading over to the dashboard.blade.php file let's find that and let's come down in here and add this component in to this page so we're just going to prefix this tag with livewire and we're going to say csv importer and just end that off so that's going to pull in that component for us of course at the moment we don't see anything but if we head over
04:06
to that blade file for that livewire component and just say hello come over give that a refresh it should have refreshed for us we've got hello in there working nicely great so now what we're going to do is pull over the code for the csv importer so i'm going to go ahead and just paste all of this in you'll find this in the course resources if you want to go ahead and grab it there's quite
04:28
a bit going on here let's just preview this over here first of all you can see it looks very similar to the introduction minus the fact that it doesn't actually work and that's pretty much it so let's just go through this really really quickly we've got this sort of top import header which isn't really useful the bit that we are going to focus on is the close panel because we need to be able
04:49
to click that to close this panel off and we'll be dealing with that later just down here we've got this file drop section now if you come up to the top here notice that the form starts here so if we just collapse that's pretty much all of it here inside of this wrapper so the whole form is this pretty much entire element and if we come down here to this file drop we should have a label
05:11
which is hooked up to an input here so when we click on upload a file here or we drag and drop something we'll be able to hook that up nicely and if we just come down here we've got this validation error which of course is going to need to appear only when there's a problem with the file further down here if we have a file upload so this is where we're going to be adding the if
05:31
statement to this we're then going to show the match columns after we've read the csv and got the columns from there and then we're going to iterate through each of the columns and show this portion of code here which is pretty much just a wrapper with a label inside and a select drop down which maps up to the columns in the csv based on our database as well again just
05:53
down here we've got a validation error and that's pretty much it we are going to be building out another component which is the file progress or the import progress component but we'll get to that a little bit later and we might even build that one out from scratch but that's pretty much our csv importer component we're not going to use this on the dashboard so if we just come over to
06:12
the dashboard page here and get rid of this we'll of course be pulling this into the customers page or any other page that you want to enable imports for so there we go we've got our app set up ready to go we've got the design in there we roughly know what that looks like so now we can start building this out

Episode summary

In this episode, we kick things off by setting up a brand new Laravel app. If you're following along, you'll see exactly how to get started from scratch. We pull in Laravel Breeze to take care of authentication (much easier than wiring it up ourselves!), and then get everything talking to the database so our migrations can run smoothly.

Once the app is up and running, we pull in Livewire, which we'll use to build out our CSV importer. I walk you through adding the Livewire scripts and styles to your layout, and then we scaffold our first Livewire component. You'll see how to hook that component up so it displays right on the dashboard—super useful for testing things out quickly.

After that, we bring in the starter template for our CSV importer UI. I run through the structure of the Blade file, including how uploading will work, where validation happens, and how we'll eventually show the imported CSV columns for mapping. There’s a sneak peek at a "progress" component we’ll build out later. At the end, we tidy things up and talk about where this importer will actually be used (hint: not on the dashboard!).

By the end of this episode, you'll have a fresh Laravel app with authentication, Livewire wired up, and the design/template for your CSV importer ready and waiting. Next up: building out the CSV import functionality for real!

Episode discussion

No comments, yet. Be the first!