Practical Livewire: Order Management System Step-by-Step

Prepare Laravel Project

First, before starting to implement all features, we need to create a Laravel project, install Laravel Breeze for quick authentication scaffolding, and Livewire for dynamic interfaces.

laravel new project
cd project
composer require laravel/breeze --dev
php artisan breeze:install

That's it, we have default Laravel Breeze installed:

default breeze register page

Next, we will install Livewire.

composer require livewire/livewire

Add the following Blade directives in the head tag, and before the end body tag in the resources/views/layouts/app.blade.php file.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<body class="font-sans antialiased">

That's it for the preparation quick start, now we're ready to create our Livewire components, in the next lesson!


After installing Breeze (php artisan breeze:install) don't forget to

php artisan migrate

npm install

npm run dev

to build assets


From what I remember, recent Breeze version(s) do that for you automatically.


yes, but I have to keep "npm run dev" running or run "npm run build" after creating each component to have the full css. Am I missing something?


Yes, you're right, Breeze will do the first build for you. For the future changes, yes, you would need to keep "npm run dev" or run "npm run build" every time.

👍 5

if you run npm run dev in your Git Bash it will keep running in tell you Shift C to stop it.


Should it work following along on a Jetstream+Livewire installation instead of a Breeze+Livewire one?


There moght be some differences but the main logoc should work.

👍 1

Thanks, I'll give it a try then! (since it's Tailwind...)