| Install | |
|---|---|
composer require crenspire/yii3-react-starter |
|
| PHP: | ^8.2 |
A modern, production-ready starter kit for building fast applications with Yii3, Inertia.js, React, and Tailwind CSS.
git clone https://github.com/your-org/yii3-react-starter-kit.git
cd yii3-react-starter-kit
composer install
npm install
# or
yarn install
npm run build
# or
yarn build
# Start PHP server
composer serve
# In another terminal, start Vite dev server
npm run dev
# or
yarn dev
Visit http://localhost:8080 to see your application.
The starter kit uses Vite for fast development with Hot Module Replacement (HMR):
# Start Vite dev server (enables HMR)
npm run dev
# Build for production
npm run build
Note: The Vite dev server runs on port 5173, while the PHP server runs on port 8080. The application automatically detects and uses the dev server when available.
# Start PHP development server
composer serve
# Run tests
composer test
# Code style check
composer cs-check
# Code style fix
composer cs-fix
# Static analysis
composer psalm
yii3-react-starter-kit/
├── assets/
│ └── react/
│ └── src/
│ ├── components/ # React components
│ │ ├── ui/ # shadcn/ui components
│ │ ├── Layout.jsx
│ │ ├── Navigation.jsx
│ │ ├── Footer.jsx
│ │ └── ...
│ ├── pages/ # Inertia page components
│ ├── lib/ # Utility functions
│ ├── main.jsx # React entry point
│ └── app.css # Global styles
├── config/ # Yii3 configuration
│ ├── common/ # Shared configuration
│ └── web/ # Web-specific configuration
├── src/
│ ├── Controller/ # PHP controllers
│ ├── views/ # Inertia root template
│ └── ...
├── public/ # Public web root
│ └── dist/ # Built frontend assets
├── docker/ # Docker configuration
├── tests/ # Test suites
├── composer.json # PHP dependencies
├── package.json # Node.js dependencies
├── vite.config.js # Vite configuration
└── tailwind.config.js # Tailwind CSS configuration
assets/react/src/pages/:// assets/react/src/pages/About.jsx
import React from 'react';
import Layout from '@/components/Layout';
export default function About() {
return (
<Layout>
<div className="container mx-auto px-4 py-20">
<h1 className="text-4xl font-bold">About Us</h1>
<p>Your content here...</p>
</div>
</Layout>
);
}
assets/react/src/main.jsx:import About from './pages/About';
createInertiaApp({
resolve: (name) => {
const pages = {
Home,
About, // Add your new page
};
return pages[name];
},
// ...
});
src/Controller/:<?php
namespace App\Controller\About;
use Crenspire\Inertia\Action\InertiaAction;
use Psr\Http\Message\ResponseInterface;
final class Action extends InertiaAction
{
public function __invoke(): ResponseInterface
{
return $this->render('About', [
// Your page data
]);
}
}
config/common/routes.php:Route::get('/about', [\App\Controller\About\Action::class, '__invoke'])->name('about');
The starter kit includes shadcn/ui components. To add more:
# Example: Add a new component (if you have shadcn CLI)
npx shadcn-ui@latest add button
Components are located in assets/react/src/components/ui/.
Dark mode is automatically handled with localStorage persistence. The theme toggle is available in the navigation header.
# Run all tests
composer test
# Run specific test suite
vendor/bin/codecept run unit
vendor/bin/codecept run functional
cd docker/dev
docker-compose up -d
cd docker/prod
docker-compose up -d
The starter kit includes several tools for maintaining code quality:
# Check code style
composer cs-check
# Fix code style
composer cs-fix
# Run static analysis
composer psalm
# Run Rector
vendor/bin/rector process src/
Inertia.js settings can be configured in config/common/params-inertia.php:
'inertia' => [
'assetConfig' => [
'viteHost' => 'localhost',
'vitePort' => 5173,
'viteEntryPath' => 'assets/react/src/main.jsx',
// ...
],
],
Tailwind configuration is in tailwind.config.js. The starter kit includes shadcn/ui theme configuration.
Contributions are welcome! Please feel free to submit a Pull Request.
git checkout -b feature/AmazingFeature)git commit -m 'Add some AmazingFeature')git push origin feature/AmazingFeature)This project is open-sourced software licensed under the MIT license.
Built with ❤️ for the Yii3 community