PHPackages                             zoilorys/craft-react-external-server - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. zoilorys/craft-react-external-server

ActiveCraft-plugin[Templating & Views](/categories/templating)

zoilorys/craft-react-external-server
====================================

Client and Server-side React rendering for CraftCMS using external server

1.3.3(6y ago)19MITPHP

Since May 26Pushed 6y agoCompare

[ Source](https://github.com/zoilorys/craft-react-external-server)[ Packagist](https://packagist.org/packages/zoilorys/craft-react-external-server)[ RSS](/packages/zoilorys-craft-react-external-server/feed)WikiDiscussions master Synced 4w ago

READMEChangelog (2)Dependencies (2)Versions (10)Used By (0)

Craft React External Server
===========================

[](#craft-react-external-server)

Craft CMS React Renderer lets you implement React.js client and server-side rendering in your Craft CMS projects, leveraging external node.js server to render.

This is a fork of Alexandre Kilian's project [craft-react](https://github.com/AlexandreKilian/craft-react), that is implemented using `PhpExecJsReactRenderer`, which requires `php-v8js` extension in order to run, which can be pain to setup in certain cases. This is a rewrite of the plugin, leveraging `ExternalServerReactRenderer`, which requires you to run external node.js server to render for you, which you have to run separately, but you can just use [nodemon](https://github.com/remy/nodemon) to handle restarts, so it's barely an issue to maintain it. Check [Symfony React Sandbox](https://github.com/Limenius/symfony-react-sandbox) for an example of this external server. For a complete documentation of the core functionality and client examples, as well as problems related to the Renderer itself, please check out [ReactBundle](https://github.com/Limenius/ReactRenderer) or [Symfony React Sandbox](https://github.com/Limenius/symfony-react-sandbox).

Why Server-Side rendering?
--------------------------

[](#why-server-side-rendering)

By rendering your react components on the server, you not only increase performance and search engine readability for SEO but also enable users with slower connections to be able to access your information before your client bundle has completely loaded.

How it works
------------

[](#how-it-works)

Please checkout the [Walkthrough](https://github.com/Limenius/symfony-react-sandbox#walkthrough) for a step by step explanation of the client and twig-side of this plugin. For a JSON-API, we recommend [Elements API for Craft CMS](https://github.com/craftcms/element-api).

Installation
------------

[](#installation)

To install the plugin, follow these instructions:

1. Open your terminal and go to your Craft project:

    ```
     cd /path/to/project

    ```
2. Then tell Composer to load the plugin:

    ```
     composer require zoilorys/craft-react-external-server

    ```

In the Control Panel, go to Settings → Plugins and click the “Install” button for Craft React.

Setup
-----

[](#setup)

In the plugin settings, add the following entry:

`Environment: "client_side", "server_side" or "both"`

or override the settings globally in `config/react.php`

And add `NODE_SOCK_PATH` to .env with your `node.sock` file location (refer to [Symfony React Sandbox/external-server.js](https://github.com/Limenius/symfony-react-sandbox/blob/master/external-server.js#L6) for usage)

```