|
1 | | -<p align="center"><a href="https://laravel.com" target="_blank"><img src="https://cdn.devdojo.com/assets/svg/laravel-react-logo.svg" width="300" alt="Laravel Logo"></a></p> |
2 | | - |
3 | | -<p align="center"> |
4 | | -<a href="https://github.com/laravel/react-starter-kit/actions/workflows/tests.yml"><img src="https://github.com/laravel/react-starter-kit/workflows/tests/badge.svg" alt="Test Status"></a> |
5 | | -<a href="https://github.com/laravel/react-starter-kit/actions/workflows/lint.yml"><img src="https://github.com/laravel/react-starter-kit/actions/workflows/lint.yml/badge.svg" alt="Lint Status"></a> |
6 | | -<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/l/laravel/framework" alt="License"></a> |
7 | | -</p> |
8 | | - |
9 | | -<img src="https://cdn.devdojo.com/images/december2024/screenshot.png" /> |
| 1 | +# Laravel + React Starter Kit |
10 | 2 |
|
11 | 3 | ## Introduction |
12 | 4 |
|
13 | | -Welcome to the <a href="https://laravel.com" target="_blank">Laravel</a> React</a> Starter Kit. This starter kit utilizes <a href="https://inertiajs.com/" target="_blank">Intertia v2</a>, <a href="https://tailwindcss.com/" target="_blank">Tailwind CSS</a>,V3 (soon to be V4), <a href="https://reactjs.dev" target="_blank">React 19</a>, and <a href="https://ui.shadcn.com/" target="_blank">ShadCN UI</a>. |
14 | | - |
15 | | -## Installation |
16 | | - |
17 | | -To install the React Starter Kit, run the following command: |
18 | | - |
19 | | -``` |
20 | | -git clone https://github.com/laravel/react-starter-kit.git |
21 | | -cd react-starter-kit |
22 | | -git checkout develop |
23 | | -chmod +x install.sh && ./install.sh |
24 | | -``` |
25 | | - |
26 | | -This shell file will run the following commands, which you may wish to run manually: |
27 | | - |
28 | | -1. cp .env.example .env |
29 | | -2. composer install |
30 | | -3. php artisan key:generate |
31 | | -4. php artisan migrate |
32 | | -5. npm install |
33 | | -6. npm run dev |
34 | | - |
35 | | -## Features |
36 | | - |
37 | | -This Starter Kit includes the following features: |
38 | | - |
39 | | -- **User Authentication** (login, register, password reset, email verify, and password confirmation) |
40 | | -- **Dashboard Page** (Auth Protected User Dashboard Page) |
41 | | -- **Settings Page** (Profile Update/Delete, Password Update, Appearance) |
42 | | - |
43 | | -## Front-end App Structure |
44 | | - |
45 | | -The majority of the front-end code is located in the `resources/js` folder. In this folder we'll be using **kebab-case** throughout. You may wish to change this to any other convention if you perfer. Below is an example of how this folder is structured: |
46 | | - |
47 | | -**Folders** |
48 | | - |
49 | | -``` |
50 | | -resources/js/ |
51 | | -├── components/ # Reusable React components |
52 | | -├── hooks/ # Custom React hooks |
53 | | -├── layouts/ # Application layouts |
54 | | -├── lib/ # Utility functions and configurations |
55 | | -├── pages/ # Page components |
56 | | -└── types/ # Typescript definitions and interfaces |
57 | | -``` |
58 | | - |
59 | | -**Components** |
60 | | - |
61 | | -``` |
62 | | -components/ |
63 | | -└── appearance-tabs.tsx |
64 | | -└── navigation-menu.tsx |
65 | | -``` |
66 | | - |
67 | | -**Hooks/Utilities** |
68 | | - |
69 | | -``` |
70 | | -hooks/ |
71 | | -└── use-auth.tsx |
72 | | -└── use-mobile.tsx |
73 | | -``` |
74 | | - |
75 | | -### Components |
76 | | - |
77 | | -In the components folder is where all your React components will live. Inside this folder you'll also notice a sub-folder called `ui`. This is where you'll find all the ShadCN UI components. More documentation about this below. |
78 | | - |
79 | | -### Pages |
80 | | - |
81 | | -Most of your application pages will live in this folder. Here you will find the Page templates for Log in, Register, Dashboard, etc. These pages are rendered via Inertia. Here's an example, located inside of `routes/web.php`, of how the dashboard page is rendered: |
82 | | - |
83 | | -```php |
84 | | -Route::get('/dashboard', function () { |
85 | | - return Inertia::render('dashboard'); |
86 | | -})->middleware(['auth', 'verified'])->name('dashboard'); |
87 | | -``` |
88 | | - |
89 | | -This code will load the `resources/js/pages/dashboard.tsx` file. |
90 | | - |
91 | | -### Layouts |
92 | | - |
93 | | -All your pages will utilize a layout as the structure for each page. These layout files are located in the `resources/js/layouts` folder. Currently, there will be two layouts. An `app` layout and an `auth` layout. |
94 | | - |
95 | | -1. **app-layout** - This layout will be used for all authenticated users. |
96 | | -2. **auth\auth-base** - This is the main layout for your authentication pages, more info below. |
97 | | - |
98 | | -### Authentication Layouts |
99 | | - |
100 | | -The Authentication layouts are used specifically for all the Authentication views. You'll notice that there are a few different layouts in the `resources/js/layouts/auth` folder. This is because we provide you with three layouts to choose from. |
101 | | - |
102 | | -#### AuthSimpleLayout.tsx |
103 | | - |
104 | | -A clean and simple layout for your authentication pages. |
105 | | - |
106 | | - |
107 | | - |
108 | | -#### AuthCardLayout.tsx |
109 | | - |
110 | | -A layout with a slightly darker background and with the auth form inside a card. |
111 | | - |
112 | | - |
113 | | - |
114 | | -#### SplitLayout.tsx |
115 | | - |
116 | | -A split view authentication layout screen |
117 | | - |
118 | | - |
119 | | - |
120 | | ---- |
| 5 | +Our React starter kit provides a robust, modern starting point for building Laravel applications with a React frontend using [Inertia](https://inertiajs.com). |
121 | 6 |
|
122 | | -To change the Layout you would like to use, simply change the Layout file that is imported in either the `resources/js/layouts/auth-layout.tsx` or `resources/js/layouts/app-layout.tsx`. As an example, to use the `AuthSplitLayout.tsx`, the first line of `resources/js/layouts/auth-layout.tsx` would be modified to look like the following: |
| 7 | +Inertia allows you to build modern, single-page React applications using classic server-side routing and controllers. This lets you enjoy the frontend power of React combined with the incredible backend productivity of Laravel and lightning-fast Vite compilation. |
123 | 8 |
|
124 | | -```tsx |
125 | | -import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout'; |
126 | | -``` |
| 9 | +This React starter kit utilizes React 19, TypeScript, Tailwind, and the [shadcn/ui](https://ui.shadcn.com) component library. |
127 | 10 |
|
128 | | ---- |
| 11 | +## Official Documentation |
129 | 12 |
|
130 | | -## ShadCN UI |
| 13 | +Documentation for all Laravel starter kits can be found on the [Laravel website](https://laravel.com/docs/starter-kits). |
131 | 14 |
|
132 | | -All the ShadCN components will be installed inside of the `resources/js/components/ui` folder. |
| 15 | +## Contributing |
133 | 16 |
|
134 | | -When you install a UI component, such as the button component: |
| 17 | +Thank you for considering contributing to our starter kit! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions). |
135 | 18 |
|
136 | | -```bash |
137 | | -npx shadcn@latest add button |
138 | | -``` |
| 19 | +## Code of Conduct |
139 | 20 |
|
140 | | -You'll now have a button component in your `resources/js/components/ui` folder. You can then use the button component inside of any page. |
| 21 | +In order to ensure that the Laravel community is welcoming to all, please review and abide by the [Code of Conduct](https://laravel.com/docs/contributions#code-of-conduct). |
141 | 22 |
|
142 | | -```tsx |
143 | | -import { Button } from '@/components/ui/button'; |
| 23 | +## License |
144 | 24 |
|
145 | | -export default function Home() { |
146 | | - return <Button>Button</Button>; |
147 | | -} |
148 | | -``` |
| 25 | +The Laravel + React starter kit is open-sourced software licensed under the MIT license. |
0 commit comments