{"id":17643778,"url":"https://github.com/mic159/react-render","last_synced_at":"2025-04-06T03:08:56.358Z","repository":{"id":30678899,"uuid":"34234752","full_name":"mic159/react-render","owner":"mic159","description":"Server-side rendering of React components for python Django","archived":false,"fork":false,"pushed_at":"2024-05-11T13:01:08.000Z","size":1111,"stargazers_count":137,"open_issues_count":4,"forks_count":14,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-30T02:09:43.010Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Python","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/mic159.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-04-20T03:00:10.000Z","updated_at":"2025-02-06T16:23:36.000Z","dependencies_parsed_at":"2024-06-19T19:05:08.241Z","dependency_job_id":"13a17405-bba7-4109-8947-6194aaaf150d","html_url":"https://github.com/mic159/react-render","commit_stats":{"total_commits":244,"total_committers":13,"mean_commits":18.76923076923077,"dds":0.6065573770491803,"last_synced_commit":"90ce0f17c86000205632770b273ac72078b70524"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mic159%2Freact-render","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mic159%2Freact-render/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mic159%2Freact-render/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mic159%2Freact-render/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mic159","download_url":"https://codeload.github.com/mic159/react-render/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247427006,"owners_count":20937201,"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":[],"created_at":"2024-10-23T09:24:12.666Z","updated_at":"2025-04-06T03:08:56.336Z","avatar_url":"https://github.com/mic159.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"React Render\n============\n\nRender React components on the server side in Django, also called \"isomorphic React\".\nYou would do this for faster page loads, to make it friendlier to web crawlers and for SEO.\n\nExample\n-------\n\n```python\nfrom react_render.django.render import render_component\n\nprops = {\n    'foo': 'bar',\n    'woz': [1,2,3],\n}\n\nrendered = render_component('path/to/component.js', props=props)\n\nprint(rendered)\n```\n\nHow it works\n------------\n\nIt works by having a NodeJS service on the same server that can render the React components.\nThe Python just uses a simple HTTP API to send the context and the file path over to the service, and it responds with\n the rendered HTML.\n\nDocumentation\n=============\n\n- [Installation](#installation)\n- [render_component()](#render_component)\n- [RenderedComponent](#renderedcomponent)\n- [Running the tests](#running-the-tests)\n- [react-service settings](#react-service-settings)\n\nInstallation\n------------\n\n```bash\nnpm install react-render-service --save\npip install react-render-client\n```\n\n_Optional:_ Point it to the service in your settings.py\n\n```python\nREACT_SERVICE_URL = 'http://localhost:63578/render'\n```\n\nStart the node server which hosts the renderer.\n\n```bash\nreact-service --debug\n```\n\nrender_component()\n------------------\n\nRenders a component to its initial HTML.\n\nReturns a `RenderedComponent` instance, which can be passed directly into templates \nto output the component's HTML.\n\nArguments:\n\n- `path_to_source` — a path to a JS file which exports the component. If the \n  path is relative, django's static file finders will be used to find the file.\n  *NOTE* Must be compiled JS, not JSX.\n- `props` *optional* — a dictonary that will be serialised to JSON and passed to \n  the component during the renderering process.\n- `to_static_markup` *optional* — a boolean indicating that React's `renderToStaticMarkup`\n  method should be used for the rendering. Defaults to `False`, which causes React's \n  `renderToString` method to be used.\n- `json_encoder` *optional* — a class which is used to encode the JSON which is sent to the \n  renderer. Defaults to `django.core.serializers.json.DjangoJSONEncoder`.\n- `timeout` *optional* - override the service timeout.\n\n\nRenderedComponent\n-----------------\n\nThe result of rendering a component to its initial HTML. RenderedComponents can be passed\ndirectly into templates where they output the generated HTML.\n\n```python\n# Render the component\nmy_component = render_component(...)\n\n# Print the generated HTML\nprint(my_component)\n```\n```html\n\u003c!-- Insert the generated HTML into your template --\u003e\n{{ my_component }}\n```\n\nRenderedComponents have a helper method, `render_props`, which outputs your JSON-serialized \nprops. This allows you to reuse the encoded form of your props on the client-side.\n\n```html\n\u003cscript\u003e\n    var myProps = {{ my_component.render_props }};\n\u003c/script\u003e\n```\n\nreact-service settings\n----------------\n\n- `--host` Bind to a different interface, by default this is localhost.\n- `--port` Bind to a different port. By default it is `63578`\n- `--watch` Enable developer mode where it will automatically re-load the bundles if they change.\n- `--whitelist` Restrict the directory that the service can access.\n  By default, the service will attempt to load any arbitrary path it is given.\n  Can also be set via the `REACT_WHITELIST` environment variable.\n\nDjango settings\n----------------\n\n- `REACT_SERVICE_URL`\n   - Customer URL for the render service (eg. for changing port)\n   - Default: `http://localhost:63578/render`\n- `REACT_FAIL_SAFE`\n   - If there is a problem with the service, do not raise an exception, and return empty HTML\n     (allowing the client-side JS to take over)\n   - Default: `False`\n- `REACT_TIMEOUT`\n   - How long (in seconds) should it wait for nodejs to render the component\n   - Default: `10`\n\n\nRunning the tests\n-----------------\n\n```bash\nmkvirtualenv react-render\npip install -e .\ncd tests\nnpm install\nnpm run build\ncd ..\npython runtests.py\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmic159%2Freact-render","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmic159%2Freact-render","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmic159%2Freact-render/lists"}