{"id":22245519,"url":"https://github.com/alexandrekilian/craft-react","last_synced_at":"2025-07-28T02:33:02.119Z","repository":{"id":56944616,"uuid":"134946126","full_name":"AlexandreKilian/craft-react","owner":"AlexandreKilian","description":"Client and Server-side React rendering for CraftCMS","archived":false,"fork":false,"pushed_at":"2019-03-24T16:57:06.000Z","size":33,"stargazers_count":43,"open_issues_count":1,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-24T11:31:50.744Z","etag":null,"topics":["craft-plugin","craft3","craftcms","craftcms-plugin","react","react-redux","reactjs","server-side-rendering"],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlexandreKilian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-26T09:06:51.000Z","updated_at":"2024-02-28T16:02:56.000Z","dependencies_parsed_at":"2022-08-21T02:40:20.091Z","dependency_job_id":null,"html_url":"https://github.com/AlexandreKilian/craft-react","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexandreKilian%2Fcraft-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexandreKilian%2Fcraft-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexandreKilian%2Fcraft-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexandreKilian%2Fcraft-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlexandreKilian","download_url":"https://codeload.github.com/AlexandreKilian/craft-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227857494,"owners_count":17830210,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["craft-plugin","craft3","craftcms","craftcms-plugin","react","react-redux","reactjs","server-side-rendering"],"created_at":"2024-12-03T05:16:23.387Z","updated_at":"2024-12-03T05:16:23.974Z","avatar_url":"https://github.com/AlexandreKilian.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Craft React\n\nCraft CMS React Renderer lets you implement React.js client and server-side rendering in your Craft CMS projects.\n\nIt is an implementation of [ReactBundle](https://github.com/Limenius/ReactRenderer) for CraftCMS. 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).\n\n## Why Server-Side rendering?\nBy 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.\n\n## How it works\nPlease 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).\n\n## Installation\n\nTo install the plugin, follow these instructions:\n1. Open your terminal and go to your Craft project:\n\n        cd /path/to/project\n\n2. Then tell Composer to load the plugin: \n\n        composer require alexk/craft-react\n        \nIn the Control Panel, go to Settings → Plugins and click the “Install” button for Craft React.\n\n## Setup\n\nIn the plugin settings, add the following entries:\n\n`Environment: \"client_side\", \"server_side\" or \"both\"`\n\n`Server Bundle: \"PATH_TO_SERVER_BUNDLE\"`\n\nor override the settings globally in `config/react.php`\n\n\n```php\n\u003c?php\n\nreturn [\n    'env' =\u003e 'client_side',\n    'serverBundle' =\u003e 'app/server-bundle.js',\n];\n\n```\n\n\nIn your template, add the following TWIG-function where you want your react application to be rendered into:\n```twig\n    {{ react_component('MyApp', {'props': {entry: entry}}) }}\n```\n\nIn the props, pass whatever props you want to pass to your root component.\n\n\n## Serialization\n\nIn order to serialize your entries to create a store or props, the new twig function `serialize(entry, schema = 'entry', group = 'default') ` has been introduced. This allows you to create a php file to serialize your entries. Files should be located in `config/react` and should be named `[schema].php`.\nIf unspecified, the schema will default to `entry.php` and the group to `default`.\n\n```php entry.php\n\u003c?php\n# config/react/entry.php\n\nuse craft\\elements\\Entry;\n\nreturn [\n    'default' =\u003e function(Entry $entry){// named after the group\n        return [\n            'id' =\u003e $entry-\u003eid,\n            'title' =\u003e $entry-\u003etitle,\n            'customField' =\u003e $entry-\u003ecustomField,\n         ];\n    }\n];\n```\n\nTo use it in twig, just pass your current entry and use the result in your store:\n\n```twig \n{# _entry.twig #}\n\n{% set serializedBlogPost = serialize(entry,'blog', 'detail') %}\n{{ react_component('MyApp', {'props': {blogpost: serializedBlogPost}}) }}\n```\n\nThis will use the file `config/react/blog.php`\n\n```php\n\u003c?php\n# config/react/blog.php\n\nuse craft\\elements\\Entry;\n\nreturn [\n    'detail' =\u003e function(Entry $entry){\n        return [\n            'id' =\u003e $entry-\u003eid,\n            'title' =\u003e $entry-\u003etitle,\n            'content' =\u003e $entry-\u003econtent,// custom field\n         ];\n    }\n];\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandrekilian%2Fcraft-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexandrekilian%2Fcraft-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandrekilian%2Fcraft-react/lists"}