{"id":50594505,"url":"https://github.com/datarobot-community/af-component-react","last_synced_at":"2026-06-05T13:01:01.215Z","repository":{"id":351822577,"uuid":"960010446","full_name":"datarobot-community/af-component-react","owner":"datarobot-community","description":"The base React component for App Templates","archived":false,"fork":false,"pushed_at":"2026-05-26T16:10:04.000Z","size":142,"stargazers_count":1,"open_issues_count":1,"forks_count":1,"subscribers_count":8,"default_branch":"main","last_synced_at":"2026-05-26T18:09:54.905Z","etag":null,"topics":["dr-engineering"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/datarobot-community.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS","dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-04-03T18:00:02.000Z","updated_at":"2026-05-26T16:10:54.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/datarobot-community/af-component-react","commit_stats":null,"previous_names":["datarobot-community/af-component-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/datarobot-community/af-component-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datarobot-community%2Faf-component-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datarobot-community%2Faf-component-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datarobot-community%2Faf-component-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datarobot-community%2Faf-component-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/datarobot-community","download_url":"https://codeload.github.com/datarobot-community/af-component-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datarobot-community%2Faf-component-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33942436,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-05T02:00:06.157Z","response_time":120,"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":["dr-engineering"],"created_at":"2026-06-05T13:00:54.730Z","updated_at":"2026-06-05T13:01:01.208Z","avatar_url":"https://github.com/datarobot-community.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/datarobot-community/af-component-react\"\u003e\n    \u003cimg src=\"https://af.datarobot.com/img/datarobot_logo.avif\" width=\"600px\" alt=\"DataRobot Logo\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003cspan style=\"font-size: 1.5em; font-weight: bold; display: block;\"\u003eaf-component-react\u003c/span\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://datarobot.com\"\u003eHomepage\u003c/a\u003e\n  ·\n  \u003ca href=\"https://af.datarobot.com\"\u003eDocumentation\u003c/a\u003e\n  ·\n  \u003ca href=\"https://docs.datarobot.com/en/docs/get-started/troubleshooting/general-help.html\"\u003eSupport\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/datarobot-community/af-component-react/tags\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/v/tag/datarobot-community/af-component-react?label=version\" alt=\"Latest Release\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/datarobot-community/af-component-react\" alt=\"License\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://join.slack.com/t/datarobot-community/shared_invite/zt-3uzfp8k50-SUdMqeux25ok9_5wr4okrg\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/%23applications-a?label=Slack\u0026labelColor=30373D\u0026color=81FBA6\" alt=\"Slack #applications\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nThe React Frontend Component. Adds a react frontend to an existing fastapi-server component.\n\n`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.\n\nThe component ships a React app scaffold, a Vite build pipeline, the [dr-ui](https://dr-ui.datarobot.com/en/docs/) component registry, 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.\n\n\n# Table of contents\n\n- [Prerequisites](#prerequisites)\n- [Quick start](#quick-start)\n- [UI components (dr-ui)](#ui-components-dr-ui)\n- [Component dependencies](#component-dependencies)\n  - [Required](#required)\n  - [Local development](#local-development)\n  - [Updating](#updating)\n- [Troubleshooting](#troubleshooting)\n- [Next steps and cross-links](#next-steps-and-cross-links)\n- [Contributing, changelog, support, and legal](#contributing-changelog-support-and-legal)\n\n\n# Prerequisites\n\nThe following tools are required before applying this component:\n\n- Python 3.11+\n- [`uv`](https://docs.astral.sh/uv/) installed\n- [`dr`](https://cli.datarobot.com) installed\n- Node.js 18+ (required for the React/Vite build)\n- The [`base`](https://github.com/datarobot-community/af-component-base) component already applied to your project\n- The [`fastapi-backend`](https://github.com/datarobot-community/af-component-fastapi-backend) component already applied to your project\n\n\n# Quick start\n\nRun the following command in your project directory:\n\n```bash\ndr component add https://github.com/datarobot-community/af-component-react .\n```\n\nIf you need additional control, you can run this to use copier directly:\n\n```bash\nuvx copier copy datarobot-community/af-component-react .\n```\n\nThe copier wizard asks for a `react_app` name (for example, `frontend`). This name namespaces the generated files and answer file.\n\n**Adding a second frontend** — because this component is repeatable, run the command again and supply a different `react_app` name:\n\n```bash\nuvx copier copy https://github.com/datarobot-community/af-component-react .\n```\n\n\n# UI components (dr-ui)\n\nThe React scaffold ships with [dr-ui](https://dr-ui.datarobot.com/en/docs/) preconfigured — DataRobot's internal [shadcn](https://ui.shadcn.com/) component registry. It includes design [tokens](https://dr-ui.datarobot.com/en/docs/foundation/tokens/), [typography classes](https://dr-ui.datarobot.com/en/docs/foundation/typography/), UI primitives, and higher-level components such as Chat, Grid, etc. Everything is built on shadcn-compatible tokens, so you can theme and customize any component while still inheriting the DataRobot design system by default.\n\nSee the [dr-ui documentation](https://dr-ui.datarobot.com/en/docs/) for the component catalog and instructions for adding components to your project.\n\n\n# Component dependencies\n\nThis component depends on other App Framework components that must already be applied before you add the React frontend.\n\n## Required\n\nThe following components must be applied to the project **before** this component:\n\n| Name | Repository | Repeatable |\n|------|-----------|------------|\n| `base` | [https://github.com/datarobot-community/af-component-base](https://github.com/datarobot-community/af-component-base) | No |\n| `fastapi-backend` | [https://github.com/datarobot-community/af-component-fastapi-backend](https://github.com/datarobot-community/af-component-fastapi-backend) | No |\n\n## Local development\n\nAfter 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:\n\n```python\nfrom .REACT_APP_NAME import REACT_APP_NAME\n```\n\nThen update the `ApplicationSource` for your FastAPI app to wait for the frontend build before collecting app files:\n\n```diff\nFASTAPI_APP_NAME_app_source = pulumi_datarobot.ApplicationSource(\n-    files=get_FASTAPI_APP_NAME_app_files(runtime_parameter_values=FASTAPI_APP_NAME_app_runtime_parameters),\n+    files=frontend_web.stdout.apply(\n+        lambda _: get_FASTAPI_APP_NAME_app_files(\n+            runtime_parameter_values=FASTAPI_APP_NAME_app_runtime_parameters\n+        )\n+    ),\n    runtime_parameter_values=FASTAPI_APP_NAME_app_runtime_parameters,\n    resources=pulumi_datarobot.ApplicationSourceResourcesArgs(\n        resource_label=CustomAppResourceBundles.CPU_XL.value.id,\n    ),\n    required_key_scope_level=required_key_scope_level,\n    **FASTAPI_APP_NAME_app_source_args,\n)\n```\n\nThis ensures the Vite build completes before Pulumi collects the compiled assets for deployment.\n\n### Running locally\n\nStart the Vite dev server from the generated frontend directory:\n\n```bash\ncd frontend_REACT_APP_NAME\nnpm install\nnpm run dev\n```\n\nThe dev server proxies API requests to the FastAPI backend running on its configured port. See the generated `vite.config.ts` for proxy settings.\n\n## Updating\n\nAll components should be regularly updated to pick up bug fixes, new features, and compatibility with the latest DataRobot App Framework.\n\nFor automatic updates to the latest version, run the following command in your project directory:\n\n```bash\ndr component update .datarobot/answers/react-REACT_APP_NAME.yml\n```\n\nIf you need more fine-grained control and prefer using copier directly:\n\n```bash\nuvx copier update -a .datarobot/answers/react-REACT_APP_NAME.yml -A\n```\n\nTo update all copied components at once:\n\n```bash\nuvx copier update -a .datarobot/answers/*.yaml -A\n```\n\n\n# Troubleshooting\n\nThe most common issues arise when the Pulumi wiring step is incomplete or when Node.js versions are mismatched.\n\n**Frontend assets not included in the deployed app**\u0026mdash;you likely skipped the `ApplicationSource` wiring step. Confirm that `files=` uses `.stdout.apply(...)` rather than calling `get_*_app_files(...)` directly.\n\n**`uvx copier copy` fails on Node version**\u0026mdash;the Vite build requires Node.js 18+. Run `node --version` and upgrade if needed.\n\n**Multiple frontends stomping on each other**\u0026mdash;each `react_app` name must be unique. Check `.datarobot/answers/` — each frontend should have its own `react-NAME.yml` file.\n\n**Copier update overwrites local changes**\u0026mdash;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.\n\n\n# Next steps and cross-links\n\nAfter adding the React component, explore the rest of the App Framework ecosystem to extend your application.\n\n- [App Framework documentation](https://af.datarobot.com)\u0026mdash;full reference for components, templates, and deployment.\n- [af-component-base](https://github.com/datarobot-community/af-component-base)\u0026mdash;required foundation component.\n- [af-component-fastapi-backend](https://github.com/datarobot-community/af-component-fastapi-backend)\u0026mdash;the FastAPI backend this component pairs with.\n- [App Framework Studio — Confluence](https://datarobot.atlassian.net/wiki/spaces/BOPS/pages/6542032899/App+Framework+-+Studio)\u0026mdash;internal architecture and design decisions.\n\n\n# Contributing, changelog, support, and legal\n\nContributions are welcome. Open a pull request against the `main` branch and run `task lint` before submitting. See [CONTRIBUTING.md](CONTRIBUTING.md) if present.\n\n**Getting help**\u0026mdash;file a GitHub Issue in this repository or reach out via the DataRobot [support portal](https://docs.datarobot.com/en/docs/get-started/troubleshooting/general-help.html).\n\n**License**\u0026mdash;released under the terms in [LICENSE](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatarobot-community%2Faf-component-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatarobot-community%2Faf-component-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatarobot-community%2Faf-component-react/lists"}