PHPackages                             koriym/js-ui-skeleton - 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. [Templating & Views](/categories/templating)
4. /
5. koriym/js-ui-skeleton

ActiveLibrary[Templating & Views](/categories/templating)

koriym/js-ui-skeleton
=====================

A JavaScript UI skeleton for PHP projects

1.0.0(3mo ago)61092MITJavaScriptCI passing

Since Feb 5Pushed 3mo ago1 watchersCompare

[ Source](https://github.com/koriym/Koriym.JsUiSkeleton)[ Packagist](https://packagist.org/packages/koriym/js-ui-skeleton)[ RSS](/packages/koriym-js-ui-skeleton/feed)WikiDiscussions 1.x Synced 1mo ago

READMEChangelog (6)Dependencies (1)Versions (7)Used By (0)

JS-UI Skeleton
==============

[](#js-ui-skeleton)

[![CI](https://github.com/koriym/Koriym.JsUiSkeleton/actions/workflows/ci.yml/badge.svg)](https://github.com/koriym/Koriym.JsUiSkeleton/actions/workflows/ci.yml)

[Japanese](README.ja.md)

A JavaScript UI application skeleton for PHP projects
-----------------------------------------------------

[](#a-javascript-ui-application-skeleton-for-php-projects)

Server-side rendering (SSR) with V8Js or Node.js for PHP applications. Build your views with modern JavaScript while keeping application logic in PHP.

Stack
-----

[](#stack)

- [Vite](https://vitejs.dev/) - Next generation frontend tooling
- [React 18](https://react.dev/) - UI framework
- [Redux Toolkit](https://redux-toolkit.js.org/) - State management
- [Vitest](https://vitest.dev/) - Unit testing
- [ESLint 9](https://eslint.org/) - Code linting (flat config)

Prerequisites
-------------

[](#prerequisites)

- Node.js 20+
- [V8Js PHP extension](https://github.com/phpv8/v8js) (optional - Node.js fallback available)

Rendering Modes
---------------

[](#rendering-modes)

### SSR Only

[](#ssr-only)

Render static pages on the server side. Use JS template engines or SSR-enabled frameworks like React.

### SSR + CSR (Hydration)

[](#ssr--csr-hydration)

Generate HTML on the server, then hydrate on the client for interactivity.

### CSR Only

[](#csr-only)

Server returns JSON; the browser renders the UI. Use PHP for non-DOM elements like OGP `` tags.

Quick Start
-----------

[](#quick-start)

```
composer create-project koriym/js-ui-skeleton -n -s dev js-ui
cd js-ui
npm install
npm run dev
```

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

[](#installation)

### New Project

[](#new-project)

```
composer create-project koriym/js-ui-skeleton -n -s dev MyVendor.MyUi
cd MyVendor.MyUi
npm install
```

### Add to Existing Project

[](#add-to-existing-project)

```
cd path/to/project
composer require koriym/js-ui-skeleton 1.x-dev
cp -r vendor/koriym/js-ui-skeleton/ui .
cp vendor/koriym/js-ui-skeleton/package.json .
cp vendor/koriym/js-ui-skeleton/vite.config.ts .
cp vendor/koriym/js-ui-skeleton/vitest.config.ts .
cp vendor/koriym/js-ui-skeleton/eslint.config.js .
npm install
```

### Directory Structure

[](#directory-structure)

```
├── package.json
├── vite.config.ts
├── vitest.config.ts
├── eslint.config.js
├── public/
│   └── build/           # Built bundles
├── ui/
│   ├── src/
│   │   └── page/
│   │       └── index/
│   │           ├── client/      # Client entry
│   │           ├── server/      # SSR entry
│   │           ├── components/
│   │           └── store/
│   ├── test/
│   └── dev/             # PHP dev scripts
└── vendor/

```

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

[](#configuration)

### Run Config

[](#run-config)

Set the JS application configuration in `ui/dev/config/`:

```