Published:April 30, 2021
Updated: November 15, 2023
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:
We require our package from Packagist with the following command:
composer require lucky-media/breeze-react --dev
dev flag is required as this package is only used in Development.
After it has finished installing, run 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 at
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.
If you need help with a Laravel project let's get in touch.
At Lucky Media, we offer a range of services including website development, web application development, and mobile apps development. We specialize in Statamic, React Native, Next.js, AI and ML solutions. We also provide staff augmentation and TALL stack development services.
For more insights into our work, check out our case studies on revolutionising lead generation with AI, customized coaching site, healthcare digitization, next-level performance, lead generation and patient journey, WordPress to Statamic migration, and improving user experience. These case studies provide a glimpse into how we tailor our technology choices to meet specific client needs and deliver exceptional results.
Stay up to date
Be updated with all news, products and tips we share!