Laravel Breeze with Inertia and React

lokman musliu
Lokman Musliu

April 30, 2021 · 3 min read · 4,506 views

Laravel Breeze and React Blogpost Image

Navigating Laravel Starter Kits for Efficient Project Scaffolding

When embarking on a new Laravel project, leveraging starter kits can be instrumental in accelerating the development process. Laravel offers two official starter kits, each with its own set of features designed to cater to different project requirements.

Jetstream: The Feature-Rich Starter Kit

Jetstream is Laravel's comprehensive starter kit, equipped with a suite of functionalities to jumpstart your application. It includes essential features such as login, registration, email verification, and two-factor authentication. Additionally, it provides robust session management and API support through Laravel Sanctum. For those building collaborative platforms, Jetstream offers an optional team management feature. You can find more information in the official Jetstream documentation.

Breeze: The Lightweight Authentication Solution

For developers seeking a more streamlined approach, Laravel Breeze offers a focused set of authentication features. It covers the basics like login, registration, password reset, email verification, and password confirmation. Breeze is the go-to choice for simplicity and ease of use, as detailed in the Breeze documentation.

Understanding Inertia's Role in Laravel Starter Kits

Both Jetstream and Breeze support Blade and Inertia views, catering to different front-end preferences. However, it's important to note that Inertia's integration in these starter kits is currently limited to Vue.js support. At Lucky Media, we predominantly utilize Breeze for our internal projects, pairing it with React to capitalize on Inertia's ability to provide a single-page application (SPA) experience.

A Tailored React Package for Laravel Breeze

The repetitive task of converting Vue components to React with each new Laravel Breeze project prompted us to create a solution. We developed a custom package that is essentially a fork of Laravel Breeze, with a key modification: we've stripped away the default Blade views. Our package, by default, installs the Inertia package with React components, streamlining the setup process for React developers.

This custom React package for Laravel Breeze simplifies the initial setup for our projects and could be a valuable asset to any development team looking to work with Laravel and React in tandem.

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 🚀

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

lokman musliu
Lokman Musliu

Founder and CEO of Lucky Media

Technologies:

Laravel
Inertia
React
Heading Pattern

Related Posts

Stay up to date

Be updated with all news, products and tips we share!