Skip to content

A Laravel middleware that injects a server-side rendered React app into the view.

License

Notifications You must be signed in to change notification settings

BradEstey/laravel-react-middleware

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Laravel React Compiler Middleware

Latest Stable Version Build Status Coverage Status

This is a Laravel middleware used to help with React Server-side Rendering. This middleware makes an HTTP request to a local Node.js server compiling the React application. It then injects the returned HTML into your Laravel view. Use Blade Templates as you would normally.

How it Works

First install Node.js on your production server or on a server on the same local network. Then write a small Node.js application to render your React application. For simple applications, you can use ReactDOM.server.renderToString(App), for more complex React applications you may need to do something more like this.

On the Laravel side, build a Blade or plain PHP layout file as usual.

<!-- Stored in resources/views/layouts/master.blade.php -->

<html>
    <head>
        <title>{{ $title or 'Untitled Document' }}</title>
    </head>
    <body>
        <div id="app">
            {!! $content or '' !!}
        </div>
    </body>
</html>

Render your views in your controller method as usual.

return view('layouts.main', ['title' => 'Your title here.']);

Add this middleware to whichever routes contain a React app.

Route::get('/', ['middleware' => 'react', 'uses' => 'HomeController@index']);

From there, the React middleware will make a request to your Node.js compiler server and replace in the $content variable with the returned HTML.

Installation

Install this package via Composer.

$ composer require estey/laravel-react-middleware

Add the service provider to your config/app.php file.

'providers' => [
    ...
    Estey\ReactMiddleware\ReactCompilerServiceProvider::class,
];

Add the middleware class to your app/Http/Kernel.php file.

protected $routeMiddleware = [
    ...
    'react' => \Estey\ReactMiddleware\CompileReact::class,
];

Configuration

To publish the configuration file, run:

$ php artisan vendor:publish --provider="Estey\ReactMiddleware\ReactCompilerServiceProvider"

In the config file you can change the host and port of the compiler server and change the connection and response timeout times. The default behavior is for timeouts set be to 0, which wait indefinitely. I highly recommend that you change these to be more aggressive.


AJAX requests to this route will return the data array passed to your view as plain JSON. So the example above would return:

{ "title": "Your title here." }

To disable the JSON response on AJAX requests, pass "disable_json" to the first parameter.

Route::get('/', ['middleware' => 'react:disable_json', 'uses' => 'HomeController@index']);

Merge JSON Response

If your Node.js application responds with JSON instead of a plain HTML string, then the JSON will be parsed and merged into your view. So for example, if your Node.js application responds with:

{
  "content": "<div>Hello World</div>",
  "metaKeywords": "foo, bar, baz"
}

Then, both the $content variable and the $metaKeywords variable will be accessible in your view file.

About

A Laravel middleware that injects a server-side rendered React app into the view.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages