Courses

Practical Livewire: Order Management System Step-by-Step

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()) }}">
    <head>
        //
        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        @livewireStyles 
    </head>
    <body class="font-sans antialiased">
        //
        @livewireScripts 
    </body>
</html>

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

Next Lesson: Register Password Show/Hide/Strength
Login or register to comment or ask questions
avatar
asequeira

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

php artisan migrate

npm install

npm run dev

to build assets

avatar
Povilas Korop

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

avatar
asequeira

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?

avatar
Povilas Korop

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
avatar
Richard A. Hoyle

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