Skip to content

Commit 91cddfc

Browse files
taylorotwelltaylorotwell
authored
React Starter Kit
1 parent abbf33b commit 91cddfc

File tree

125 files changed

+14324
-2383
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

125 files changed

+14324
-2383
lines changed

Diff for: ‎.gitattributes

+1-2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,5 @@
66
*.md diff=markdown
77
*.php diff=php
88

9-
/.github export-ignore
109
CHANGELOG.md export-ignore
11-
.styleci.yml export-ignore
10+
README.md export-ignore

Diff for: ‎.github/workflows/lint.yml

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
name: linter
2+
3+
on:
4+
push:
5+
branches:
6+
- develop
7+
- main
8+
pull_request:
9+
branches:
10+
- develop
11+
- main
12+
13+
permissions:
14+
contents: write
15+
16+
jobs:
17+
quality:
18+
runs-on: ubuntu-latest
19+
steps:
20+
- uses: actions/checkout@v4
21+
22+
- name: Setup PHP
23+
uses: shivammathur/setup-php@v2
24+
with:
25+
php-version: '8.4'
26+
27+
- name: Install Dependencies
28+
run: |
29+
composer install -q --no-ansi --no-interaction --no-scripts --no-progress --prefer-dist
30+
npm install
31+
32+
- name: Run Pint
33+
run: vendor/bin/pint
34+
35+
- name: Frontend Format Check
36+
run: npm run format
37+
38+
- name: Frontend Lint
39+
run: npm run lint
40+
41+
- name: Commit Changes
42+
uses: stefanzweifel/git-auto-commit-action@v5
43+
with:
44+
commit_message: fix code style
45+
commit_options: '--no-verify'
46+
47+
# We need to run PHPStan after commiting changes as it does not auto-fix errors...
48+
- name: PHPStan
49+
run: ./vendor/bin/phpstan

Diff for: ‎.github/workflows/tests.yml

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
name: tests
2+
3+
on:
4+
push:
5+
branches:
6+
- develop
7+
- main
8+
pull_request:
9+
branches:
10+
- develop
11+
- main
12+
13+
jobs:
14+
ci:
15+
runs-on: ubuntu-latest
16+
17+
steps:
18+
- name: Checkout
19+
uses: actions/checkout@v4
20+
21+
- name: Setup PHP
22+
uses: shivammathur/setup-php@v2
23+
with:
24+
php-version: 8.4
25+
tools: composer:v2
26+
coverage: xdebug
27+
28+
- name: Setup Node
29+
uses: actions/setup-node@v4
30+
with:
31+
node-version: '22'
32+
cache: 'npm'
33+
34+
- name: Install Node Dependencies
35+
run: npm ci
36+
37+
- name: Build Assets
38+
run: npm run build
39+
40+
- name: Create SQLite Database
41+
run: touch database/database.sqlite
42+
43+
- name: Install Dependencies
44+
run: composer install --no-interaction --prefer-dist --optimize-autoloader
45+
46+
- name: Copy Environment File
47+
run: cp .env.example .env
48+
49+
- name: Generate Application Key
50+
run: php artisan key:generate
51+
52+
- name: Tests
53+
run: ./vendor/bin/phpunit

Diff for: ‎.gitignore

+13-11
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
1+
.DS_Store
2+
.env
3+
.env.backup
4+
.env.production
5+
.phpactor.json
6+
.phpunit.result.cache
7+
/.fleet
8+
/.idea
9+
/.nova
110
/.phpunit.cache
11+
/.vscode
12+
/.zed
13+
/bootstrap/ssr
214
/node_modules
315
/public/build
416
/public/hot
517
/public/storage
618
/storage/*.key
719
/storage/pail
820
/vendor
9-
.env
10-
.env.backup
11-
.env.production
12-
.phpactor.json
13-
.phpunit.result.cache
21+
auth.json
1422
Homestead.json
1523
Homestead.yaml
16-
auth.json
1724
npm-debug.log
1825
yarn-error.log
19-
/.fleet
20-
/.idea
21-
/.nova
22-
/.vscode
23-
/.zed

Diff for: ‎.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
resources/js/components/ui/*

Diff for: ‎.prettierrc

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"semi": true,
3+
"singleQuote": true,
4+
"singleAttributePerLine": false,
5+
"htmlWhitespaceSensitivity": "css",
6+
"printWidth": 150,
7+
"plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"],
8+
"tailwindFunctions": ["clsx", "cn"],
9+
"tabWidth": 4,
10+
"overrides": [
11+
{
12+
"files": "**/*.yml",
13+
"options": {
14+
"tabWidth": 2
15+
}
16+
}
17+
]
18+
}

Diff for: ‎README.md

+124-42
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,148 @@
1-
<p align="center"><a href="https://laravel.com" target="_blank"><img src="https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%20CMYK/1%20Full%20Color/laravel-logolockup-cmyk-red.svg" width="400" alt="Laravel Logo"></a></p>
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>
22

33
<p align="center">
4-
<a href="https://github.com/laravel/framework/actions"><img src="https://github.com/laravel/framework/workflows/tests/badge.svg" alt="Build Status"></a>
5-
<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/dt/laravel/framework" alt="Total Downloads"></a>
6-
<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/v/laravel/framework" alt="Latest Stable Version"></a>
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>
76
<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/l/laravel/framework" alt="License"></a>
87
</p>
98

10-
## About Laravel
9+
<img src="https://cdn.devdojo.com/images/december2024/screenshot.png" />
1110

12-
Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel takes the pain out of development by easing common tasks used in many web projects, such as:
11+
## Introduction
1312

14-
- [Simple, fast routing engine](https://laravel.com/docs/routing).
15-
- [Powerful dependency injection container](https://laravel.com/docs/container).
16-
- Multiple back-ends for [session](https://laravel.com/docs/session) and [cache](https://laravel.com/docs/cache) storage.
17-
- Expressive, intuitive [database ORM](https://laravel.com/docs/eloquent).
18-
- Database agnostic [schema migrations](https://laravel.com/docs/migrations).
19-
- [Robust background job processing](https://laravel.com/docs/queues).
20-
- [Real-time event broadcasting](https://laravel.com/docs/broadcasting).
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>.
2114

22-
Laravel is accessible, powerful, and provides tools required for large, robust applications.
15+
## Installation
2316

24-
## Learning Laravel
17+
To install the React Starter Kit, run the following command:
2518

26-
Laravel has the most extensive and thorough [documentation](https://laravel.com/docs) and video tutorial library of all modern web application frameworks, making it a breeze to get started with the framework.
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+
```
2725

28-
You may also try the [Laravel Bootcamp](https://bootcamp.laravel.com), where you will be guided through building a modern Laravel application from scratch.
26+
This shell file will run the following commands, which you may wish to run manually:
2927

30-
If you don't feel like reading, [Laracasts](https://laracasts.com) can help. Laracasts contains thousands of video tutorials on a range of topics including Laravel, modern PHP, unit testing, and JavaScript. Boost your skills by digging into our comprehensive video library.
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
3134

32-
## Laravel Sponsors
35+
## Features
3336

34-
We would like to extend our thanks to the following sponsors for funding Laravel development. If you are interested in becoming a sponsor, please visit the [Laravel Partners program](https://partners.laravel.com).
37+
This Starter Kit includes the following features:
3538

36-
### Premium Partners
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)
3742

38-
- **[Vehikl](https://vehikl.com/)**
39-
- **[Tighten Co.](https://tighten.co)**
40-
- **[WebReinvent](https://webreinvent.com/)**
41-
- **[Kirschbaum Development Group](https://kirschbaumdevelopment.com)**
42-
- **[64 Robots](https://64robots.com)**
43-
- **[Curotec](https://www.curotec.com/services/technologies/laravel/)**
44-
- **[Cyber-Duck](https://cyber-duck.co.uk)**
45-
- **[DevSquad](https://devsquad.com/hire-laravel-developers)**
46-
- **[Jump24](https://jump24.co.uk)**
47-
- **[Redberry](https://redberry.international/laravel/)**
48-
- **[Active Logic](https://activelogic.com)**
49-
- **[byte5](https://byte5.de)**
50-
- **[OP.GG](https://op.gg)**
43+
## Front-end App Structure
5144

52-
## Contributing
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:
5346

54-
Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions).
47+
**Folders**
5548

56-
## Code of Conduct
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+
```
5758

58-
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).
59+
**Components**
5960

60-
## Security Vulnerabilities
61+
```
62+
components/
63+
└── appearance-tabs.tsx
64+
└── navigation-menu.tsx
65+
```
6166

62-
If you discover a security vulnerability within Laravel, please send an e-mail to Taylor Otwell via [[email protected]](mailto:[email protected]). All security vulnerabilities will be promptly addressed.
67+
**Hooks/Utilities**
6368

64-
## License
69+
```
70+
hooks/
71+
└── use-auth.tsx
72+
└── use-mobile.tsx
73+
```
6574

66-
The Laravel framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).
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+
![Simple Auth Layout Screenshot](https://cdn.devdojo.com/images/december2024/simple-layout.png)
107+
108+
#### AuthCardLayout.tsx
109+
110+
A layout with a slightly darker background and with the auth form inside a card.
111+
112+
![Simple Auth Layout Screenshot](https://cdn.devdojo.com/images/december2024/card-layout.png)
113+
114+
#### SplitLayout.tsx
115+
116+
A split view authentication layout screen
117+
118+
![Simple Auth Layout Screenshot](https://cdn.devdojo.com/images/december2024/split-layout.png)
119+
120+
---
121+
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:
123+
124+
```tsx
125+
import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';
126+
```
127+
128+
---
129+
130+
## ShadCN UI
131+
132+
All the ShadCN components will be installed inside of the `resources/js/components/ui` folder.
133+
134+
When you install a UI component, such as the button component:
135+
136+
```bash
137+
npx shadcn@latest add button
138+
```
139+
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.
141+
142+
```tsx
143+
import { Button } from '@/components/ui/button';
144+
145+
export default function Home() {
146+
return <Button>Button</Button>;
147+
}
148+
```

0 commit comments

Comments
 (0)