diff --git a/cms/src/apps/example_app/templates/example_app/index.html b/cms/src/apps/example_app/templates/example_app/index.html index 1d46c70..3172b7b 100644 --- a/cms/src/apps/example_app/templates/example_app/index.html +++ b/cms/src/apps/example_app/templates/example_app/index.html @@ -7,7 +7,17 @@ {% endaddtoblock %} +{% addtoblock "js" %} +{# Optional: create this file in your project to load your React build. #} +{# Example: it can include #} +{% include "example_app/react-imports.html" ignore missing %} +{% endaddtoblock %} +

Example App

Example application content.

+
+
+
+ {% endblock %} diff --git a/docs/configure-project.md b/docs/configure-project.md index 95158c9..4e088b0 100644 --- a/docs/configure-project.md +++ b/docs/configure-project.md @@ -37,6 +37,7 @@ To know what settings are typically customized, see [TACC/Core-CMS:`/…/setting - Update `custom_app_settings.py` with pertinent content from [TACC/Core-CMS:`/taccsite_cms/custom_app_settings.example.py`](https://github.com/TACC/Core-CMS/blob/1d88c35/taccsite_cms/custom_app_settings.example.py). - Update `urls_custom.py` with pertinent content from [TACC/Core-CMS:`/taccsite_cms/urls_custom.example.py`](https://github.com/TACC/Core-CMS/blob/1d88c35/taccsite_cms/urls_custom.example.py). +- If your custom app needs to host React UI, see [`docs/react-custom-app.md`](react-custom-app.md). diff --git a/docs/react-custom-app.md b/docs/react-custom-app.md new file mode 100644 index 0000000..6f8266e --- /dev/null +++ b/docs/react-custom-app.md @@ -0,0 +1,76 @@ +# React Custom App (Docs-Only Integration) + +This template repo does **not** ship a React build system. Instead, it documents a convention for hosting a React build inside Core-CMS via a custom Django app. + +The recommended developer experience matches `tup-cms-react` “widget mounts”: the React entrypoint looks for a DOM element by ID and **only mounts if it exists**. That keeps the Django/CMS side in control of where (and whether) the React UI appears. + +## Concepts + +- **Mount-by-ID (recommended)**: Your React entrypoint does something like `document.getElementById('cms-sysmon')` and renders only when found. This supports one widget or multiple widgets on a page. +- **Full-page app (also supported)**: Same idea, but you mount a single React root (e.g. `id="root"`) and render a router-driven SPA. +- **Asset include**: Django templates include a small snippet (often called `*-imports.html`) that loads the built JS/CSS from `/static/...`. + +## File placement conventions + +### React build output + +Put your compiled assets under your project’s Django static tree so `collectstatic` picks them up. For example: + +- `cms/src/taccsite_custom//static//react//assets/...` + +Your actual structure depends on your React toolchain. The only requirement is that, after `collectstatic`, the assets are reachable under `/static/...`. + +### Template snippet to load assets + +Create a template include that contains the script tags for your build, for example: + +- `cms/src/taccsite_custom//templates/react/-imports.html` + +This file is intentionally a *plain include* so you can swap it between dev/prod (or between different build outputs) without changing the page template. + +## Example: “widget mount” (Sysmon-style) + +### 1) Add a mount point in a Django template + +In the template where you want the widget to appear, add a mount element with a stable ID: + +```html +
+
+
+``` + +Your React entrypoint should check for `#cms-sysmon` and only render if present. + +### 2) Include your React assets + +If your templates use Sekizai (Core-CMS does), prefer adding scripts to the JS block rather than inline. A common pattern: + +```django +{% load sekizai_tags %} + +{% addtoblock "js" %} + {% include "react/sysmon-imports.html" %} +{% endaddtoblock %} +``` + +The included `react/sysmon-imports.html` should contain `