Understanding Laravel Starter Kits

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).

The Limitations of Inertia with Laravel Starter Kits

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.

Introducing Our Custom Package

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.

Getting Started with Our Package

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.

Finalizing the Installation

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.

Contributing to Our Package

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.

Bring Your Ideas to Life 🚀

Accelerate Your Business with a Top Laravel Development Agency

If you need help with a Laravel project let's get in touch.

Lucky Media is proud to be recognized as a Top Laravel Development Agency by Clutch, a leading B2B ratings and reviews platform.

Our Services and Specializations

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.

Case Studies: Our Work in Action

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.

Laravel Breeze with Inertia and React