Laravel Breeze with Inertia and React

Laravel Breeze with Inertia and React

Published: April 30, 2021

Updated: August 17, 2021

laravel

breeze

react

inertia

When scaffolding a new Laravel project, in a lot of cases it's important to get a head start with starter kits. Laravel officially provides 2 types of starter kits. One of them is Jetstream which is packed with features like login, registration, email verification, two-factor authentication, session management, API support via Laravel Sanctum, and optional team management (Docs). The other one is Breeze which only has authentication features, including login, registration, password reset, email verification, and password confirmation (Docs).

Both starter kits come with Blade and Inertia views, but with Inertia only Vue is supported. Most of our internal projects use Breeze and we use React for most of our work coupled with Inertia to give the app the SPA feeling.

We got tired of manually switching the Vue components to React every-time we used Laravel Breeze so we decided to extract them as a new package.

Our package is just a fork of Laravel Breeze, but we removed the default blade views, and by default it installs only the Inertia package with React components.

To get started its very simple, we create a fresh Laravel installation with the following command:

composer create-project laravel/laravel breeze-demo

Once the project finishes the installation, we need to access the working directory:

cd breeze-demo

We require our package from Packagist with the following command:

composer require lucky-media/breeze-react --dev

The dev flag is required as this package is only used in Development.

Wait for the package to finish the installation process and then you can scaffold with the following command:

php artisan breeze:install

# After it has finished installing
# run the following command

npm install && npm run dev

Now if you did everything correctly, visit your website on http://breeze-demo.test. If you are using Valet you should see the Breeze app scaffolding, but instead of Vue you have React pre-packaged.

If you want to check the source code or you have an idea how we can improve this package, PR-s are welcomed in our official repo.