Laravel Breeze define it in the official documentation as:
"Laravel Breeze is a minimal and simple implementation of all of Laravel’s authentication features, including login, registration, password reset, email verification, and password confirmation. Laravel’s default view layer Breeze is made up of simple Blade views designed with Tailwind CSS.”
And in a few words, it offers us two configurations at the project level:
- Install and configure Tailwind.css and Alpine.js.
- Install and configure a simple authentication scheme, login, password recovery and middleware for access control.
It is important to note that it is not the objective of the book to learn Tailwind.css or Alpine.js, therefore, it is assumed that the reader has some knowledge about them; we will try to use these technologies in a simple way, but if you get lost at some point, as a general recommendation, you can pause the chapter and study these technologies a bit; on my YouTube channel you will find introductions to these technologies.
The page of the package that we are going to install is at:
https://laravel.com/docs/master/starter-kits
To be able to install it:
$ composer require laravel/breeze --dev
And we run:
$ php artisan breeze:install
It will ask which stack we want to use; if you have experience you can select any of the technologies like vue or react:
Which Breeze stack would you like to install?
Blade with Alpine ........................................ blade
Livewire (Volt Class API) with Alpine ........................... livewire
Livewire (Volt Functional API) with Alpine .................................... livewire-functional
React with Inertia ......................................... react
Vue with Inertia ................................................. vue
API only .................................................. api
But, if you don't have experience, i recommended that you use the "blade" option:
$ blade
You can enable dark mode:
Would you like to install dark mode support?
(yes/no) [no]
Indicating "yes":
$ yes
Among other options, such as unit tests, that would not be necessary:
Would you prefer Pest tests instead of PHPUnit?
(yes/no) [no]
Indicating "no":
$ no
And you wait until the process is finished:
INFO Installing and building Node dependencies.
If you see an error like the following:
failed to load config from C:\laragon\www\testlara11\vite.config.js
error when starting dev server:
Error: Cannot find module 'node:path'
Require stack:
- C:\laragon\www\testlara11\node_modules\vite\dist\node-cjs\publicUtils.cjs
- C:\laragon\www\testlara11\node_modules\vite\index.cjs
- C:\laragon\www\testlara11\vite.config.js
It means that you have a very old version of Node; you can know your version of Node with:
$ node -v
If you see a version similar to or lower than this:
v14.16.1
In the book, we are using:
$ node -v
v18.8.0
You must update your version; then you can run:
$ npm run dev
In the case of using Laravel Sail and not having Node installed on your computer:
$ ./vendor/bin/sail npm run dev
Finally, we will see that our route scheme is overwritten in:
Route::get('/dashboard', function () {
return view('dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');
And remember to put the overwritten routes back:
use App\Http\Controllers\Dashboard\CategoryController;
use App\Http\Controllers\Dashboard\PostController;
***
Route::group(['prefix' => 'dashboard'], function () {
Route::resources([
'post' => PostController::class,
'category' => CategoryController::class,
]);
});
If we review the generated files in the resources folder, we will see:
resources\css\app.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
resources\js\app.js
import './bootstrap';
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
Breeze configured Tailwind.css and Alpine.js in our project with the corresponding imports for that purpose.
Finally, the npm run dev command generates the output files and launches a Hot Reload Replacement process that allows us to synchronize the changes we make in the source code with what we are seeing in the browser.
Authentication system
Apart from the Tailwind and Alpine configuration, Laravel Breeze configures a simple authentication scheme that we are going to use next.
If we go to:
http://larafirststeps.test/login
We will see the following screen:
A login page, but we need to create a user:
http://larafirststeps.test/register
Let’s create some:
And if we go to the database:
By default we already start login; and as you can see, we already have a nice layout ready for our application; in the project:
You will see some view files that Laravel Breeze already generated for us:
I recommend that you give it a good review, and you will see all the options we have; register, login, recover password and close session:
- Andrés Cruz
This material is part of my complete course and book; You can purchase them from the books and/or courses section, Curso y Libro Laravel 11 con Tailwind Vue 3, introducción a Jetstream Livewire e Inerta desde cero - 2024.
![Andrés Cruz Andrés Cruz](/public/images/perfil.jpg)
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter