PLEASE NOTE, THIS PROJECT IS NO LONGER BEING MAINTAINED

php-reactjs-ui

php-reactjs-ui is a framework agnostic React UI boilerplate for PHP projects. The compilation of the assets/JS, test, lint and browser sync are available in this boilerplate.

React UI framework
Gulp Build system
Webpack Moudle bundler
Babel JS transpiler
Karma Test Runner
Mocha Test framework
Chai BDD / TDD assertion framework
Enzyme JavaScript Testing utilities for React
Eslint Linting utility for JS and JSX
Phantomjs Scriptable Headless WebKit
react-php-v8js PHP library that renders React components on the server

Prerequisite

Node
V8Js PHP extension (Optional for SSR)

Installation

First, place the ui directory and package.json into the root of the existing PHP project.

cp -r ui /path/to/yourapp
cp package.json /path/to/yourapp

Then, install the dependencies.

cd /path/to/yourapp
npm install

If you want SSR(Server Side Rendering), Install react-php-v8js.

composer require reactjs/react-php-v8js

Directory Structure

 src                  # php
 tests                # php
 composer.json
 package.json          # JS
 node_modules          # JS
 ui
  .babelrc
  .eslintrc
  .babelrc
  .babelrc
  gulpfile.js
  karma.conf.js
  src               # JS
  test              # JS
  ui.config.js
  webpack.config.js
 vendor

It's easy to be integrated into any existing PHP projects.

Config

Configure with ui/ui.js and ui/entry.js.

ui/ui.js

module.exports = {
  // project root directory
  projectDir: projectDir,
  // web root directory
  publicDir: projectDir + 'var/www',
  // webpack.outout.publicPath
  publicPath: '/build/',
  // watch directory for browsersync
  watchDir: [
    projectDir + 'src/**/*.php',
    projectDir + 'var/www/*.php',             // add more dirs
  ],
  // cleared directory in each run
  clearDir: [
    projectDir + 'var/tmp/*',                 // add more dirs
  ],
};

ui/entry.js

module.exports = {
  react: 'src/react.js',
  helloworld: [
    'webpack-hot-middleware/client',
    'src/testing_examples/helloworld.jsx',
  ],
  ssr: [
    'webpack-hot-middleware/client',
    'src/testing_examples/ssr.js',
  ]
};

Important: You need the react entry in case for SSR.

Run

A server start with http://127.0.0.1:8080/

npm start

Browsersync + HMR

It automatically reloads when PHP, JS, and Twig templates are updated.

npm run dev

Test

It test your JS code with Karma + Mocha + Chai. To change the config, edit karma.conf.js in the ui directory.

npm test

Linting

npm run lint

It runs ESLint. Airbnb 's ESLint rules is configured by default. To change the rules, edit the .eslintrc in the ui directory.

PHP QA

Watch phpcs and phpmd for PHP files.

npm run phpqa

Demo

You can use this repository to try commands and the operation of v8js. It contains the official react-php-v8js demo example which is rewritten as ES6 + Airbnb style.

git clone https://github.com/koriym/php-reactjs-ui.git
cd php-reactjs-ui
npm install
composer install # optional for SSR
npm run lint
npm test
[^C]
npm start