README

BEAR.ReactJsModule is a redux-react-ssr which renders Redux React UI on the server-side support module for BEAR.Sunday.

Prerequisites

php7
V8Js

Install

Composer Install

composer require bear/reactjs-module

Module Install

$distDir = dirname(__DIR__, 2) . '/var/www/dist';
$this->install(new ReduxModule($distDir, 'ssr_app');

In this canse, you need to place ssr-app.bundle.js at $baseDir directory.

Redux UI Skeleton Install

Copy skeleton directory to your BEAR.Sunday project root.

cp -r vendor/bear/reactjs-module/ui-skeleton/redux/ui .
cp vendor/bear/reactjs-module/ui-skeleton/redux/package.json .

Install dependencies.

yarn install

Build ui application.

yarn run build

Three js bundled file is produced.

react.bundle.js React library bundled code
{app-name}.bundle.js Application bundled code for client side
{ssr-app-name}.bundle.js Application bundled code for server side

You can include JavaScript client code (CSS, DOM ..) for {app}.bundle.js only. See more detail at the example.

ResourceOjbect

To inject SSR renderer, Annotate @Inject with @Named annotation to setRenderer setter method with {ssr-app-name} application name.

use BEAR\Resource\RenderInterface;
use BEAR\Resource\ResourceObject;
use Ray\Di\Di\Inject;
use Ray\Di\Di\Named;

class Greeting extends ResourceObject
{
    /**
     * @Inject
     * @Named("ssr_app")
     */
    public function setRenderer(RenderInterface $renderer)
    {
        $this->renderer = $renderer;
    }

    public function onGet()
    {
        $this->body = [
            'title' => 'Greeting',
            'hello' => ['message' => 'konichiwa']
        ];

        return $this;
    }
}

Template

We need php template code. For exapmle, Index.php page resource needs Index.html.php template file. You can get the value of body by escape() or raw().

<?php

/* @var $ssr \BEAR\ReactJsModule\Ssr */
$view = $ssr->render(['hello']);

return <<<"EOT"
<!doctype>
<html>
<head>
    <title>{$ssr->escape('title')}</title>
</head>
<body>
<div id="root">{$view->markup}</div>
<script src="build/react.bundle.js"></script>
<script src="build/app.bundle.js"></script>
<script>{$view->js}</script>
</body>
</html>
EOT;

Note: app.bundle.js is client javascript code. The page is rendered fully even {$markup} is removed by client JS code.

VoidV8Module

It is possible to install VoidV8Module to run non V8Js environment for clien side rendering only.

$this->install(new FakeV8Module(new ReduxModule($distDir, 'ssr_hello')));

bear / reactjs-module

Maintainers

Details