RRS is package for generate React Render Server Boilerplate with Laravel/Lumen. It can let us easily create React{.js|.jsx} files in project and render components seamlessly on the server side within Blade Template.

If this package helpful and save your time. Do not forget star it :)

Note: React Render Server is an independent Node.js Application.

• PHP 5.5.9+
• Node 0.10.0+
• Laravel/Lumen 5.0+

Require this package with Composer.

composer require tureki/rrs

Once Composer has installed or updated your packages you need to register RRS with Laravel/Lumen itself.

Open up config/app.php.

Register Service Provider

'providers' => [ ... Tureki\RRS\ReactRenderServerServiceProvider::class, ]

Facade Aliases

'aliases' => [ ... 'ReactRenderServer' => Tureki\RRS\Facades\ReactRenderServer::class, ]

Open up bootstrap/app.php then uncomment $app->withFacades();.

Register Service Provider

$app->register(Tureki\RRS\ReactRenderServerServiceProvider::class);

Facade Aliases

class_alias(Tureki\RRS\Facades\ReactRenderServer::class, 'ReactRenderServer');

Run Artisan copy the package files when you finished Laravel/Lumen setting.

php artisan vendor:publish --tag=rrs

Lumen Project: You need install irazasyed/larasupport package before run artisan vendor:publish command. Otherwise, you have to manual copy package file.

The default configuration file at config/react-render-server.php, ReactRenderServer will been generated at resources/assets/rrs directory.

Then install ReactRenderServer require package.

npm install -prefix resources/assets/rrs

And that's it!

Once npm has installed, You need start RRS.

npm start -prefix resources/assets/rrs

Note: You can use PM2 or other process manager tool to manage RRS.

Run php artisan tinker:

Psy Shell >>> ReactRenderServer::component('HelloWorld');

Output:

"<div data-reactid=".XXX" data-react-checksum="-XXX">React Render Server -> Hello World :)</div>" 

Blade Template:

{!! React::component('HelloWorld', $props) !!}

Lumen:

$app->get('/', function () { return ReactRenderServer::component('HelloWorld'); });

You can create React{.js,.jsx} files at resources/assets/rrs/src.

For example:

Create Button.jsx at resources/assets/rrs/src/ui/.

import React from 'react'; export class Button extends React.Component { render() { return (<button>Click Me</button>); } }; module.exports = HelloWorld;

Create App.jsx at resources/assets/rrs/src/.

import React from 'react'; import Button from 'ui/Button'; export class Button extends React.Component { render() { return ( <div> Application <Button/> </div> ); } }; module.exports = HelloWorld;

Get App component:

ReactRenderServer::component('App'); 

Get Button component:

ReactRenderServer::component('ui/Button'); 

Note: If you are JS professional. You can explore resources/assets/rrs directory change RRS config.

You can also integrate Elixir's workflow auto start|stop|reload RRS when you in development.

The following is sample:

Run:

npm install browser-sync --save-dev npm install gulp-connect-php --save-dev npm install gulp-util --save-dev npm install pm2 --save-dev

Open up gulpfile.js and change it:

var conn = require('gulp-connect-php'); var gutils = require('gulp-util'); var elixir = require('laravel-elixir'); //Start PHP Web Server. elixir.extend('serve', function(options) { if (gutils.env._.indexOf('watch') > -1) { conn.server(options); } new elixir.Task('serve', function() {}).watch(); }); //Start React Render Server. elixir.extend('renderServer', function() { // get Elixir browsery-sync instance. var bs = require('browser-sync').instances.pop(); var pm2 = require('pm2'); var rrs = elixir.config.assetsPath + '/rrs'; var rrsName = 'renderServer'; var rrsConfig = { name: rrsName, script: rrs + '/server.js', cwd: rrs, watch: true, env: { NODE_PATH: 'src' } }; //Remove process when stop development. process.on('SIGINT', function() { pm2.connect(function(err) { pm2.delete(rrsName, function(err) { process.exit(0); }); }); }); new elixir.Task(rrsName, function() { pm2.connect(function(err) { pm2.list(function(err, list) { for (var key in list) { if (list[key].name == rrsName) { //browsery-sync reload when file change. setTimeout(function() { bs.reload(); }, 100); pm2.disconnect(); return; } } //auto start RRS pm2.start(rrsConfig, pm2.disconnect); }); }); }).watch([rrs + '/**/*']); }); elixir(function(mix) { mix .renderServer() .serve({ base: 'public', port: 8000, }) .browserSync({ proxy: 'localhost:' + 8000 }); });

Run gulp && gulp watch (It will automatic open in browser)

Note: This is just a sample, You can change it.

./vendor/bin/phpunit -c phpunit.xml 

Welcome PR and play it :)

Coding Style: Follows the PSR-2 coding standard and the PSR-4 autoloading standard.

MIT © tureki