{"id":28702049,"url":"https://github.com/django-cms/djangocms-react-proj","last_synced_at":"2026-02-27T02:33:29.585Z","repository":{"id":291072206,"uuid":"923127516","full_name":"django-cms/djangocms-react-proj","owner":"django-cms","description":"A demo project showcasing flexibility of Django CMS where React can be first class citizen and could be used to full extent","archived":false,"fork":false,"pushed_at":"2025-05-02T07:55:23.000Z","size":179,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2026-02-23T06:37:17.609Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/django-cms.png","metadata":{"files":{"readme":"README.rst","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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,"zenodo":null},"funding":{"github":["django-cms"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"thanks_dev":null,"custom":null}},"created_at":"2025-01-27T17:31:37.000Z","updated_at":"2025-05-04T08:03:41.000Z","dependencies_parsed_at":"2025-05-02T08:46:15.291Z","dependency_job_id":"28fbc602-4d7f-4599-aca2-5ba38e61432a","html_url":"https://github.com/django-cms/djangocms-react-proj","commit_stats":null,"previous_names":["django-cms/djangocms-react-proj"],"tags_count":0,"template":false,"template_full_name":"django-cms/django-cms-quickstart","purl":"pkg:github/django-cms/djangocms-react-proj","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/django-cms%2Fdjangocms-react-proj","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/django-cms%2Fdjangocms-react-proj/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/django-cms%2Fdjangocms-react-proj/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/django-cms%2Fdjangocms-react-proj/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/django-cms","download_url":"https://codeload.github.com/django-cms/djangocms-react-proj/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/django-cms%2Fdjangocms-react-proj/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29883102,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-26T23:51:21.483Z","status":"online","status_checked_at":"2026-02-27T02:00:06.759Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2025-06-14T12:09:32.047Z","updated_at":"2026-02-27T02:33:29.556Z","avatar_url":"https://github.com/django-cms.png","language":"JavaScript","funding_links":["https://github.com/sponsors/django-cms"],"categories":[],"sub_categories":[],"readme":"Making React a First-Class Citizen in Django CMS with React Router Integration\n===============================================================================\n\nIntroduction\n------------\n\nDjango CMS is a powerful content management system that excels at structured, editorial content.\nHowever, modern frontend experiences often demand the flexibility and interactivity of React.\n\nIn this post, we'll walk through how React — along with React Router — can be integrated as\nfirst-class citizens in a Django CMS project, so that your editors and frontend engineers\ncan both thrive.\n\nWhy Integrate React with Django CMS\n-----------------------------------\n\n- Django CMS provides content structure, versioning, and editorial workflows.\n- React enables interactive, dynamic UIs with modern developer ergonomics.\n- Common use cases:\n\n  - Embedding a dashboard or widget inside CMS-managed pages.\n  - Creating fully dynamic web apps that live at certain CMS-defined routes.\n  - Building reusable React-based plugins inside Django CMS placeholders.\n\nApproach Overview\n-----------------\n\nThere are two major strategies:\n\n- **SPA-in-CMS:** Let Django CMS render the base HTML layout and inject React into a placeholder.\n- **CMS-in-SPA:** Use Django CMS as a headless backend and build everything with React.\n\nIn this guide, we'll use the **SPA-in-CMS** approach, where React is bootstrapped inside\na Django CMS placeholder and React Router manages the internal routing.\n\nProject Setup\n-------------\n\n1. Setup Django CMS (you can use `djangocms-installer` or your custom setup).\n2. Create a React app:\n\n   - With `create-react-app`, Vite, or Webpack.\n3. Integrate using either:\n\n   - `django-webpack-loader` (Webpack),\n   - or `django-vite`.\n\nServing React from Django CMS\n-----------------------------\n\n- Create a Django CMS plugin that renders a `\u003cdiv id=\"react-root\"\u003e\u003c/div\u003e` in a placeholder.\n- This div acts as the mounting point for the React app.\n- Your CMS template might look like:\n\n  .. code-block:: html\n\n     {% load render_placeholder %}\n     \u003chtml\u003e\n       \u003cbody\u003e\n         {% render_placeholder \"main\" %}\n         \u003cscript src=\"{% render_bundle 'main' %}\"\u003e\u003c/script\u003e\n       \u003c/body\u003e\n     \u003c/html\u003e\n\n- You can also pass page or context data from the backend to React via `data-*` attributes or global JS variables.\n\nReact Router Configuration\n--------------------------\n\n- Wrap your React app with `\u003cBrowserRouter\u003e` or `\u003cHashRouter\u003e`.\n- Configure a base path if the React app lives under a CMS-defined URL like `/app/`.\n- Example:\n\n  .. code-block:: jsx\n\n     import { BrowserRouter, Routes, Route } from 'react-router-dom';\n\n     const App = () =\u003e (\n       \u003cBrowserRouter basename=\"/app\"\u003e\n         \u003cRoutes\u003e\n           \u003cRoute path=\"/\" element={\u003cHome /\u003e} /\u003e\n           \u003cRoute path=\"profile\" element={\u003cProfile /\u003e} /\u003e\n         \u003c/Routes\u003e\n       \u003c/BrowserRouter\u003e\n     );\n\nHandling Routing Conflicts\n--------------------------\n\n- Prevent Django from trying to resolve React's client-side routes.\n- Add a CMS page with the URL `/app/` and insert your React plugin there.\n- Any sub-routes like `/app/profile` will be handled by React Router.\n\nAdvanced Considerations\n-----------------------\n\n- **SEO/SSR**: React apps are client-side rendered; for SEO-heavy use cases, consider SSR or pre-rendering.\n- **i18n**: Pass `language_code` from Django CMS to React, and use libraries like `react-i18next`.\n- **Context sync**: Provide CMS context to React via props, global config, or context providers.\n\nExample Configuration Snippets\n------------------------------\n\n- **Webpack:**\n\n  .. code-block:: js\n\n     // webpack.config.js\n     output: {\n       publicPath: '/static/webpack_bundles/',\n     }\n\n- **settings.py:**\n\n  .. code-block:: python\n\n     INSTALLED_APPS += ['webpack_loader']\n     WEBPACK_LOADER = {\n         'DEFAULT': {\n             'BUNDLE_DIR_NAME': 'webpack_bundles/',\n             'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),\n         }\n     }\n\n- **CMS Template:**\n\n  .. code-block:: html\n\n     \u003cdiv id=\"react-root\"\u003e\u003c/div\u003e\n\n- **React App Entry:**\n\n  .. code-block:: js\n\n     import ReactDOM from 'react-dom/client';\n     import App from './App';\n\n     const root = document.getElementById('react-root');\n     ReactDOM.createRoot(root).render(\u003cApp /\u003e);\n\nDeployment Tips\n---------------\n\n- Run `npm run build` (or Vite equivalent).\n- Collect static files via `collectstatic`.\n- Optionally serve assets via CDN.\n- Avoid client/server routing conflicts by keeping React confined under predictable base paths.\n\nConclusion\n----------\n\nBy carefully integrating React into Django CMS via placeholders and using React Router for\nclient-side navigation, you can build rich, dynamic UIs within an editorially friendly platform.\n\nThis hybrid setup lets you enjoy the best of both worlds — clean backend content structure\nand dynamic, reactive frontends.\n\nOptional Appendix\n-----------------\n\n- Example repo link (if any)\n- Troubleshooting:\n\n  - Missing static files?\n  - Routing conflicts?\n  - React Router not picking up URL paths?\n\n- Future ideas:\n\n  - Use of Next.js or RSC (React Server Components).\n  - CMS-driven metadata injection for SSR.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdjango-cms%2Fdjangocms-react-proj","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdjango-cms%2Fdjangocms-react-proj","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdjango-cms%2Fdjangocms-react-proj/lists"}