af-component-react

Homepage · Documentation · Support

The React Frontend Component. Adds a react frontend to an existing fastapi-server component.

af-component-react is an App Framework component for developers building DataRobot App Templates who need a ready-made React UI layer wired to a FastAPI backend. It is designed for app developers who want to ship a web interface without hand-rolling the build pipeline and deployment wiring from scratch.

The component ships a React app scaffold, a Vite build pipeline, and the Pulumi infrastructure glue that embeds the compiled frontend into a DataRobot ApplicationSource. Because the component is repeatable, you can apply it more than once to add multiple independent React frontends to a single project — each with its own answer file and app name.

Table of contents

• Prerequisites
• Quick start
• Component dependencies
  • Required
  • Local development
  • Updating
• Troubleshooting
• Next steps and cross-links
• Contributing, changelog, support, and legal

Prerequisites

The following tools are required before applying this component:

• Python 3.11+
• uv installed
• dr installed
• Node.js 18+ (required for the React/Vite build)
• The base component already applied to your project
• The fastapi-backend component already applied to your project

Quick start

Run the following command in your project directory:

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

If you need additional control, you can run this to use copier directly:

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

The copier wizard asks for a react_app name (for example, frontend). This name namespaces the generated files and answer file.

Adding a second frontend — because this component is repeatable, run the command again and supply a different react_app name:

uvx copier copy https://github.com/datarobot-community/af-component-react .

Component dependencies

This component depends on other App Framework components that must already be applied before you add the React frontend.

Required

The following components must be applied to the project before this component:

Name	Repository	Repeatable
base	https://github.com/datarobot-community/af-component-base	No
fastapi-backend	https://github.com/datarobot-community/af-component-fastapi-backend	No

Local development

After applying both this component and fastapi-backend, one manual step is required to connect them in the Pulumi infrastructure. In infra/infra/web.py (the file generated by the fastapi-backend component), import the React frontend module:

from .REACT_APP_NAME import REACT_APP_NAME

Then update the ApplicationSource for your FastAPI app to wait for the frontend build before collecting app files:

FASTAPI_APP_NAME_app_source = pulumi_datarobot.ApplicationSource(
-    files=get_FASTAPI_APP_NAME_app_files(runtime_parameter_values=FASTAPI_APP_NAME_app_runtime_parameters),
+    files=frontend_web.stdout.apply(
+        lambda _: get_FASTAPI_APP_NAME_app_files(
+            runtime_parameter_values=FASTAPI_APP_NAME_app_runtime_parameters
+        )
+    ),
    runtime_parameter_values=FASTAPI_APP_NAME_app_runtime_parameters,
    resources=pulumi_datarobot.ApplicationSourceResourcesArgs(
        resource_label=CustomAppResourceBundles.CPU_XL.value.id,
    ),
    required_key_scope_level=required_key_scope_level,
    **FASTAPI_APP_NAME_app_source_args,
)

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

Running locally

Start the Vite dev server from the generated frontend directory:

cd frontend_REACT_APP_NAME
npm install
npm run dev

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

Updating

All components should be regularly updated to pick up bug fixes, new features, and compatibility with the latest DataRobot App Framework.

For automatic updates to the latest version, run the following command in your project directory:

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

If you need more fine-grained control and prefer using copier directly:

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

To update all copied components at once:

uvx copier update -a .datarobot/answers/*.yaml -A

Troubleshooting

The most common issues arise when the Pulumi wiring step is incomplete or when Node.js versions are mismatched.

Frontend assets not included in the deployed app—you likely skipped the ApplicationSource wiring step. 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 stomping on each other—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—copier tracks which answers you gave and re-applies them during update. Place customizations in files that copier does not manage, outside the generated scaffold.

Next steps and cross-links

After adding the React component, explore the rest of the App Framework ecosystem to extend your application.

• App Framework documentation—full reference for components, templates, and deployment.
• af-component-base—required foundation component.
• af-component-fastapi-backend—the FastAPI backend this component pairs with.
• App Framework Studio — Confluence—internal architecture and design decisions.

Contributing, changelog, support, and legal

Contributions are welcome. Open a pull request against the main branch and run task lint before submitting. See CONTRIBUTING.md if present.

Getting help—file a GitHub Issue in this repository or reach out via the DataRobot support portal.

License—released under the terms in LICENSE.