I recently posted a video on X where I set up a Laravel + React project with authentication and a user profile page in less than a minute! I thought it would be helpful to share a written version for anyone who prefers following along with a detailed guide.
In this guide, I'll show you how to quickly set up a new Laravel project with a React frontend and built-in authentication, all using Laravel Breeze. We'll have a functional user panel with profile editing in just a few steps.
Why Laravel?
Laravel is a popular PHP framework used for building modern web applications. It's gaining traction quickly, in fact, in September 2024, Accel announced a $57 million investment in Laravel.
According to the official site, Laravel is "The PHP Framework for Web Artisans," and it truly lives up to that description.
I won’t spend too much time on what Laravel is, there's a ton of information available on its official website and documentation. Instead, let's get right to setting up your project.
Project setup
Tech Stack
We’ll use:
Laravel (for backend APIs)
SQLite which is the default database for Laravel projects (though you can switch to another database easily)
React for the frontend (with Inertia.js)
Laravel Breeze to handle authentication and user management
Requirements
To follow this guide, make sure you have:
PHP 8 (preferably 8.3)
Composer
Node.js (v21)
Ready? Let's get started!
Step 1: Create a New Laravel Project
First, use Composer to create a new Laravel project:
composer create-project laravel/laravel laravel-project
This will create a new directory with the default Laravel setup. Move into the project directory and serve the application:
cd laravel-project
php artisan serve
If you visit http://localhost:8000, you'll see the Laravel welcome page.
Congratulations, you’ve created your first Laravel project! ✅
By default, Laravel uses an SQLite database, which has already been set up for you. You can find the database file at database/database.sqlite.
Step 2: Install Laravel Breeze
Next, we'll add Laravel Breeze, which provides a minimal implementation of authentication, including:
Login
Registration
Password Reset
Email Verification
Password Confirmation
Additionally, Breeze includes a simple profile page where users can update their information.
Add Breeze package by running:
composer require laravel/breeze --dev
Now, install Breeze into your project:
php artisan breeze:install
During installation, Breeze will prompt you for a few options:
-
I choose React for the frontend, but there are a few alternatives:
- Blade
- Livewire
- Vue
- API only
Optionally, you can enable Dark mode, Server-Side Rendering (SSR), Typescript, and ESLint.
When asked about a testing framework, you can choose between Pest or PHPUnit. I'll be using Pest.
Once the process is complete, Breeze will have added everything you need for authentication and user management.
It's done! 🎉
Step 3: Run Your Application
Now that Breeze is set up your application is ready and you can run it again:
php artisan serve
Visit http://localhost:8000/register to create a new user.
You'll start with an empty dashboard and can navigate to your profile page to edit your user details and update your password.
The data are already stored in your SQLite database, and your app is essentially ready to be deployed!
Conclusion
By following these steps, you've successfully bootstrapped a full-stack web application using Laravel and React, complete with authentication and a user profile management system.
Breeze gives you a great starting point, but from here you can focus on adding custom business logic, improving UI/UX, or integrating third-party services, all while standing on the shoulders of Laravel’s ecosystem.
Top comments (0)