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/rrsOnce 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=rrsLumen Project: You need install irazasyed/larasupport package before run
artisan vendor:publishcommand. 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/rrsAnd that's it!
Once npm has installed, You need start RRS.
npm start -prefix resources/assets/rrsNote: You can use
PM2or 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/rrsdirectory 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-devOpen 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