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 projectcd projectcomposer require laravel/breeze --devphp artisan breeze:install
That's it, we have default Laravel Breeze installed:
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!
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.
if you run npm run dev in your Git Bash it will keep running in tell you Shift C to stop it.