PHPackages                             crenspire/yii2-react-starter - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Framework](/categories/framework)
4. /
5. crenspire/yii2-react-starter

ActiveProject[Framework](/categories/framework)

crenspire/yii2-react-starter
============================

Yii2 - React Modern Starter Kit with ShadCN UI and Tailwind

502JavaScript

Since Nov 28Pushed 5mo agoCompare

[ Source](https://github.com/crenspire/yii2-react-starter)[ Packagist](https://packagist.org/packages/crenspire/yii2-react-starter)[ RSS](/packages/crenspire-yii2-react-starter/feed)WikiDiscussions develop Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

 [ ![](https://avatars0.githubusercontent.com/u/993323) ](https://github.com/yiisoft)

Yii2 - Modern Starter Kit
=========================

[](#yii2---modern-starter-kit)

Yii2 - Modern Starter Kit is a modern, full-featured [Yii 2](https://www.yiiframework.com/) application template with React frontend powered by Inertia.js.

The template includes a beautiful UI built with Shadcn UI components, dark/light theme support, user authentication, CRUD operations, and all the modern features you need to rapidly build web applications.

Screenshots
-----------

[](#screenshots)

### Light Theme

[](#light-theme)

#### Home Page

[](#home-page)

[![Home Page - Light Theme](web/images/home-light.png)](web/images/home-light.png)#### Sign In

[](#sign-in)

[![Sign In - Light Theme](web/images/sign-in-light.png)](web/images/sign-in-light.png)#### Sign Up

[](#sign-up)

[![Sign Up - Light Theme](web/images/sign-up-light.png)](web/images/sign-up-light.png)#### Dashboard

[](#dashboard)

[![Dashboard - Light Theme](web/images/dashboard-light.png)](web/images/dashboard-light.png)#### Users Management

[](#users-management)

[![Users Management - Light Theme](web/images/users-light.png)](web/images/users-light.png)#### Settings

[](#settings)

[![Settings - Light Theme](web/images/settings-light.png)](web/images/settings-light.png)#### Forgot Password

[](#forgot-password)

[![Forgot Password - Light Theme](web/images/forgot-password-light.png)](web/images/forgot-password-light.png)

### Dark Theme

[](#dark-theme)

#### Home Page

[](#home-page-1)

[![Home Page - Dark Theme](web/images/home-dark.png)](web/images/home-dark.png)#### Sign In

[](#sign-in-1)

[![Sign In - Dark Theme](web/images/sign-in-dark.png)](web/images/sign-in-dark.png)#### Sign Up

[](#sign-up-1)

[![Sign Up - Dark Theme](web/images/sign-up-dark.png)](web/images/sign-up-dark.png)#### Dashboard

[](#dashboard-1)

[![Dashboard - Dark Theme](web/images/dashboard-dark.png)](web/images/dashboard-dark.png)#### Users Management

[](#users-management-1)

[![Users Management - Dark Theme](web/images/users-dark.png)](web/images/users-dark.png)#### Settings

[](#settings-1)

[![Settings - Dark Theme](web/images/settings-dark.png)](web/images/settings-dark.png)#### Forgot Password

[](#forgot-password-1)

[![Forgot Password - Dark Theme](web/images/forgot-password-dark.png)](web/images/forgot-password-dark.png)

Requirements
------------

[](#requirements)

Before you begin, ensure you have the following installed on your system:

- **PHP** >= 7.4.0 (PHP 8.0+ recommended)
- **Composer** - PHP dependency manager ([Install Composer](https://getcomposer.org/download/))
- **Node.js** >= 18.0.0 and **npm** (or **yarn**)
- **MySQL** >= 5.7 or **MariaDB** >= 10.3
- **Web Server** (Apache/Nginx) or PHP built-in server

Installation
------------

[](#installation)

### Step 1: Clone the Repository

[](#step-1-clone-the-repository)

```
git clone git@github.com:crenspire/yii2-react-starter.git
cd yii2-react-starter
```

Or download and extract the project archive to your desired directory.

### Step 2: Install PHP Dependencies

[](#step-2-install-php-dependencies)

Install all PHP dependencies using Composer:

```
composer install
```

This will install all required PHP packages including Yii2 framework and Inertia.js adapter.

### Step 3: Install Node.js Dependencies

[](#step-3-install-nodejs-dependencies)

Install all frontend dependencies:

```
npm install
```

This will install React, Inertia.js, Shadcn UI components, Tailwind CSS, and all other frontend dependencies.

### Step 4: Configure Database

[](#step-4-configure-database)

1. Create a MySQL database for your application:

```
CREATE DATABASE yii2basic CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

2. Update the database configuration in `config/db.php`:

```
return [
    'class' => 'yii\db\Connection',
    'dsn' => 'mysql:host=localhost;dbname=yii2basic',
    'username' => 'root',
    'password' => 'your_password',
    'charset' => 'utf8mb4',
];
```

Replace `your_password` with your MySQL root password (or your database user credentials).

### Step 5: Run Database Migrations

[](#step-5-run-database-migrations)

Run the migrations to create all necessary database tables:

```
php yii migrate
```

This will create the following tables:

- `users` - User accounts with soft deletes
- `password_reset_tokens` - Password reset functionality
- And other required tables

### Step 6: Seed Admin User (Optional)

[](#step-6-seed-admin-user-optional)

Create an admin user for testing:

```
php yii seed/admin
```

This creates an admin user with:

- **Email**: `admin@example.com`
- **Password**: `admin123`

### Step 7: Configure Cookie Validation Key

[](#step-7-configure-cookie-validation-key)

The cookie validation key should be automatically generated during `composer install`. If it wasn't, you can generate it manually:

1. Open `config/web.php`
2. Find the `cookieValidationKey` in the `request` component
3. Set it to a random string (32 characters recommended):

```
'request' => [
    'cookieValidationKey' => 'your-random-32-character-string-here',
],
```

You can generate a random string using:

```
php -r "echo bin2hex(random_bytes(16));"
```

### Step 8: Start Development Servers

[](#step-8-start-development-servers)

You need to run two servers simultaneously:

1. **PHP Development Server** (Backend):

    ```
    php yii serve
    ```
2. **Vite Development Server** (Frontend):

    ```
    npm run dev
    ```

Or use `concurrently` to run both at once (if installed):

```
npx concurrently "php yii serve" "npm run dev"
```

### Step 9: Access the Application

[](#step-9-access-the-application)

Open your browser and navigate to:

```
http://localhost:8080

```

You should see the home page. You can now:

- **Sign Up**: Create a new account at `/auth/register`
- **Sign In**: Login at `/auth/login` (or use admin credentials if you seeded)
- **Dashboard**: Access the dashboard at `/dashboard` (requires login)

Production Build
----------------

[](#production-build)

For production deployment, build the frontend assets:

```
npm run build
```

This will compile and optimize all React components and assets into the `web/dist` directory.

Configuration
-------------

[](#configuration)

### Environment Configuration

[](#environment-configuration)

The application uses Yii2's environment configuration. You can set the environment by:

1. Copying `config/params.php` and modifying as needed
2. Setting `YII_ENV` constant in `web/index.php`:
    - `YII_ENV_DEV` - Development mode
    - `YII_ENV_PROD` - Production mode

### Additional Configuration Files

[](#additional-configuration-files)

- `config/web.php` - Web application configuration
- `config/console.php` - Console application configuration
- `config/db.php` - Database configuration
- `config/params.php` - Application parameters

**NOTES:**

- Make sure the `runtime/` and `web/assets/` directories are writable by the web server
- For production, disable debug mode and enable schema caching in `config/web.php`
- Configure your web server to point to the `web/` directory as the document root

Directory Structure
-------------------

[](#directory-structure)

```
assets/             contains assets definition
commands/           contains console commands (controllers)
config/             contains application configurations
controllers/        contains Web controller classes
mail/               contains view files for e-mails
models/             contains model classes
migrations/         contains database migrations
resources/          contains frontend resources (React, CSS, JS)
  js/               React components and pages
  css/              Stylesheets
runtime/            contains files generated during runtime
tests/              contains various tests for the basic application
vendor/             contains dependent 3rd-party packages
views/              contains view files for the Web application
web/                contains the entry script and Web resources
  images/           contains screenshots and images
  dist/             contains built frontend assets (production)

```

Testing
-------

[](#testing)

Tests are located in `tests` directory. They are developed with [Codeception PHP Testing Framework](https://codeception.com/). By default, there are 3 test suites:

- `unit`
- `functional`
- `acceptance`

Tests can be executed by running

```
vendor/bin/codecept run

```

The command above will execute unit and functional tests. Unit tests are testing the system components, while functional tests are for testing user interaction. Acceptance tests are disabled by default as they require additional setup since they perform testing in real browser.

### Running acceptance tests

[](#running--acceptance-tests)

To execute acceptance tests do the following:

1. Rename `tests/acceptance.suite.yml.example` to `tests/acceptance.suite.yml` to enable suite configuration
2. Replace `codeception/base` package in `composer.json` with `codeception/codeception` to install full-featured version of Codeception
3. Update dependencies with Composer

    ```
    composer update

    ```
4. Download [Selenium Server](https://www.seleniumhq.org/download/) and launch it:

    ```
    java -jar ~/selenium-server-standalone-x.xx.x.jar

    ```

    In case of using Selenium Server 3.0 with Firefox browser since v48 or Google Chrome since v53 you must download [GeckoDriver](https://github.com/mozilla/geckodriver/releases) or [ChromeDriver](https://sites.google.com/a/chromium.org/chromedriver/downloads) and launch Selenium with it:

    ```
    # for Firefox
    java -jar -Dwebdriver.gecko.driver=~/geckodriver ~/selenium-server-standalone-3.xx.x.jar

    # for Google Chrome
    java -jar -Dwebdriver.chrome.driver=~/chromedriver ~/selenium-server-standalone-3.xx.x.jar

    ```

    As an alternative way you can use already configured Docker container with older versions of Selenium and Firefox:

    ```
    docker run --net=host selenium/standalone-firefox:2.53.0

    ```
5. (Optional) Create `yii2basic_test` database and update it by applying migrations if you have them.

    ```
    tests/bin/yii migrate

    ```

    The database configuration can be found at `config/test_db.php`.
6. Start web server:

    ```
    tests/bin/yii serve

    ```
7. Now you can run all available tests

    ```
    # run all available tests
    vendor/bin/codecept run

    # run acceptance tests
    vendor/bin/codecept run acceptance

    # run only unit and functional tests
    vendor/bin/codecept run unit,functional

    ```

### Code coverage support

[](#code-coverage-support)

By default, code coverage is disabled in `codeception.yml` configuration file, you should uncomment needed rows to be able to collect code coverage. You can run your tests and collect coverage with the following command:

```
#collect coverage for all tests
vendor/bin/codecept run --coverage --coverage-html --coverage-xml

#collect coverage only for unit tests
vendor/bin/codecept run unit --coverage --coverage-html --coverage-xml

#collect coverage for unit and functional tests
vendor/bin/codecept run functional,unit --coverage --coverage-html --coverage-xml

```

You can see code coverage output under the `tests/_output` directory.

###  Health Score

19

—

LowBetter than 10% of packages

Maintenance49

Moderate activity, may be stable

Popularity6

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity13

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/8f143f2994a67baae97e4fe42dde62a4754ca5258e1740975963d1afe92f3d06?d=identicon)[akshayj](/maintainers/akshayj)

![](https://www.gravatar.com/avatar/9006797cc850402a89fc9af5e768f96221bbc753bd87bcd770f4afe97cb2ef76?d=identicon)[akshay.joshi@crenspire.com](/maintainers/akshay.joshi@crenspire.com)

---

Top Contributors

[![akshaypjoshi](https://avatars.githubusercontent.com/u/25765955?v=4)](https://github.com/akshaypjoshi "akshaypjoshi (3 commits)")

---

Tags

boilerplateinertiareactstarter-kittailwindyii2

### Embed Badge

![Health badge](/badges/crenspire-yii2-react-starter/health.svg)

```
[![Health](https://phpackages.com/badges/crenspire-yii2-react-starter/health.svg)](https://phpackages.com/packages/crenspire-yii2-react-starter)
```

###  Alternatives

[laravel/telescope

An elegant debug assistant for the Laravel framework.

5.2k67.8M190](/packages/laravel-telescope)[laravel/passport

Laravel Passport provides OAuth2 server support to Laravel.

3.4k85.0M529](/packages/laravel-passport)[spiral/roadrunner

RoadRunner: High-performance PHP application server and process manager written in Go and powered with plugins

8.4k12.2M84](/packages/spiral-roadrunner)[nolimits4web/swiper

Most modern mobile touch slider and framework with hardware accelerated transitions

41.8k177.2k1](/packages/nolimits4web-swiper)[laravel/dusk

Laravel Dusk provides simple end-to-end testing and browser automation.

1.9k36.7M256](/packages/laravel-dusk)[laravel/prompts

Add beautiful and user-friendly forms to your command-line applications.

708181.8M591](/packages/laravel-prompts)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)