Laravel Breeze, generate an authentication system and configure Tailwind.css

Laravel Breeze is a great option for building a simple authentication scheme in a Laravel application; Laravel define this package 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 Breeze's default view layer is made up of simple Blade templates designed with Tailwind CSS.

Laravel Breeze is a basic authentication package that can be installed via composer; is a package developed exclusively for Laravel that allows you to easily add authentication functionality to a Laravel application. Breeze uses the Blade, Vue or React template to generate each of the visual screens and of course, the corresponding controllers to process the requests. When installing Breeze automatically, the application has modules for password recovery, email verification, login and registration, in addition, Breeze includes a profile page to update basic data of the authenticated user; and with a few changes, you can add a simple role system in the user module, this is a configuration we do in the entire course and book on Laravel.

Install and configure Laravel Breeze

In order to install it:

$ composer require laravel/breeze --dev

and we execute

$ 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 stack would you like to install?

  blade ............................................................... 0  
  react ............................................................... 1  
  vue ................................................................. 2  
  api ................................................................. 3

But, to start small, it is recommended that you use the "blade" option; so, you select the 0:

$ 0

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\testlara10\vite.config.js
error when starting dev server:
Error: Cannot find module 'node:path'
Require stack:
- C:\laragon\www\testlara10\node_modules\vite\dist\node-cjs\publicUtils.cjs
- C:\laragon\www\testlara10\node_modules\vite\index.cjs
- C:\laragon\www\testlara10\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 this post we are using:

$ node -v
v18.14.1

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 routing scheme is overwritten in:

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

And remember to put the overridden paths 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 corresponding imports for that purpose.

Finally, the npm run dev command generates the output files and starts a process for the Hot Reload Replacement that allows us to synchronize the changes we make in the source code with what we are seeing in the browser.