unionai · nelsonjr · Sep 9, 2025
diff --git a/flyte-sdk/typescript/react/.gitignore b/flyte-sdk/typescript/react/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+gen/
diff --git a/flyte-sdk/typescript/react/.prettierrc b/flyte-sdk/typescript/react/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true
+}
diff --git a/flyte-sdk/typescript/react/README.md b/flyte-sdk/typescript/react/README.md
@@ -0,0 +1,64 @@
+# React Application -- Accessing Union V2
+
+This sample React application, built with [Vite][vite], showcases how to access Union V2 APIs.
+
+## Requirements
+
+- Union V2 URL: The URL of the Union V2 instance that you are using.
+- OAuth Client ID: The client ID of the OAuth client that you created in Union V2.
+- Organization ID: The ID of the organization that you created in Union V2.
+
+As any OAuth2 application, the authorization server must allow the redirect back to the application. In this example the path is:
+
+    /oauth2/callback
+
+If your application is deployed on a custom domain, you need to configure the redirect URI to include the domain. For example:
+
+    https://<your-domain>/oauth2/callback
+
+For this sample, the redirect URI is:
+
+    http://localhost:5173/oauth2/callback
+
+> Please reach out to Union support to get a client ID for your application and redirect URI.
+
+## Configuration
+
+You need to configure these three variables in `union.config.ts`:
+
+    const UNION_ORG_URL = 'https://<your-organization-url>'
+    const UNION_CLIENT_ID = '<client-id>'
+    const UNION_ORG_ID = '<organization-id>'
+
+Example:
+
+    const UNION_ORG_URL = 'https://tryv2.hosted.unionai.cloud'
+    const UNION_CLIENT_ID = '0oaqfip14wHD4EuT35d7'
+    const UNION_ORG_ID = 'tryv2'
+
+## Running
+
+To run you simple run as a regular Vite application:
+
+    pnpm install
+    pnpm run dev
+
+## Deploying
+
+### As a Union Application
+
+TBD
+
+### On your own infrastructure
+
+To deploy this application on your own domain, you need to configure the server that's hosting the application to redirect requests to Union V2.
+
+This example uses the following services:
+
+        /.well-known/openid-configuration
+        /flyteidl.service.AdminService
+        /cloudidl.workflow.RunService
+
+As this is a pure-client React app, it does not provide a server-side component. Please ensure the server forwards those requests to your organization's Union V2 instance, same as `UNION_ORG_URL`.
+
+[vite]: https://vitejs.dev/
diff --git a/flyte-sdk/typescript/react/eslint.config.js b/flyte-sdk/typescript/react/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { globalIgnores } from 'eslint/config'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
diff --git a/flyte-sdk/typescript/react/index.html b/flyte-sdk/typescript/react/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Union 2.0 Typescript</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/flyte-sdk/typescript/react/package.json b/flyte-sdk/typescript/react/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "flyte-ts-sample",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@bufbuild/protobuf": "^2.7.0",
+    "@connectrpc/connect": "^2.1.0",
+    "@connectrpc/connect-web": "^2.1.0",
+    "@flyteorg/flyteidl2": "2.0.0-alpha4",
+    "http-proxy-middleware": "^3.0.5",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-oauth2-code-pkce": "^1.23.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.33.0",
+    "@types/node": "^24.3.1",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^5.0.0",
+    "eslint": "^9.33.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.39.1",
+    "vite": "^7.1.2"
+  }
+}