Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nilanth/laravel-breeze-react
Laravel Breeze React is a React application template tailored for Laravel Breeze-based applications, supercharged by Vite
https://github.com/nilanth/laravel-breeze-react
authentication breeze create-react-app laravel react sanctum swr tailwindcss vite vite-react
Last synced: 13 days ago
JSON representation
Laravel Breeze React is a React application template tailored for Laravel Breeze-based applications, supercharged by Vite
- Host: GitHub
- URL: https://github.com/nilanth/laravel-breeze-react
- Owner: Nilanth
- License: mit
- Created: 2022-03-13T12:45:34.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-05-11T13:55:43.000Z (6 months ago)
- Last Synced: 2024-10-12T11:35:37.533Z (27 days ago)
- Topics: authentication, breeze, create-react-app, laravel, react, sanctum, swr, tailwindcss, vite, vite-react
- Language: JavaScript
- Homepage:
- Size: 629 KB
- Stars: 69
- Watchers: 3
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: FUNDING.yml
- License: LICENSE
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
# Laravel Breeze - React Edition build with Vite
## Introduction
> Laravel Breeze React is the implementation for react from [breeze-next](https://github.com/laravel/breeze-next).
Laravel Breeze React is an implementation of the [Laravel Breeze](https://laravel.com/docs/starter-kits) authentication template for [React App](https://react.dev). All of the authentication boilerplate is already written for you - powered by [Laravel Sanctum](https://laravel.com/docs/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](https://vitejs.dev/) for rapid compilation and efficient production builds. To know more about Vite check out [this article](https://dev.to/nilanth/use-vite-for-react-apps-instead-of-cra-3pkg).
## Quick Start
### Installation
First, create a React App compatible Laravel backend by installing Laravel Breeze into a [fresh Laravel application](https://laravel.com/docs/installation) and installing Breeze's API scaffolding:
```bash
# 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:
```bash
# 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:
```
VITE_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:
```js
const Dashboard = () => {
const { logout, user } = useAuth({ middleware: 'auth' })
return (
<>
{user?.name}
Sign out
>
)
}
export default Dashboard
```
## Built with
- [React 18](https://reactjs.org)
- [Vite](https://vitejs.dev/)
- [React Router v6](https://reactrouter.com): Routing for React
- [Tailwind](https://tailwindcss.com): for UI
- [SWR](https://swr.vercel.app/): React Hooks for Data Fetching
- [Axios](https://www.npmjs.com/package/axios): Promise based HTTP client for the browser and node.js
- [Headlessui/react](https://headlessui.dev): for UI Components
- [Vercel](http://vercel.com): for hosting
## Contributing
Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.
## Security Vulnerabilities
Please review [our security policy](.github/SECURITY.md) on how to report security vulnerabilities.
## Credits
- [Nilanth](https://github.com/nilanth)
- [All Contributors](../../contributors)
## License
The MIT License (MIT). Please see [License File](LICENSE) for more information.
## Deploy
## Support
Laravel Breeze React needs a ⭐️ from you. Don't forget to leave a star ⭐️