bear / reactjs-module
Redux React Serevr-Side Rendering using V8Js module for BEAR.Sunday
Requires
- php: >=7.1.0
- bear/resource: ^1.4.0
- koriym/redux-react-ssr: ^1.0.2
Requires (Dev)
- phpunit/phpunit: ^5.3
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')));