crenspire/yii3-react-starter

Yii3 - Modern Starter Kit Using Inertia v2, React 19, ShadCN UI and Tailwind CSS 4+

Fund package maintenance!
Opencollective
yiisoft

Installs: 0

Dependents: 0

Suggesters: 0

Security: 0

Stars: 1

Watchers: 0

Forks: 0

Type:project

pkg:composer/crenspire/yii3-react-starter

This package is auto-updated.

Last update: 2026-01-23 13:01:29 UTC


README

A modern, production-ready starter kit for building fast applications with Yii3, Inertia.js, React, and Tailwind CSS.

๐Ÿš€ Features

  • 10x Dev Experience - Ship faster with opinionated PHP CS Fixer, maximum Psalm level, and Rector for enhanced code quality and developer productivity
  • Production Docker Ready - Optimized Docker images with Yii3 and optimized setup for lightning-fast development and deployment
  • Advanced Authentication - Complete authentication system with social login and role-based access control ready to implement
  • Payment Ready - Payment integration ready for subscription billing and payment processing so you can focus on building your product
  • API Ready - RESTful API endpoints with authentication and comprehensive documentation structure ready to implement
  • Customizable UI - Built with shadcn/ui components, making UI customization a breeze. Easily modify themes, styles, and components to match your brand
  • AI Integration Ready - Pre-configured structure for LLM integrations. Build AI-powered features into your app with minimal setup
  • Admin Panel Ready - Structure ready for beautiful admin panel with CRUD operations, charts, and detailed analytics integration
  • Evolving Features - Regular updates bring new features, integrations, and improvements to supercharge your development

๐Ÿ›  Tech Stack

Backend

  • PHP 8.2+ - Modern PHP with latest features
  • Yii3 - High-performance PHP framework
  • Inertia.js 2.0 - Modern monolith approach
  • Composer - PHP dependency management

Frontend

  • React 18 - Modern UI library
  • Inertia.js React - Seamless SPA experience
  • Vite 5 - Lightning-fast build tool
  • Tailwind CSS 4+ - Utility-first CSS framework
  • shadcn/ui - Beautiful, accessible components
  • Lucide React - Beautiful icon library

Development Tools

  • PHP CS Fixer - Code style enforcement
  • Psalm - Static analysis (maximum level)
  • Rector - Automated refactoring
  • Docker - Containerized development environment

๐Ÿ“‹ Requirements

  • PHP 8.2 or higher
  • Composer 2.x
  • Node.js 18+ and npm/yarn
  • Docker (optional, for containerized setup)

๐Ÿ— Installation

1. Clone the repository

git clone https://github.com/your-org/yii3-react-starter-kit.git
cd yii3-react-starter-kit

2. Install PHP dependencies

composer install

3. Install Node.js dependencies

npm install
# or
yarn install

4. Build frontend assets

npm run build
# or
yarn build

5. Start the development server

# 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.

๐ŸŽจ Development Workflow

Frontend Development

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.

Backend Development

# 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

๐Ÿ“ Project Structure

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

๐ŸŽฏ Usage

Creating a New Page

  1. Create a React component in 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>
  );
}
  1. Register the component in assets/react/src/main.jsx:
import About from './pages/About';

createInertiaApp({
  resolve: (name) => {
    const pages = {
      Home,
      About,  // Add your new page
    };
    return pages[name];
  },
  // ...
});
  1. Create a PHP controller in 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
        ]);
    }
}
  1. Add a route in config/common/routes.php:
Route::get('/about', [\App\Controller\About\Action::class, '__invoke'])->name('about');

Using shadcn/ui Components

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

Dark mode is automatically handled with localStorage persistence. The theme toggle is available in the navigation header.

๐Ÿงช Testing

# Run all tests
composer test

# Run specific test suite
vendor/bin/codecept run unit
vendor/bin/codecept run functional

๐Ÿณ Docker Setup

Development

cd docker/dev
docker-compose up -d

Production

cd docker/prod
docker-compose up -d

๐Ÿ“ Code Quality

The starter kit includes several tools for maintaining code quality:

  • PHP CS Fixer - Enforces PSR-12 coding standards
  • Psalm - Static analysis at maximum level
  • Rector - Automated refactoring and upgrades
# Check code style
composer cs-check

# Fix code style
composer cs-fix

# Run static analysis
composer psalm

# Run Rector
vendor/bin/rector process src/

๐Ÿ”ง Configuration

Inertia.js Configuration

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 CSS

Tailwind configuration is in tailwind.config.js. The starter kit includes shadcn/ui theme configuration.

๐Ÿค Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

๐Ÿ“„ License

This project is open-sourced software licensed under the MIT license.

๐Ÿ™ Acknowledgments

๐Ÿ“ž Support

Built with โค๏ธ for the Yii3 community