Flyte 2 Console

Next.js control plane UI for Flyte 2–compatible deployments.

🚀 Quick Start

Prerequisites

• Node.js (v20 or later) - JavaScript runtime environment required for running the application
• pnpm (v10.8.1) - Fast and efficient package manager alternative to npm
• Go development environment (for backend services)
• Docker (optional, for container testing)

Installing Node.js (if you haven't already)

1. Using Node Version Manager (nvm) - Recommended:

   • Follow the nvm installation guide
   • After installation, install and use Node.js LTS:

     nvm install --lts
     nvm use --lts
     node --version

2. Direct download:

   • Visit Node.js Downloads
   • Download and install the LTS version (recommended for most users)
   • Verify installation:

     node --version
     # Should output v20.x.x (current LTS)

Installing pnpm (if you haven't already)

1. Using Corepack (recommended, included with Node.js):

   # Enable Corepack (only needed once after Node.js installation)
   corepack enable
   
   # Install the required pnpm version
   corepack prepare pnpm@10.8.1 --activate
   
   # Use the correct pnpm version
   corepack use pnpm@10.8.1

2. Using npm (alternative method):

   npm install -g pnpm@10.8.1

3. Verify installation:

   pnpm --version
   # Should output: 10.8.1

If you see a different version after running pnpm --version, make sure to follow the installation steps above to get the correct version.

💻 Development Setup

1. Install dependencies:

   pnpm install

2. Choose your development path:

   Option A: Local Development with Devbox

   If you want to develop against a local backend:

   1. Set up the local development environment

   2. Create a test run:

      • clone flyte-sdk
      • Ensure your flyte-sdk config.yaml looks like this

      admin:
         endpoint: dns:///localhost:8090
         insecure: true
      image:
       builder: local
      task:
         domain: development
         org: testorg
         project: testproject

      • create a test run

      flyte run examples/basics/types/int_collection.py main

   3. Note the output containing the run ID:

      api_test.go:398: Created root run: org:"testorg" project:"testproject" domain:"development" root_name:"testroot-1744821254" name:"testroot-1744821254"
      

      Save these parameters for constructing the client URL.

   4. Start the development server:

      pnpm run dev

      When prompted, select localhost. This will:

      • Start the development server on port 8080
      • Connect to the local backend at http://localhost:8090
      • No hosts file modification needed

   Option B: Development Against Remote Domains

   If you want to develop against a specific domain:

   1. Update your /etc/hosts file to include the required domain entries:

      sudo vi /etc/hosts

      Add entries for the domains you need (examples):

      127.0.0.1 localhost.example-flyte-admin.example.com
      # Add one line per admin hostname you use with local HTTPS dev

   2. Start the client:

      pnpm run dev

      When prompted, select your target admin host (the hostname your Flyte admin API is served on). This will:

      • Generate SSL certificates
      • Start the development server
      • Connect to the selected remote backend

3. Access the application:

   • For localhost: http://localhost:8080/v2
   • For specific domains: https://localhost.{selected-domain}:8080/v2

   Example URLs:

   http://localhost:8080/v2/domain/development/project/testproject/runs
   # or, with HTTPS dev certificates against a remote admin host:
   https://localhost.<your-admin-hostname>:8080/v2/domain/development/project/flytesnacks/runs/
   

📝 Development

The application source code is located in the /src directory. The development server features hot-reload, so changes will be reflected immediately in the browser.

📚 Storybook Development

Storybook is our primary tool for component development, testing, and documentation. All stories are located in the /src/stories directory.

Running Storybook

# Start Storybook development server
pnpm run storybook
# Access at http://localhost:6006

# Build Storybook for production
pnpm run build-storybook

# Serve the production build
pnpm run serve-storybook

Writing New Stories

1. Create a new story file in /src/stories following the naming convention ComponentName.stories.tsx
2. Use the Component Story Format:

   import type { Meta, StoryObj } from '@storybook/react'
   import { YourComponent } from '@/components/YourComponent'
   
   const meta: Meta<typeof YourComponent> = {
     title: 'Components/YourComponent',
     component: YourComponent,
     tags: ['autodocs'],
     parameters: {
       docs: {
         description: {
           component: 'Component description...'
         }
       }
     }
   }
   
   export default meta
   type Story = StoryObj<typeof YourComponent>
   
   export const Default: Story = {
     args: {
       // component props
     }
   }

Best Practices

• Keep stories focused on one component
• Document all component props and their usage
• Include examples of different states and variations
• Use args to make stories interactive
• Add helpful descriptions and documentation
• Test components in isolation

🛠 Tech Stack

• Next.js - React framework for production
• Tailwind CSS - Utility-first CSS framework
• Headless UI - Unstyled UI components
• Framer Motion - Animation library
• Zustand - State management
• TanStack Query - Powerful async state management for fetching, caching, and updating data

🐳 Docker Testing

Main Application

# Build the image
docker build -t flyte2-console --build-arg BUILDKITE_COMMIT=$(git rev-parse HEAD) .

# Run the container
docker run -p 8080:8080 flyte2-console

# Access at http://localhost:8080

Storybook

# Build Storybook image
docker build -f Dockerfile.storybook -t my-storybook .

# Run Storybook container
docker run -p 8080:8080 my-storybook

# Access at http://localhost:8080

📄 License

Canonical repository: github.com/unionai-oss/flyte2-ui.

Use of this software is governed by the Union License. The license text is at UNION-LICENSE.txt on main (also present as UNION-LICENSE.txt in this tree). See NOTICE.