Using Breeze in Laravel: A Step-by-Step Guide

Using Breeze in Laravel - A Step-by-Step Guide
Share this:

How to install Breeze in Laravel? How to create a new project using breeze? How to add breeze to existing projects? What is breeze? Why should I use breeze?

Breeze is a lightweight library for creating RESTful APIs in PHP. It provides a simple way to build web services without writing boilerplate code.

You can use breeze to easily expose data from your database or other sources to your clients. In addition, you can also use breeze to interact with external systems such as Google Maps API, Facebook Graph API, Twitter API, etc.

Load WordPress Sites in as fast as 37ms!

So let’s go through the steps.

Steps on Using Breeze in Laravel

  • Step 1: Installing Laravel Application
  • Step 2: Database Configuration and Migration
  • Step 3: Installing Breeze
  • Step 4: Breeze & React / Vue
  • Step 5: Breeze Authentication Controllers
  • Step 6: Breeze Authentication Routes
  • Step 7: Breeze Authentication Views
  • Step 8: Testing

Step 1: Installing Laravel Application

Firstly, we are going to install a laravel application. To install a laravel application run the following command in terminal.

composer create-project laravel/laravel laravel-breeze

“laravel-breeze” is our project name.

Installing Laravel Application
Installing Laravel Application

Read Installing Laravel on Windows 10: A Beginner’s Guide Article to installing laravel on windows 10 localhost.

Step 2: Database Configuration and Migration

Now we are going to configure laravel database and run the migration. First, configure laravel database by opening .env file and edit the details for database.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel-breeze
DB_USERNAME=root
DB_PASSWORD=

After you configure the laravel database. Its time to run the migration by running the following command in terminal.

php artisan migrate

The above command will create a default tables to your database for you laravel application.

Database Configuration and Migration

Step 3: Installing Breeze

Then we are going to install Breeze using composer to our laravel application. Use the following command in terminal to install Breeze.

composer require laravel/breeze --dev
Installing Breeze

Once Breeze is installed, you may scaffold your application using one of the Breeze “stacks” discussed in the documentation below.

After Composer has installed the Laravel Breeze package, you may run the breeze:install Artisan command. This command publishes the authentication views, routes, controllers, and other resources to your application. Laravel Breeze publishes all of its code to your application so that you have full control and visibility over its features and implementation.

The default Breeze “stack” is the Blade stack, which utilizes simple Blade templates to render your application’s frontend. The Blade stack may be installed by invoking the breeze:install command with no other additional arguments. After Breeze’s scaffolding is installed, you should also compile your application’s frontend assets:

php artisan breeze:install
 
php artisan migrate
npm install
npm run dev

If you would like Breeze to include “dark mode” support when scaffolding your application’s frontend, simply provide the –dark directive when executing the breeze:install command:

php artisan breeze:install --dark
Installing Breeze
Installing Breeze
Installing Breeze
Installing Breeze

Next, you may navigate to your application’s /login or /register URLs in your web browser. All of Breeze’s routes are defined within the routes/auth.php file.

Step 4: Breeze & React / Vue

Laravel Breeze also offers React and Vue scaffolding via an Inertia frontend implementation. Inertia allows you to build modern, single-page React and Vue applications using classic server-side routing and controllers.

Inertia lets you enjoy the frontend power of React and Vue combined with the incredible backend productivity of Laravel and lightning-fast Vite compilation. To use an Inertia stack, specify vue or react as your desired stack when executing the breeze:install Artisan command. After Breeze’s scaffolding is installed, you should also compile your application’s frontend assets:

php artisan breeze:install vue
 
# Or...
 
php artisan breeze:install react
 
php artisan migrate
npm install
npm run dev

Next, you may navigate to your application’s /login or /register URLs in your web browser. All of Breeze’s routes are defined within the routes/auth.php file.

Step 5: Breeze Authentication Controllers

You can find Breeze Authentication Controllers path as show bellow.

Breeze Authentication Controllers
Breeze Authentication Controllers

Step 6: Breeze Authentication Routes

You can find Breeze Authentication Routes path as show bellow.

Breeze Authentication Routes
Breeze Authentication Routes

Step 7: Breeze Authentication Views

You can find Breeze Authentication Views path as show bellow.

Breeze Authentication Views
Breeze Authentication Views

Step 8: Testing

Finally, we had installed Breeze in Laravel. Its time to test our application. We are going to start the artisan development server by following command.

php artisan serve

also we are going to start our Vite by running the following command in new terminal.

npm run dev

Once we had started the Artisan development server and Vite, we can access our application by entering the following url in web browser.

http://127.0.0.1:8000/
Breeze - Homepage
Breeze – Homepage
Breeze - Register Page
Breeze – Register Page
Breeze - Login Page
Breeze – Login Page
Breeze - Dashboard
Breeze – Dashboard
Breeze - Profile Page
Breeze – Profile Page

Conclusion

This concludes our tutorial on Using Breeze in Laravel: A Step-by-Step Guide. We hope you found it helpful. If you did, please share this article with your friends or family and leave us a comment to let us know what you think and stay tuned for more tutorials. If you like the tutorial please subscribe our youtube channel and follow us on social network facebook and instagram.

Load WordPress Sites in as fast as 37ms!
Share this:

Leave a Reply