Category: Laravel Breeze

In this React JS tutorial, we learn to install Laravel Breeze with React JS over Laravel Application. Laravel Breeze come equipped with out-of-the-box scaffolding for new Inertia applications, making them the quickest and easiest way to get your Inertia project off the ground with React Js.

For this post, we are using Laravel Breeze. This minimal implementation includes login, registration, password reset, email verification, password confirmation, and a basic “profile” page for updating user information.

Laravel Breeze comes equipped with simple Blade templates styled with Tailwind CSS. However, if you prefer to scaffold your application using React JS and Inertia JS, Laravel Breeze can do that too.

In addition to being an excellent starting point for a new Laravel project, Laravel Breeze is also a great choice for projects that want to elevate their Blade templates using Laravel Livewire.

Install laravel project and setup database

First install a fresh new Laravel application from the composer using the following command,

composer create-project laravel/laravel inertia-react

It will create the laravel project folder named inertia-react .

Now, you have to connect the laravel app to the database. Go inside this folder and open .env to change the database connection details as follows,

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_username
DB_PASSWORD=database_password

After changing the connection details, run all migrations for the project using the following command,

php artisan migrate

Install Laravel Breeze over Laravel

Once you ready with the Laravel installation, you can proceed with Laravel Breeze installation using Composer using the following command,

composer require laravel/breeze --dev

Once you’ve installed the Laravel Breeze package using Composer, it’s time to run the breeze:install Artisan command as follows,

php artisan breeze:install

This command will publish all the necessary authentication resources, including views, routes, controllers, and more, directly to your application.

Laravel Breeze publishes its code directly to your application, giving you complete control and visibility over its features and implementation. This allows you to easily customize and tailor the authentication experience to fit your unique needs.

If you want to use an Inertia stack with React JS in your Laravel Breeze application, simply specify “react” as your desired stack when running the breeze:install Artisan command as follows,

php artisan breeze:install -react

Once the scaffolding is installed, be sure to compile your application’s frontend assets to ensure proper functionality:

npm install && npm run dev

With the initial setup complete, it’s time to test your application’s authentication functionality. Simply navigate to the /login or /register URLs in your web browser to get started.

All of Laravel Breeze‘s routes are defined in the routes/auth.php file, making it easy to modify or customize the authentication routes as needed.