Skip to content

react

Repository: github.com/datarobot-community/af-component-react

Adds a React + Vite frontend to your recipe, wired to an existing FastAPI backend. The component includes a React scaffold, a Vite build pipeline, and the Pulumi infrastructure needed to embed the compiled frontend into a DataRobot ApplicationSource.

Like fastapi-backend, this component is repeatable — apply it multiple times with different react_app names to add multiple independent frontends to one recipe.

Prerequisites

  • Python 3.11+
  • Node.js 18+
  • uv installed
  • dr installed
  • The base component already applied
  • The fastapi-backend component already applied

Apply

dr component add https://github.com/datarobot-community/af-component-react .

Or with copier directly:

uvx copier copy datarobot-community/af-component-react .

The wizard asks for a react_app name (e.g., frontend). This name namespaces all generated files and the answers file.

UI components (dr-ui)

The React scaffold ships with dr-ui preconfigured — DataRobot's internal shadcn component registry. It includes design tokens, typography classes, UI primitives, and higher-level components such as Chat and Grid. Everything is built on shadcn-compatible tokens, so you can theme and customize any component while still inheriting the DataRobot design system by default.

See the dr-ui documentation for the component catalog and instructions for adding components to your project.

Component dependencies

Component Required
base Yes
fastapi-backend Yes

Wiring to the FastAPI backend

After applying both components, one manual step connects them in Pulumi. In infra/infra/FASTAPI_APP.py, import the React frontend module and update the ApplicationSource to wait for the Vite build:

from .REACT_APP_NAME import REACT_APP_NAME

 FASTAPI_APP_app_source = pulumi_datarobot.ApplicationSource(
-    files=get_FASTAPI_APP_app_files(runtime_parameter_values=FASTAPI_APP_app_runtime_parameters),
+    files=frontend_web.stdout.apply(
+        lambda _: get_FASTAPI_APP_app_files(
+            runtime_parameter_values=FASTAPI_APP_app_runtime_parameters
+        )
+    ),
     runtime_parameter_values=FASTAPI_APP_app_runtime_parameters,
     ...
 )

This ensures the Vite build completes before Pulumi collects the compiled assets.

Local development

Start the Vite development server from the generated frontend directory:

cd frontend_REACT_APP_NAME
npm install
npm run dev

The development server proxies API requests to the FastAPI backend on its configured port. See the generated vite.config.ts for proxy settings.

Update

dr component update .datarobot/answers/react-REACT_APP_NAME.yml

Or with copier directly:

uvx copier update -a .datarobot/answers/react-REACT_APP_NAME.yml -A

Troubleshooting

Frontend assets not included in the deployed application

You likely skipped the ApplicationSource wiring step above. Confirm that files= uses .stdout.apply(...) rather than calling get_*_app_files(...) directly.

uvx copier copy fails on Node version

The Vite build requires Node.js 18+. Run node --version and upgrade if needed.

Multiple frontends overwrite one another

Each react_app name must be unique. Check .datarobot/answers/ — each frontend should have its own react-NAME.yml file.

Copier update overwrites local changes

Customizations should be placed in files copier does not manage. Copier tracks generated files via the answers file and re-applies them on update.