Installing Laravel Breeze and a Quick Walkthrough

Hello Everyone 👋

In this article, I'm going to install Laravel Breeze and take you in a very quick tour.

Laravel Breeze is a very 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 styled with Tailwind CSS. I already wrote about installing TailwindCSS in Laravel project and you can check out the article by clicking here.

This article works as a step by step guide with all the tiny details, so follow along for the best result 👇

1- Install Nodejs and npm:

• First thing you need to make sure that you have Node and npm installed on your machine.
• You can check that by opening up the terminal and type those two commands:

npm -v
node -v

• If you need to install them 🔗 DOCs for downloading Node and npm
• If you got that converged, move on 👇

2- Install Database Management Tool:

• I use free version of table plus to manage my databases.
• You can download it from here: https://tableplus.com/
• This really doesn't require any instructions, keep clicking next and leave everything to default settings.

3- Start your Laravel Project:

• I will use composer to create Laravel project.
• You can download composer from here: https://getcomposer.org/
• Open up your terminal and create your Laravel project in the desired directory.
• In my case, I'm just used to create my projects in htdocs folder and name it 'laravue'🤷‍♂️

PS C:\Users\Mostafa's PC> cd C:\xampp\htdocs\
PS C:\xampp\htdocs> composer create-project laravel/laravel laravue

4- Create a Database:

• I will use MySQL Database.
• There are many ways to do that, to know more you can visit this link.
• I will create a database using MySQL Command Line Client and name it laravue.

5- Connect to Database:

• Open your Laravel project in the preferred code editor, in my case I will use VS Code.
• Head to your env file in the main Laravel project directory.
• In the below section make sure to update all the info to match your created database.

• Open table plus -> click on 'Create new connection' -> MySQL.
• Fill in the fields with the info you just created.
• You can name the connection with anything you want.
• After filling the fields click test then connect.

6- Install Laravel Breeze:

• Run the below commands in order and insure that you leave them run till they finish.
• Make sure you run your commands in the project directory. In my case, htdocs\laravue.

7- NPM and migration:

• Now, lets run the below commands in the terminal which combines all JavaScript files into a browser-friendly combined file.
• It may take few minutes, depends on your machine's speed to process the action but you need to leave it till it finishes.
• Then make our migrations.

7- Finishing:

FINALLY we're done 🥳🥳

• If you go to the terminal and in your directory run (php artisan serve) command, you will see that you have a nav bar already to login and register the user and it's perfectly styled with tailwind.
  • Try it on registering a new user then run your migration again (php artisan migrate) then open table plus and have a look at your first user in database.
  • If you have a look at your routes in 'resources\web.php' you'll find the route for the dashboard that only logged in user can visit.
  • To have a clearer look you can head to 'resources\auth.php' and there you'll see that Laravel Breeze creates all the necessary routes for authentications.
  • Do you want to have a look on the login and register forms? head to 'resources\views\auth'.
  • Do you want to have a look on the logout form ? Head to 'resources\views\layouts\navigation.blade.php'.
  • Do you want to have a look on Auth controllers? Head to 'app\Http\Controllers\Auth'.

What's so beautiful about it is that you can see how Laravel team implemented the authentications and routes and you can change them if you like. Also you can change the design with tailwind CSS or even any other method you want.

In case you need a full walkthrough video about Laravel Breeze and how to use it properly in a project and get the best benefits out of it, please let me know in the comments and I will start working on it right away 🤓

Thank you all for reading this article. You can follow me on twitter Moose_Said

Comments

[Abraham Gumba]

Does this mean I need to run npm whenever I want to use Breeze?