Laravel Breeze - React Edition build with Vite

Introduction

Laravel Breeze React is the implementation for react from breeze-next.

Laravel Breeze React is an implementation of the Laravel Breeze authentication template for React App. All of the authentication boilerplate is already written for you - powered by Laravel Sanctum, allowing you to quickly begin pairing your beautiful React frontend with a powerful Laravel backend.

Vite

Laravel Breeze React is now turbocharged with Vite for rapid compilation and efficient production builds. To know more about Vite check out this article.

Quick Start

Installation

First, create a React App compatible Laravel backend by installing Laravel Breeze into a fresh Laravel application and installing Breeze's API scaffolding:

# Create the Laravel application...
laravel new react-backend

cd react-backend

# Install Breeze and dependencies...
composer require laravel/breeze

php artisan breeze:install api

Next, ensure that your application's APP_URL and FRONTEND_URL environment variables are set to http://localhost:8000 and http://localhost:3000, respectively.

After defining the appropriate environment variables, you may serve the Laravel application using the serve Artisan command:

# Serve the application...
php artisan serve

Next, clone this repository and install its dependencies with yarn install or npm install. Then, copy the .env.example file to .env and supply the URL of your backend:

REACT_APP_BACKEND_URL=http://localhost:8000

Finally, run the application via yarn start. The application will be available at http://localhost:3000:

yarn start --host localhost --port 3000

Note: Currently, we recommend using localhost during local development of your backend and frontend to avoid CORS "Same-Origin" issues.

Authentication Hook

This Create React application contains a custom useAuth React hook, designed to abstract all authentication logic away from your pages. In addition, the hook can be used to access the currently authenticated user:

const Dashboard = () => {
    const { logout, user } = useAuth({ middleware: 'auth' })

    return (
        <>
            <p>{user?.name}</p>

            <button onClick={logout}>Sign out</button>
        </>
    )
}

export default Dashboard

Built with

• React 18
• Vite
• React Router v6: Routing for React
• Tailwind: for UI
• SWR: React Hooks for Data Fetching
• Axios: Promise based HTTP client for the browser and node.js
• Headlessui/react: for UI Components
• Vercel: for hosting

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Nilanth
• All Contributors

License

The MIT License (MIT). Please see License File for more information.

Deploy

Support

Laravel Breeze React needs a ⭐️ from you. Don't forget to leave a star ⭐️