Prompt file imported from microsoft/skills (.github/prompts/scaffold-foundry-app.prompt.md). Fill in {{PROJECT_NAME}}, {{PROJECT_DESCRIPTION}}, {{environmentName}}, {{abbrs_appManagedEnvironments}}, {{resourceToken}}, {{abbrs_appContainerApps}}, {{frontend_outputs_fqdn}}, {{backend_outputs_fqdn}}, {{AZURE_ENV_NAME}}, {{AZURE_LOCATION}}, {{name}} before use. Copyright stays with the author.

Scaffold Foundry App

Name: scaffold-foundry-app
Author: microsoft

Create a production-ready full-stack application for Azure AI Foundry.

Variables

PROJECT_NAME: Project directory name (kebab-case, e.g., my-foundry-app)
PROJECT_DESCRIPTION: Brief description of the application
INCLUDE_AGENTS: Whether to include Azure AI Agents setup (yes/no)
INCLUDE_SEARCH: Whether to include Azure AI Search setup (yes/no)

Tech Stack

Frontend

Vite + React + TypeScript with pnpm
Fluent UI v9 dark theme design system
Framer Motion for animations
Tailwind CSS for utility styles

Backend

FastAPI with async/await patterns
Pydantic v2 models (Base, Create, Update, Response, InDB)
pytest with TDD approach
Ruff for linting

Infrastructure

Azure Developer CLI (azd) with remoteBuild: true
Bicep templates for Container Apps
Managed Identity for authentication

Directory Structure

{{PROJECT_NAME}}/
├── azure.yaml                    # azd config
├── .env.example                  # Foundry setup instructions
├── README.md                     # Setup guide
├── .pre-commit-config.yaml
├── .gitignore
├── infra/
│   ├── main.bicep
│   ├── main.parameters.json
│   └── modules/
│       ├── container-apps-environment.bicep
│       └── container-app.bicep
├── src/
│   ├── frontend/
│   │   ├── index.html                # Entry point with mobile meta tags
│   │   ├── package.json
│   │   ├── vite.config.ts
│   │   ├── tailwind.config.js
│   │   ├── postcss.config.js
│   │   ├── tsconfig.json
│   │   ├── Dockerfile
│   │   ├── .eslintrc.cjs
│   │   ├── public/
│   │   │   ├── favicon.ico
│   │   │   ├── favicon.svg
│   │   │   ├── apple-touch-icon.png
│   │   │   └── site.webmanifest
│   │   └── src/
│   │       ├── App.tsx
│   │       ├── main.tsx
│   │       ├── index.css
│   │       ├── theme/
│   │       │   ├── brand.ts
│   │       │   └── dark-theme.ts
│   │       └── components/
│   │           └── Layout.tsx
│   └── backend/
│       ├── pyproject.toml
│       ├── Dockerfile
│       ├── app/
│       │   ├── __init__.py
│       │   ├── main.py
│       │   ├── config.py
│       │   ├── routers/
│       │   │   ├── __init__.py
│       │   │   └── health.py
│       │   ├── models/
│       │   │   └── __init__.py
│       │   └── services/
│       │       └── __init__.py
│       └── tests/
│           ├── __init__.py
│           └── test_health.py
└── .github/
    └── workflows/
        └── ci.yaml

Steps

1. Create Project Root

Create the project directory and root configuration files.

azure.yaml

name: {{PROJECT_NAME}}
metadata:
  template: foundry-fullstack
services:
  frontend:
    project: ./src/frontend
    host: containerapp
    language: ts
    docker:
      path: ./Dockerfile
      remoteBuild: true
  backend:
    project: ./src/backend
    host: containerapp
    language: python
    docker:
      path: ./Dockerfile
      remoteBuild: true
hooks:
  postprovision:
    shell: sh
    run: |
      echo "Setting up RBAC for managed identity..."
      # Add RBAC assignments here

.env.example

# ===========================================
# Azure AI Foundry Configuration
# ===========================================
# Get these values from https://ai.azure.com
#
# 1. Go to ai.azure.com and sign in
# 2. Create or select a project
# 3. Go to Project Settings > Overview
# 4. Copy the endpoint URL
# ===========================================

# Required: Your Foundry project endpoint
# Format: https://<resource>.services.ai.azure.com/api/projects/<project>
AZURE_AI_PROJECT_ENDPOINT=

# Required: Model deployment name (e.g., gpt-4o-mini, gpt-4o)
AZURE_AI_MODEL_DEPLOYMENT_NAME=gpt-4o-mini

# ===========================================
# Local Development
# ===========================================
ENVIRONMENT=development
PORT=8000

# Frontend URL (for CORS)
FRONTEND_URL=http://localhost:5173

.gitignore

# Dependencies
node_modules/
__pycache__/
*.pyc
.venv/
venv/

# Environment
.env
.env.local
.env.*.local

# Build
dist/
build/
*.egg-info/

# IDE
.idea/
.vscode/
*.swp
*.swo

# Azure
.azure/
azd-env/

# Testing
.coverage
htmlcov/
.pytest_cache/

# OS
.DS_Store
Thumbs.db

.pre-commit-config.yaml

repos:
  - repo: https://github.com/pre-commit/pre-commit-hooks
    rev: v4.5.0
    hooks:
      - id: trailing-whitespace
      - id: end-of-file-fixer
      - id: check-yaml
      - id: check-added-large-files

  - repo: https://github.com/astral-sh/ruff-pre-commit
    rev: v0.3.0
    hooks:
      - id: ruff
        args: [--fix]
      - id: ruff-format

  - repo: local
    hooks:
      - id: eslint
        name: eslint
        entry: pnpm --filter frontend lint
        language: system
        files: \.(ts|tsx)$
        pass_filenames: false

2. Create Frontend

src/frontend/package.json

{
  "name": "{{PROJECT_NAME}}-frontend",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@fluentui/react-components": "^9.54.0",
    "@fluentui/react-icons": "^2.0.245",
    "framer-motion": "^11.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "@typescript-eslint/eslint-plugin": "^7.0.0",
    "@typescript-eslint/parser": "^7.0.0",
    "@vitejs/plugin-react": "^4.2.0",
    "autoprefixer": "^10.4.0",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.0",
    "postcss": "^8.4.0",
    "tailwindcss": "^3.4.0",
    "typescript": "^5.3.0",
    "vite": "^5.1.0"
  }
}

src/frontend/src/theme/brand.ts

import type { BrandVariants } from "@fluentui/react-components";

export const brandVariants: BrandVariants = {
  10: "#020305",
  20: "#111723",
  30: "#16263D",
  40: "#193253",
  50: "#1B3F6A",
  60: "#1B4C82",
  70: "#18599B",
  80: "#1267B4",
  90: "#3174C2",
  100: "#4F82C8",
  110: "#6790CF",
  120: "#7D9ED5",
  130: "#92ACDC",
  140: "#A6BBE2",
  150: "#BAC9E9",
  160: "#CDD8EF",
};

src/frontend/src/theme/dark-theme.ts

import { createDarkTheme, type Theme } from "@fluentui/react-components";
import { brandVariants } from "./brand";

const baseDarkTheme = createDarkTheme(brandVariants);

export const darkTheme: Theme = {
  ...baseDarkTheme,
  colorNeutralBackground1: "#0a0a0a",
  colorNeutralBackground2: "#141414",
  colorNeutralBackground3: "#1e1e1e",
  colorNeutralBackground4: "#282828",
  colorNeutralBackground5: "#323232",
  colorNeutralBackground6: "#3c3c3c",
};

src/frontend/src/main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { FluentProvider } from "@fluentui/react-components";
import { darkTheme } from "./theme/dark-theme";
import App from "./App";
import "./index.css";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <FluentProvider theme={darkTheme}>
      <App />
    </FluentProvider>
  </StrictMode>
);

src/frontend/src/App.tsx

import { motion } from "framer-motion";
import { Title1, Text } from "@fluentui/react-components";
import Layout from "./components/Layout";

function App() {
  return (
    <Layout>
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="flex flex-col items-center justify-center min-h-[80vh] gap-4"
      >
        <Title1>{{PROJECT_NAME}}</Title1>
        <Text>{{PROJECT_DESCRIPTION}}</Text>
      </motion.div>
    </Layout>
  );
}

export default App;

src/frontend/src/components/Layout.tsx

import type { ReactNode } from "react";

interface LayoutProps {
  children: ReactNode;
}

export default function Layout({ children }: LayoutProps) {
  return (
    <div className="min-h-screen bg-[var(--colorNeutralBackground1)] text-[var(--colorNeutralForeground1)]">
      <main className="container mx-auto px-4 py-8">{children}</main>
    </div>
  );
}

src/frontend/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
}

src/frontend/vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    proxy: {
      "/api": {
        target: "http://localhost:8000",
        changeOrigin: true,
      },
    },
  },
});

src/frontend/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    
    <!-- Favicons -->
    <link rel="icon" href="/favicon.ico" sizes="32x32" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
    
    <!-- Theme color for mobile browser chrome -->
    <meta name="theme-color" content="#0a0a0a" />
    
    <!-- Open Graph -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content="{{PROJECT_NAME}}" />
    <meta property="og:description" content="{{PROJECT_DESCRIPTION}}" />
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    
    <title>{{PROJECT_NAME}}</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

src/frontend/public/site.webmanifest

{
  "name": "{{PROJECT_NAME}}",
  "short_name": "{{PROJECT_NAME}}",
  "icons": [
    { "src": "/favicon.ico", "sizes": "32x32", "type": "image/x-icon" },
    { "src": "/apple-touch-icon.png", "sizes": "180x180", "type": "image/png" }
  ],
  "theme_color": "#0a0a0a",
  "background_color": "#0a0a0a",
  "display": "standalone"
}

src/frontend/tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      // Mobile: safe area insets for notched devices
      spacing: {
        'safe-top': 'env(safe-area-inset-top)',
        'safe-bottom': 'env(safe-area-inset-bottom)',
        'safe-left': 'env(safe-area-inset-left)',
        'safe-right': 'env(safe-area-inset-right)',
      },
      // Mobile: minimum touch target sizes (44px per Apple/Google guidelines)
      minHeight: {
        'touch': '44px',
      },
      minWidth: {
        'touch': '44px',
      },
    },
  },
  plugins: [],
};

src/frontend/postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

src/frontend/tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

src/frontend/Dockerfile

FROM node:20-alpine AS builder
WORKDIR /app
RUN corepack enable && corepack prepare pnpm@latest --activate
COPY package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile
COPY . .
RUN pnpm build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

3. Create Backend

src/backend/pyproject.toml

[project]
name = "{{PROJECT_NAME}}-backend"
version = "0.1.0"
description = "{{PROJECT_DESCRIPTION}}"
requires-python = ">=3.11"
dependencies = [
    "fastapi>=0.109.0",
    "uvicorn[standard]>=0.27.0",
    "pydantic>=2.6.0",
    "pydantic-settings>=2.1.0",
    "azure-identity>=1.15.0",
    "azure-ai-projects>=1.0.0b1",
]

[project.optional-dependencies]
dev = [
    "pytest>=8.0.0",
    "pytest-asyncio>=0.23.0",
    "pytest-cov>=4.1.0",
    "httpx>=0.27.0",
    "ruff>=0.3.0",
]

[tool.ruff]
target-version = "py311"
line-length = 88

[tool.ruff.lint]
select = ["E", "F", "I", "UP", "B", "SIM"]

[tool.pytest.ini_options]
asyncio_mode = "auto"
testpaths = ["tests"]

src/backend/app/main.py

from contextlib import asynccontextmanager

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

from app.config import settings
from app.routers import health


@asynccontextmanager
async def lifespan(app: FastAPI):
    # Startup
    yield
    # Shutdown


app = FastAPI(
    title="{{PROJECT_NAME}}",
    description="{{PROJECT_DESCRIPTION}}",
    version="0.1.0",
    lifespan=lifespan,
)

app.add_middleware(
    CORSMiddleware,
    allow_origins=[settings.frontend_url],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

app.include_router(health.router)

src/backend/app/config.py

from pydantic_settings import BaseSettings


class Settings(BaseSettings):
    environment: str = "development"
    port: int = 8000
    frontend_url: str = "http://localhost:5173"

    # Azure AI Foundry
    azure_ai_project_endpoint: str = ""
    azure_ai_model_deployment_name: str = "gpt-4o-mini"

    class Config:
        env_file = ".env"


settings = Settings()

src/backend/app/routers/health.py

from fastapi import APIRouter

router = APIRouter(prefix="/api", tags=["health"])


@router.get("/health")
async def health_check() -> dict:
    """Health check endpoint."""
    return {"status": "healthy"}

src/backend/app/routers/init.py

from app.routers import health

__all__ = ["health"]

src/backend/tests/test_health.py

import pytest
from httpx import ASGITransport, AsyncClient

from app.main import app


@pytest.fixture
async def client():
    async with AsyncClient(
        transport=ASGITransport(app=app),
        base_url="http://test",
    ) as ac:
        yield ac


@pytest.mark.asyncio
async def test_health_check(client: AsyncClient):
    response = await client.get("/api/health")
    assert response.status_code == 200
    assert response.json() == {"status": "healthy"}

src/backend/Dockerfile

FROM python:3.11-slim

WORKDIR /app

RUN pip install --no-cache-dir uv

COPY pyproject.toml ./
RUN uv pip install --system -e .

COPY . .

EXPOSE 8000

CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]

4. Create Infrastructure

infra/main.bicep

targetScope = 'subscription'

@minLength(1)
@maxLength(64)
@description('Name of the environment (e.g., dev, staging, prod)')
param environmentName string

@minLength(1)
@description('Primary location for all resources')
param location string

param frontendExists bool = false
param backendExists bool = false

var abbrs = loadJsonContent('./abbreviations.json')
var resourceToken = toLower(uniqueString(subscription().id, environmentName, location))
var tags = { 'azd-env-name': environmentName }

resource rg 'Microsoft.Resources/resourceGroups@2022-09-01' = {
  name: 'rg-{{environmentName}}'
  location: location
  tags: tags
}

module containerAppsEnvironment './modules/container-apps-environment.bicep' = {
  name: 'container-apps-environment'
  scope: rg
  params: {
    name: '{{abbrs_appManagedEnvironments}}{{resourceToken}}'
    location: location
    tags: tags
  }
}

module frontend './modules/container-app.bicep' = {
  name: 'frontend'
  scope: rg
  params: {
    name: '{{abbrs_appContainerApps}}frontend-{{resourceToken}}'
    location: location
    tags: union(tags, { 'azd-service-name': 'frontend' })
    containerAppsEnvironmentName: containerAppsEnvironment.outputs.name
    targetPort: 80
    exists: frontendExists
  }
}

module backend './modules/container-app.bicep' = {
  name: 'backend'
  scope: rg
  params: {
    name: '{{abbrs_appContainerApps}}backend-{{resourceToken}}'
    location: location
    tags: union(tags, { 'azd-service-name': 'backend' })
    containerAppsEnvironmentName: containerAppsEnvironment.outputs.name
    targetPort: 8000
    exists: backendExists
    env: [
      { name: 'ENVIRONMENT', value: environmentName }
      { name: 'FRONTEND_URL', value: 'https://{{frontend_outputs_fqdn}}' }
    ]
  }
}

output AZURE_LOCATION string = location
output FRONTEND_URL string = 'https://{{frontend_outputs_fqdn}}'
output BACKEND_URL string = 'https://{{backend_outputs_fqdn}}'

infra/main.parameters.json

{
  "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentParameters.json#",
  "contentVersion": "1.0.0.0",
  "parameters": {
    "environmentName": {
      "value": "{{AZURE_ENV_NAME}}"
    },
    "location": {
      "value": "{{AZURE_LOCATION}}"
    }
  }
}

infra/modules/container-apps-environment.bicep

param name string
param location string = resourceGroup().location
param tags object = {}

resource logAnalytics 'Microsoft.OperationalInsights/workspaces@2022-10-01' = {
  name: '{{name}}-logs'
  location: location
  tags: tags
  properties: {
    sku: { name: 'PerGB2018' }
    retentionInDays: 30
  }
}

resource containerAppsEnvironment 'Microsoft.App/managedEnvironments@2023-05-01' = {
  name: name
  location: location
  tags: tags
  properties: {
    appLogsConfiguration: {
      destination: 'log-analytics'
      logAnalyticsConfiguration: {
        customerId: logAnalytics.properties.customerId
        sharedKey: logAnalytics.listKeys().primarySharedKey
      }
    }
  }
}

output name string = containerAppsEnvironment.name
output id string = containerAppsEnvironment.id

infra/modules/container-app.bicep

param name string
param location string = resourceGroup().location
param tags object = {}

param containerAppsEnvironmentName string
param targetPort int = 80
param exists bool = false
param env array = []

resource containerAppsEnvironment 'Microsoft.App/managedEnvironments@2023-05-01' existing = {
  name: containerAppsEnvironmentName
}

resource containerApp 'Microsoft.App/containerApps@2023-05-01' = {
  name: name
  location: location
  tags: tags
  identity: {
    type: 'SystemAssigned'
  }
  properties: {
    managedEnvironmentId: containerAppsEnvironment.id
    configuration: {
      ingress: {
        external: true
        targetPort: targetPort
        transport: 'auto'
        allowInsecure: false
      }
    }
    template: {
      containers: [
        {
          name: 'main'
          image: exists ? 'mcr.microsoft.com/azuredocs/containerapps-helloworld:latest' : 'mcr.microsoft.com/azuredocs/containerapps-helloworld:latest'
          resources: {
            cpu: json('0.5')
            memory: '1Gi'
          }
          env: env
        }
      ]
      scale: {
        minReplicas: 1
        maxReplicas: 10
      }
    }
  }
}

output fqdn string = containerApp.properties.configuration.ingress.fqdn
output name string = containerApp.name
output id string = containerApp.id
output identityPrincipalId string = containerApp.identity.principalId

5. Create CI/CD

.github/workflows/ci.yaml

name: CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  frontend:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: src/frontend
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: pnpm
          cache-dependency-path: src/frontend/pnpm-lock.yaml
      - run: pnpm install --frozen-lockfile
      - run: pnpm lint
      - run: pnpm build

  backend:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: src/backend
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-python@v5
        with:
          python-version: "3.11"
      - run: pip install uv
      - run: uv pip install --system -e ".[dev]"
      - run: ruff check .
      - run: ruff format --check .
      - run: pytest --cov=app tests/

6. Create README

README.md

# {{PROJECT_NAME}}

{{PROJECT_DESCRIPTION}}

## Prerequisites

- [Azure CLI](https://docs.microsoft.com/cli/azure/install-azure-cli) (v2.50+)
- [Azure Developer CLI](https://learn.microsoft.com/azure/developer/azure-developer-cli/install-azd) (v1.5+)
- [Node.js](https://nodejs.org/) (v20+) with pnpm
- [Python](https://python.org/) (v3.11+) with uv
- An Azure subscription with access to [Azure AI Foundry](https://ai.azure.com)

## Quick Start

### 1. Clone and Configure

\`\`\`bash
# Copy environment template
cp .env.example .env

# Edit .env with your Foundry project endpoint
# Get this from https://ai.azure.com > Project Settings
\`\`\`

### 2. Local Development

\`\`\`bash
# Backend
cd src/backend
uv sync
uv run fastapi dev app/main.py

# Frontend (new terminal)
cd src/frontend
pnpm install
pnpm dev
\`\`\`

Open http://localhost:5173

### 3. Deploy to Azure

\`\`\`bash
# Login
az login
azd auth login

# Deploy
azd up
\`\`\`

## Project Structure

\`\`\`
├── azure.yaml              # azd configuration
├── infra/                  # Bicep infrastructure
├── src/
│   ├── frontend/           # React + Fluent UI + Vite
│   └── backend/            # FastAPI + Pydantic
└── .github/workflows/      # CI/CD
\`\`\`

## Development

### Backend

\`\`\`bash
cd src/backend
uv run pytest                    # Run tests
uv run ruff check . --fix        # Lint
uv run ruff format .             # Format
\`\`\`

### Frontend

\`\`\`bash
cd src/frontend
pnpm lint                        # Lint
pnpm build                       # Build
\`\`\`

## Deployment

\`\`\`bash
azd up        # Full deployment
azd deploy    # Deploy app changes only
azd down      # Tear down resources
\`\`\`

## Skills Used

This project was scaffolded using these agent skills:
- `frontend-ui-dark-ts` - Dark theme UI with Tailwind CSS + Framer Motion
- `fastapi-router-py` - FastAPI router patterns
- `pydantic-models-py` - Pydantic model patterns
\`\`\`

## Checklist

- [ ] Project root created with azure.yaml, .env.example, .gitignore
- [ ] Frontend scaffolded with Vite, React, Fluent UI, Tailwind, Framer Motion
- [ ] Backend scaffolded with FastAPI, Pydantic, pytest
- [ ] Infrastructure created with Bicep for Container Apps
- [ ] CI/CD workflow created
- [ ] README with setup instructions
- [ ] Run `pnpm install` in frontend
- [ ] Run `uv sync` in backend
- [ ] Verify `pnpm dev` and `fastapi dev` work locally

# Scaffold Foundry App Create a production-ready full-stack application for Azure AI Foundry. ## Variables - `PROJECT_NAME`: Project directory name (kebab-case, e.g., `my-foundry-app`) - `PROJECT_DESCRIPTION`: Brief description of the application - `INCLUDE_AGENTS`: Whether to include Azure AI Agents setup (yes/no) - `INCLUDE_SEARCH`: Whether to include Azure AI Search setup (yes/no) ## Tech Stack ### Frontend - **Vite + React + TypeScript** with pnpm - **Fluent UI v9** dark theme design system - **Framer Motion** for animations - **Tailwind CSS** for utility styles ### Backend - **FastAPI** with async/await patterns - **Pydantic v2** models (Base, Create, Update, Response, InDB) - **pytest** with TDD approach - **Ruff** for linting ### Infrastructure - **Azure Developer CLI (azd)** with `remoteBuild: true` - **Bicep** templates for Container Apps - **Managed Identity** for authentication ## Directory Structure ``` {{PROJECT_NAME}}/ ├── azure.yaml # azd config ├── .env.example # Foundry setup instructions ├── README.md # Setup guide ├── .pre-commit-config.yaml ├── .gitignore ├── infra/ │ ├── main.bicep │ ├── main.parameters.json │ └── modules/ │ ├── container-apps-environment.bicep │ └── container-app.bicep ├── src/ │ ├── frontend/ │ │ ├── index.html # Entry point with mobile meta tags │ │ ├── package.json │ │ ├── vite.config.ts │ │ ├── tailwind.config.js │ │ ├── postcss.config.js │ │ ├── tsconfig.json │ │ ├── Dockerfile │ │ ├── .eslintrc.cjs │ │ ├── public/ │ │ │ ├── favicon.ico │ │ │ ├── favicon.svg │ │ │ ├── apple-touch-icon.png │ │ │ └── site.webmanifest │ │ └── src/ │ │ ├── App.tsx │ │ ├── main.tsx │ │ ├── index.css │ │ ├── theme/ │ │ │ ├── brand.ts │ │ │ └── dark-theme.ts │ │ └── components/ │ │ └── Layout.tsx │ └── backend/ │ ├── pyproject.toml │ ├── Dockerfile │ ├── app/ │ │ ├── __init__.py │ │ ├── main.py │ │ ├── config.py │ │ ├── routers/ │ │ │ ├── __init__.py │ │ │ └── health.py │ │ ├── models/ │ │ │ └── __init__.py │ │ └── services/ │ │ └── __init__.py │ └── tests/ │ ├── __init__.py │ └── test_health.py └── .github/ └── workflows/ └── ci.yaml ``` ## Steps ### 1. Create Project Root Create the project directory and root configuration files. #### azure.yaml ```yaml name: {{PROJECT_NAME}} metadata: template: foundry-fullstack services: frontend: project: ./src/frontend host: containerapp language: ts docker: path: ./Dockerfile remoteBuild: true backend: project: ./src/backend host: containerapp language: python docker: path: ./Dockerfile remoteBuild: true hooks: postprovision: shell: sh run: | echo "Setting up RBAC for managed identity..." # Add RBAC assignments here ``` #### .env.example ```bash # =========================================== # Azure AI Foundry Configuration # =========================================== # Get these values from https://ai.azure.com # # 1. Go to ai.azure.com and sign in # 2. Create or select a project # 3. Go to Project Settings > Overview # 4. Copy the endpoint URL # =========================================== # Required: Your Foundry project endpoint # Format: https://<resource>.services.ai.azure.com/api/projects/<project> AZURE_AI_PROJECT_ENDPOINT= # Required: Model deployment name (e.g., gpt-4o-mini, gpt-4o) AZURE_AI_MODEL_DEPLOYMENT_NAME=gpt-4o-mini # =========================================== # Local Development # =========================================== ENVIRONMENT=development PORT=8000 # Frontend URL (for CORS) FRONTEND_URL=http://localhost:5173 ``` #### .gitignore ```gitignore # Dependencies node_modules/ __pycache__/ *.pyc .venv/ venv/ # Environment .env .env.local .env.*.local # Build dist/ build/ *.egg-info/ # IDE .idea/ .vscode/ *.swp *.swo # Azure .azure/ azd-env/ # Testing .coverage htmlcov/ .pytest_cache/ # OS .DS_Store Thumbs.db ``` #### .pre-commit-config.yaml ```yaml repos: - repo: https://github.com/pre-commit/pre-commit-hooks rev: v4.5.0 hooks: - id: trailing-whitespace - id: end-of-file-fixer - id: check-yaml - id: check-added-large-files - repo: https://github.com/astral-sh/ruff-pre-commit rev: v0.3.0 hooks: - id: ruff args: [--fix] - id: ruff-format - repo: local hooks: - id: eslint name: eslint entry: pnpm --filter frontend lint language: system files: \.(ts|tsx)$ pass_filenames: false ``` ### 2. Create Frontend #### src/frontend/package.json ```json { "name": "{{PROJECT_NAME}}-frontend", "private": true, "version": "0.1.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { "@fluentui/react-components": "^9.54.0", "@fluentui/react-icons": "^2.0.245", "framer-motion": "^11.0.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@types/react": "^18.2.0", "@types/react-dom": "^18.2.0", "@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/parser": "^7.0.0", "@vitejs/plugin-react": "^4.2.0", "autoprefixer": "^10.4.0", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.0", "postcss": "^8.4.0", "tailwindcss": "^3.4.0", "typescript": "^5.3.0", "vite": "^5.1.0" } } ``` #### src/frontend/src/theme/brand.ts ```typescript import type { BrandVariants } from "@fluentui/react-components"; export const brandVariants: BrandVariants = { 10: "#020305", 20: "#111723", 30: "#16263D", 40: "#193253", 50: "#1B3F6A", 60: "#1B4C82", 70: "#18599B", 80: "#1267B4", 90: "#3174C2", 100: "#4F82C8", 110: "#6790CF", 120: "#7D9ED5", 130: "#92ACDC", 140: "#A6BBE2", 150: "#BAC9E9", 160: "#CDD8EF", }; ``` #### src/frontend/src/theme/dark-theme.ts ```typescript import { createDarkTheme, type Theme } from "@fluentui/react-components"; import { brandVariants } from "./brand"; const baseDarkTheme = createDarkTheme(brandVariants); export const darkTheme: Theme = { ...baseDarkTheme, colorNeutralBackground1: "#0a0a0a", colorNeutralBackground2: "#141414", colorNeutralBackground3: "#1e1e1e", colorNeutralBackground4: "#282828", colorNeutralBackground5: "#323232", colorNeutralBackground6: "#3c3c3c", }; ``` #### src/frontend/src/main.tsx ```tsx import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import { FluentProvider } from "@fluentui/react-components"; import { darkTheme } from "./theme/dark-theme"; import App from "./App"; import "./index.css"; createRoot(document.getElementById("root")!).render( <StrictMode> <FluentProvider theme={darkTheme}> <App /> </FluentProvider> </StrictMode> ); ``` #### src/frontend/src/App.tsx ```tsx import { motion } from "framer-motion"; import { Title1, Text } from "@fluentui/react-components"; import Layout from "./components/Layout"; function App() { return ( <Layout> <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className="flex flex-col items-center justify-center min-h-[80vh] gap-4" > <Title1>{{PROJECT_NAME}}</Title1> <Text>{{PROJECT_DESCRIPTION}}</Text> </motion.div> </Layout> ); } export default App; ``` #### src/frontend/src/components/Layout.tsx ```tsx import type { ReactNode } from "react"; interface LayoutProps { children: ReactNode; } export default function Layout({ children }: LayoutProps) { return ( <div className="min-h-screen bg-[var(--colorNeutralBackground1)] text-[var(--colorNeutralForeground1)]"> <main className="container mx-auto px-4 py-8">{children}</main> </div> ); } ``` #### src/frontend/src/index.css ```css @tailwind base; @tailwind components; @tailwind utilities; :root { font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; font-weight: 400; color-scheme: dark; } body { margin: 0; min-height: 100vh; } ``` #### src/frontend/vite.config.ts ```typescript import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; export default defineConfig({ plugins: [react()], server: { port: 5173, proxy: { "/api": { target: "http://localhost:8000", changeOrigin: true, }, }, }, }); ``` #### src/frontend/index.html ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />  <link rel="icon" href="/favicon.ico" sizes="32x32" /> <link rel="icon" href="/favicon.svg" type="image/svg+xml" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="manifest" href="/site.webmanifest" />  <meta name="theme-color" content="#0a0a0a" />  <meta property="og:type" content="website" /> <meta property="og:title" content="{{PROJECT_NAME}}" /> <meta property="og:description" content="{{PROJECT_DESCRIPTION}}" />  <meta name="twitter:card" content="summary_large_image" /> <title>{{PROJECT_NAME}}</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.tsx"></script> </body> </html> ``` #### src/frontend/public/site.webmanifest ```json { "name": "{{PROJECT_NAME}}", "short_name": "{{PROJECT_NAME}}", "icons": [ { "src": "/favicon.ico", "sizes": "32x32", "type": "image/x-icon" }, { "src": "/apple-touch-icon.png", "sizes": "180x180", "type": "image/png" } ], "theme_color": "#0a0a0a", "background_color": "#0a0a0a", "display": "standalone" } ``` #### src/frontend/tailwind.config.js ```javascript /** @type {import('tailwindcss').Config} */ export default { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: { // Mobile: safe area insets for notched devices spacing: { 'safe-top': 'env(safe-area-inset-top)', 'safe-bottom': 'env(safe-area-inset-bottom)', 'safe-left': 'env(safe-area-inset-left)', 'safe-right': 'env(safe-area-inset-right)', }, // Mobile: minimum touch target sizes (44px per Apple/Google guidelines) minHeight: { 'touch': '44px', }, minWidth: { 'touch': '44px', }, }, }, plugins: [], }; ``` #### src/frontend/postcss.config.js ```javascript export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; ``` #### src/frontend/tsconfig.json ```json { "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, "moduleResolution": "bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] } ``` #### src/frontend/Dockerfile ```dockerfile FROM node:20-alpine AS builder WORKDIR /app RUN corepack enable && corepack prepare pnpm@latest --activate COPY package.json pnpm-lock.yaml ./ RUN pnpm install --frozen-lockfile COPY . . RUN pnpm build FROM nginx:alpine COPY --from=builder /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` ### 3. Create Backend #### src/backend/pyproject.toml ```toml [project] name = "{{PROJECT_NAME}}-backend" version = "0.1.0" description = "{{PROJECT_DESCRIPTION}}" requires-python = ">=3.11" dependencies = [ "fastapi>=0.109.0", "uvicorn[standard]>=0.27.0", "pydantic>=2.6.0", "pydantic-settings>=2.1.0", "azure-identity>=1.15.0", "azure-ai-projects>=1.0.0b1", ] [project.optional-dependencies] dev = [ "pytest>=8.0.0", "pytest-asyncio>=0.23.0", "pytest-cov>=4.1.0", "httpx>=0.27.0", "ruff>=0.3.0", ] [tool.ruff] target-version = "py311" line-length = 88 [tool.ruff.lint] select = ["E", "F", "I", "UP", "B", "SIM"] [tool.pytest.ini_options] asyncio_mode = "auto" testpaths = ["tests"] ``` #### src/backend/app/main.py ```python from contextlib import asynccontextmanager from fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware from app.config import settings from app.routers import health @asynccontextmanager async def lifespan(app: FastAPI): # Startup yield # Shutdown app = FastAPI( title="{{PROJECT_NAME}}", description="{{PROJECT_DESCRIPTION}}", version="0.1.0", lifespan=lifespan, ) app.add_middleware( CORSMiddleware, allow_origins=[settings.frontend_url], allow_credentials=True, allow_methods=["*"], allow_headers=["*"], ) app.include_router(health.router) ``` #### src/backend/app/config.py ```python from pydantic_settings import BaseSettings class Settings(BaseSettings): environment: str = "development" port: int = 8000 frontend_url: str = "http://localhost:5173" # Azure AI Foundry azure_ai_project_endpoint: str = "" azure_ai_model_deployment_name: str = "gpt-4o-mini" class Config: env_file = ".env" settings = Settings() ``` #### src/backend/app/routers/health.py ```python from fastapi import APIRouter router = APIRouter(prefix="/api", tags=["health"]) @router.get("/health") async def health_check() -> dict: """Health check endpoint.""" return {"status": "healthy"} ``` #### src/backend/app/routers/__init__.py ```python from app.routers import health __all__ = ["health"] ``` #### src/backend/tests/test_health.py ```python import pytest from httpx import ASGITransport, AsyncClient from app.main import app @pytest.fixture async def client(): async with AsyncClient( transport=ASGITransport(app=app), base_url="http://test", ) as ac: yield ac @pytest.mark.asyncio async def test_health_check(client: AsyncClient): response = await client.get("/api/health") assert response.status_code == 200 assert response.json() == {"status": "healthy"} ``` #### src/backend/Dockerfile ```dockerfile FROM python:3.11-slim WORKDIR /app RUN pip install --no-cache-dir uv COPY pyproject.toml ./ RUN uv pip install --system -e . COPY . . EXPOSE 8000 CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"] ``` ### 4. Create Infrastructure #### infra/main.bicep ```bicep targetScope = 'subscription' @minLength(1) @maxLength(64) @description('Name of the environment (e.g., dev, staging, prod)') param environmentName string @minLength(1) @description('Primary location for all resources') param location string param frontendExists bool = false param backendExists bool = false var abbrs = loadJsonContent('./abbreviations.json') var resourceToken = toLower(uniqueString(subscription().id, environmentName, location)) var tags = { 'azd-env-name': environmentName } resource rg 'Microsoft.Resources/resourceGroups@2022-09-01' = { name: 'rg-{{environmentName}}' location: location tags: tags } module containerAppsEnvironment './modules/container-apps-environment.bicep' = { name: 'container-apps-environment' scope: rg params: { name: '{{abbrs_appManagedEnvironments}}{{resourceToken}}' location: location tags: tags } } module frontend './modules/container-app.bicep' = { name: 'frontend' scope: rg params: { name: '{{abbrs_appContainerApps}}frontend-{{resourceToken}}' location: location tags: union(tags, { 'azd-service-name': 'frontend' }) containerAppsEnvironmentName: containerAppsEnvironment.outputs.name targetPort: 80 exists: frontendExists } } module backend './modules/container-app.bicep' = { name: 'backend' scope: rg params: { name: '{{abbrs_appContainerApps}}backend-{{resourceToken}}' location: location tags: union(tags, { 'azd-service-name': 'backend' }) containerAppsEnvironmentName: containerAppsEnvironment.outputs.name targetPort: 8000 exists: backendExists env: [ { name: 'ENVIRONMENT', value: environmentName } { name: 'FRONTEND_URL', value: 'https://{{frontend_outputs_fqdn}}' } ] } } output AZURE_LOCATION string = location output FRONTEND_URL string = 'https://{{frontend_outputs_fqdn}}' output BACKEND_URL string = 'https://{{backend_outputs_fqdn}}' ``` #### infra/main.parameters.json ```json { "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentParameters.json#", "contentVersion": "1.0.0.0", "parameters": { "environmentName": { "value": "{{AZURE_ENV_NAME}}" }, "location": { "value": "{{AZURE_LOCATION}}" } } } ``` #### infra/modules/container-apps-environment.bicep ```bicep param name string param location string = resourceGroup().location param tags object = {} resource logAnalytics 'Microsoft.OperationalInsights/workspaces@2022-10-01' = { name: '{{name}}-logs' location: location tags: tags properties: { sku: { name: 'PerGB2018' } retentionInDays: 30 } } resource containerAppsEnvironment 'Microsoft.App/managedEnvironments@2023-05-01' = { name: name location: location tags: tags properties: { appLogsConfiguration: { destination: 'log-analytics' logAnalyticsConfiguration: { customerId: logAnalytics.properties.customerId sharedKey: logAnalytics.listKeys().primarySharedKey } } } } output name string = containerAppsEnvironment.name output id string = containerAppsEnvironment.id ``` #### infra/modules/container-app.bicep ```bicep param name string param location string = resourceGroup().location param tags object = {} param containerAppsEnvironmentName string param targetPort int = 80 param exists bool = false param env array = [] resource containerAppsEnvironment 'Microsoft.App/managedEnvironments@2023-05-01' existing = { name: containerAppsEnvironmentName } resource containerApp 'Microsoft.App/containerApps@2023-05-01' = { name: name location: location tags: tags identity: { type: 'SystemAssigned' } properties: { managedEnvironmentId: containerAppsEnvironment.id configuration: { ingress: { external: true targetPort: targetPort transport: 'auto' allowInsecure: false } } template: { containers: [ { name: 'main' image: exists ? 'mcr.microsoft.com/azuredocs/containerapps-helloworld:latest' : 'mcr.microsoft.com/azuredocs/containerapps-helloworld:latest' resources: { cpu: json('0.5') memory: '1Gi' } env: env } ] scale: { minReplicas: 1 maxReplicas: 10 } } } } output fqdn string = containerApp.properties.configuration.ingress.fqdn output name string = containerApp.name output id string = containerApp.id output identityPrincipalId string = containerApp.identity.principalId ``` ### 5. Create CI/CD #### .github/workflows/ci.yaml ```yaml name: CI on: push: branches: [main] pull_request: branches: [main] jobs: frontend: runs-on: ubuntu-latest defaults: run: working-dir

{ "prompt": "# Scaffold Foundry App\n\nCreate a production-ready full-stack application for Azure AI Foundry.\n\n## Variables\n\n- `PROJECT_NAME`: Project directory name (kebab-case, e.g., `my-foundry-app`)\n- `PROJECT_DESCRIPTION`: Brief description of the application\n- `INCLUDE_AGENTS`: Whether to include Azure AI Agents setup (yes/no)\n- `INCLUDE_SEARCH`: Whether to include Azure AI Search setup (yes/no)\n\n## Tech Stack\n\n### Frontend\n- **Vite + React + TypeScript** with pnpm\n- **Fluent UI v9** dark theme design system\n- **Framer Motion** for animations\n- **Tailwind CSS** for utility styles\n\n### Backend\n- **FastAPI** with async/await patterns\n- **Pydantic v2** models (Base, Create, Update, Response, InDB)\n- **pytest** with TDD approach\n- **Ruff** for linting\n\n### Infrastructure\n- **Azure Developer CLI (azd)** with `remoteBuild: true`\n- **Bicep** templates for Container Apps\n- **Managed Identity** for authentication\n\n## Directory Structure\n\n```\n{{PROJECT_NAME}}/\n├── azure.yaml # azd config\n├── .env.example # Foundry setup instructions\n├── README.md # Setup guide\n├── .pre-commit-config.yaml\n├── .gitignore\n├── infra/\n│ ├── main.bicep\n│ ├── main.parameters.json\n│ └── modules/\n│ ├── container-apps-environment.bicep\n│ └── container-app.bicep\n├── src/\n│ ├── frontend/\n│ │ ├── index.html # Entry point with mobile meta tags\n│ │ ├── package.json\n│ │ ├── vite.config.ts\n│ │ ├── tailwind.config.js\n│ │ ├── postcss.config.js\n│ │ ├── tsconfig.json\n│ │ ├── Dockerfile\n│ │ ├── .eslintrc.cjs\n│ │ ├── public/\n│ │ │ ├── favicon.ico\n│ │ │ ├── favicon.svg\n│ │ │ ├── apple-touch-icon.png\n│ │ │ └── site.webmanifest\n│ │ └── src/\n│ │ ├── App.tsx\n│ │ ├── main.tsx\n│ │ ├── index.css\n│ │ ├── theme/\n│ │ │ ├── brand.ts\n│ │ │ └── dark-theme.ts\n│ │ └── components/\n│ │ └── Layout.tsx\n│ └── backend/\n│ ├── pyproject.toml\n│ ├── Dockerfile\n│ ├── app/\n│ │ ├── __init__.py\n│ │ ├── main.py\n│ │ ├── config.py\n│ │ ├── routers/\n│ │ │ ├── __init__.py\n│ │ │ └── health.py\n│ │ ├── models/\n│ │ │ └── __init__.py\n│ │ └── services/\n│ │ └── __init__.py\n│ └── tests/\n│ ├── __init__.py\n│ └── test_health.py\n└── .github/\n └── workflows/\n └── ci.yaml\n```\n\n## Steps\n\n### 1. Create Project Root\n\nCreate the project directory and root configuration files.\n\n#### azure.yaml\n```yaml\nname: {{PROJECT_NAME}}\nmetadata:\n template: foundry-fullstack\nservices:\n frontend:\n project: ./src/frontend\n host: containerapp\n language: ts\n docker:\n path: ./Dockerfile\n remoteBuild: true\n backend:\n project: ./src/backend\n host: containerapp\n language: python\n docker:\n path: ./Dockerfile\n remoteBuild: true\nhooks:\n postprovision:\n shell: sh\n run: |\n echo \"Setting up RBAC for managed identity...\"\n # Add RBAC assignments here\n```\n\n#### .env.example\n```bash\n# ===========================================\n# Azure AI Foundry Configuration\n# ===========================================\n# Get these values from https://ai.azure.com\n#\n# 1. Go to ai.azure.com and sign in\n# 2. Create or select a project\n# 3. Go to Project Settings > Overview\n# 4. Copy the endpoint URL\n# ===========================================\n\n# Required: Your Foundry project endpoint\n# Format: https://<resource>.services.ai.azure.com/api/projects/<project>\nAZURE_AI_PROJECT_ENDPOINT=\n\n# Required: Model deployment name (e.g., gpt-4o-mini, gpt-4o)\nAZURE_AI_MODEL_DEPLOYMENT_NAME=gpt-4o-mini\n\n# ===========================================\n# Local Development\n# ===========================================\nENVIRONMENT=development\nPORT=8000\n\n# Frontend URL (for CORS)\nFRONTEND_URL=http://localhost:5173\n```\n\n#### .gitignore\n```gitignore\n# Dependencies\nnode_modules/\n__pycache__/\n*.pyc\n.venv/\nvenv/\n\n# Environment\n.env\n.env.local\n.env.*.local\n\n# Build\ndist/\nbuild/\n*.egg-info/\n\n# IDE\n.idea/\n.vscode/\n*.swp\n*.swo\n\n# Azure\n.azure/\nazd-env/\n\n# Testing\n.coverage\nhtmlcov/\n.pytest_cache/\n\n# OS\n.DS_Store\nThumbs.db\n```\n\n#### .pre-commit-config.yaml\n```yaml\nrepos:\n - repo: https://github.com/pre-commit/pre-commit-hooks\n rev: v4.5.0\n hooks:\n - id: trailing-whitespace\n - id: end-of-file-fixer\n - id: check-yaml\n - id: check-added-large-files\n\n - repo: https://github.com/astral-sh/ruff-pre-commit\n rev: v0.3.0\n hooks:\n - id: ruff\n args: [--fix]\n - id: ruff-format\n\n - repo: local\n hooks:\n - id: eslint\n name: eslint\n entry: pnpm --filter frontend lint\n language: system\n files: \\.(ts|tsx)$\n pass_filenames: false\n```\n\n### 2. Create Frontend\n\n#### src/frontend/package.json\n```json\n{\n \"name\": \"{{PROJECT_NAME}}-frontend\",\n \"private\": true,\n \"version\": \"0.1.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"tsc && vite build\",\n \"lint\": \"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"@fluentui/react-components\": \"^9.54.0\",\n \"@fluentui/react-icons\": \"^2.0.245\",\n \"framer-motion\": \"^11.0.0\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\"\n },\n \"devDependencies\": {\n \"@types/react\": \"^18.2.0\",\n \"@types/react-dom\": \"^18.2.0\",\n \"@typescript-eslint/eslint-plugin\": \"^7.0.0\",\n \"@typescript-eslint/parser\": \"^7.0.0\",\n \"@vitejs/plugin-react\": \"^4.2.0\",\n \"autoprefixer\": \"^10.4.0\",\n \"eslint\": \"^8.57.0\",\n \"eslint-plugin-react-hooks\": \"^4.6.0\",\n \"eslint-plugin-react-refresh\": \"^0.4.0\",\n \"postcss\": \"^8.4.0\",\n \"tailwindcss\": \"^3.4.0\",\n \"typescript\": \"^5.3.0\",\n \"vite\": \"^5.1.0\"\n }\n}\n```\n\n#### src/frontend/src/theme/brand.ts\n```typescript\nimport type { BrandVariants } from \"@fluentui/react-components\";\n\nexport const brandVariants: BrandVariants = {\n 10: \"#020305\",\n 20: \"#111723\",\n 30: \"#16263D\",\n 40: \"#193253\",\n 50: \"#1B3F6A\",\n 60: \"#1B4C82\",\n 70: \"#18599B\",\n 80: \"#1267B4\",\n 90: \"#3174C2\",\n 100: \"#4F82C8\",\n 110: \"#6790CF\",\n 120: \"#7D9ED5\",\n 130: \"#92ACDC\",\n 140: \"#A6BBE2\",\n 150: \"#BAC9E9\",\n 160: \"#CDD8EF\",\n};\n```\n\n#### src/frontend/src/theme/dark-theme.ts\n```typescript\nimport { createDarkTheme, type Theme } from \"@fluentui/react-components\";\nimport { brandVariants } from \"./brand\";\n\nconst baseDarkTheme = createDarkTheme(brandVariants);\n\nexport const darkTheme: Theme = {\n ...baseDarkTheme,\n colorNeutralBackground1: \"#0a0a0a\",\n colorNeutralBackground2: \"#141414\",\n colorNeutralBackground3: \"#1e1e1e\",\n colorNeutralBackground4: \"#282828\",\n colorNeutralBackground5: \"#323232\",\n colorNeutralBackground6: \"#3c3c3c\",\n};\n```\n\n#### src/frontend/src/main.tsx\n```tsx\nimport { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { FluentProvider } from \"@fluentui/react-components\";\nimport { darkTheme } from \"./theme/dark-theme\";\nimport App from \"./App\";\nimport \"./index.css\";\n\ncreateRoot(document.getElementById(\"root\")!).render(\n <StrictMode>\n <FluentProvider theme={darkTheme}>\n <App />\n </FluentProvider>\n </StrictMode>\n);\n```\n\n#### src/frontend/src/App.tsx\n```tsx\nimport { motion } from \"framer-motion\";\nimport { Title1, Text } from \"@fluentui/react-components\";\nimport Layout from \"./components/Layout\";\n\nfunction App() {\n return (\n <Layout>\n <motion.div\n initial={{ opacity: 0, y: 20 }}\n animate={{ opacity: 1, y: 0 }}\n transition={{ duration: 0.5 }}\n className=\"flex flex-col items-center justify-center min-h-[80vh] gap-4\"\n >\n <Title1>{{PROJECT_NAME}}</Title1>\n <Text>{{PROJECT_DESCRIPTION}}</Text>\n </motion.div>\n </Layout>\n );\n}\n\nexport default App;\n```\n\n#### src/frontend/src/components/Layout.tsx\n```tsx\nimport type { ReactNode } from \"react\";\n\ninterface LayoutProps {\n children: ReactNode;\n}\n\nexport default function Layout({ children }: LayoutProps) {\n return (\n <div className=\"min-h-screen bg-[var(--colorNeutralBackground1)] text-[var(--colorNeutralForeground1)]\">\n <main className=\"container mx-auto px-4 py-8\">{children}</main>\n </div>\n );\n}\n```\n\n#### src/frontend/src/index.css\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n:root {\n font-family: system-ui, -apple-system, sans-serif;\n line-height: 1.5;\n font-weight: 400;\n color-scheme: dark;\n}\n\nbody {\n margin: 0;\n min-height: 100vh;\n}\n```\n\n#### src/frontend/vite.config.ts\n```typescript\nimport { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({\n plugins: [react()],\n server: {\n port: 5173,\n proxy: {\n \"/api\": {\n target: \"http://localhost:8000\",\n changeOrigin: true,\n },\n },\n },\n});\n```\n\n#### src/frontend/index.html\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, viewport-fit=cover\" />\n \n \n <link rel=\"icon\" href=\"/favicon.ico\" sizes=\"32x32\" />\n <link rel=\"icon\" href=\"/favicon.svg\" type=\"image/svg+xml\" />\n <link rel=\"apple-touch-icon\" href=\"/apple-touch-icon.png\" />\n <link rel=\"manifest\" href=\"/site.webmanifest\" />\n \n \n <meta name=\"theme-color\" content=\"#0a0a0a\" />\n \n \n <meta property=\"og:type\" content=\"website\" />\n <meta property=\"og:title\" content=\"{{PROJECT_NAME}}\" />\n <meta property=\"og:description\" content=\"{{PROJECT_DESCRIPTION}}\" />\n \n \n <meta name=\"twitter:card\" content=\"summary_large_image\" />\n \n <title>{{PROJECT_NAME}}</title>\n </head>\n <body>\n <div id=\"root\"></div>\n <script type=\"module\" src=\"/src/main.tsx\"></script>\n </body>\n</html>\n```\n\n#### src/frontend/public/site.webmanifest\n```json\n{\n \"name\": \"{{PROJECT_NAME}}\",\n \"short_name\": \"{{PROJECT_NAME}}\",\n \"icons\": [\n { \"src\": \"/favicon.ico\", \"sizes\": \"32x32\", \"type\": \"image/x-icon\" },\n { \"src\": \"/apple-touch-icon.png\", \"sizes\": \"180x180\", \"type\": \"image/png\" }\n ],\n \"theme_color\": \"#0a0a0a\",\n \"background_color\": \"#0a0a0a\",\n \"display\": \"standalone\"\n}\n```\n\n#### src/frontend/tailwind.config.js\n```javascript\n/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\"./index.html\", \"./src/**/*.{js,ts,jsx,tsx}\"],\n theme: {\n extend: {\n // Mobile: safe area insets for notched devices\n spacing: {\n 'safe-top': 'env(safe-area-inset-top)',\n 'safe-bottom': 'env(safe-area-inset-bottom)',\n 'safe-left': 'env(safe-area-inset-left)',\n 'safe-right': 'env(safe-area-inset-right)',\n },\n // Mobile: minimum touch target sizes (44px per Apple/Google guidelines)\n minHeight: {\n 'touch': '44px',\n },\n minWidth: {\n 'touch': '44px',\n },\n },\n },\n plugins: [],\n};\n```\n\n#### src/frontend/postcss.config.js\n```javascript\nexport default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n```\n\n#### src/frontend/tsconfig.json\n```json\n{\n \"compilerOptions\": {\n \"target\": \"ES2020\",\n \"useDefineForClassFields\": true,\n \"lib\": [\"ES2020\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"skipLibCheck\": true,\n \"moduleResolution\": \"bundler\",\n \"allowImportingTsExtensions\": true,\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": true,\n \"jsx\": \"react-jsx\",\n \"strict\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"noFallthroughCasesInSwitch\": true\n },\n \"include\": [\"src\"],\n \"references\": [{ \"path\": \"./tsconfig.node.json\" }]\n}\n```\n\n#### src/frontend/Dockerfile\n```dockerfile\nFROM node:20-alpine AS builder\nWORKDIR /app\nRUN corepack enable && corepack prepare pnpm@latest --activate\nCOPY package.json pnpm-lock.yaml ./\nRUN pnpm install --frozen-lockfile\nCOPY . .\nRUN pnpm build\n\nFROM nginx:alpine\nCOPY --from=builder /app/dist /usr/share/nginx/html\nCOPY nginx.conf /etc/nginx/conf.d/default.conf\nEXPOSE 80\nCMD [\"nginx\", \"-g\", \"daemon off;\"]\n```\n\n### 3. Create Backend\n\n#### src/backend/pyproject.toml\n```toml\n[project]\nname = \"{{PROJECT_NAME}}-backend\"\nversion = \"0.1.0\"\ndescription = \"{{PROJECT_DESCRIPTION}}\"\nrequires-python = \">=3.11\"\ndependencies = [\n \"fastapi>=0.109.0\",\n \"uvicorn[standard]>=0.27.0\",\n \"pydantic>=2.6.0\",\n \"pydantic-settings>=2.1.0\",\n \"azure-identity>=1.15.0\",\n \"azure-ai-projects>=1.0.0b1\",\n]\n\n[project.optional-dependencies]\ndev = [\n \"pytest>=8.0.0\",\n \"pytest-asyncio>=0.23.0\",\n \"pytest-cov>=4.1.0\",\n \"httpx>=0.27.0\",\n \"ruff>=0.3.0\",\n]\n\n[tool.ruff]\ntarget-version = \"py311\"\nline-length = 88\n\n[tool.ruff.lint]\nselect = [\"E\", \"F\", \"I\", \"UP\", \"B\", \"SIM\"]\n\n[tool.pytest.ini_options]\nasyncio_mode = \"auto\"\ntestpaths = [\"tests\"]\n```\n\n#### src/backend/app/main.py\n```python\nfrom contextlib import asynccontextmanager\n\nfrom fastapi import FastAPI\nfrom fastapi.middleware.cors import CORSMiddleware\n\nfrom app.config import settings\nfrom app.routers import health\n\n\n@asynccontextmanager\nasync def lifespan(app: FastAPI):\n # Startup\n yield\n # Shutdown\n\n\napp = FastAPI(\n title=\"{{PROJECT_NAME}}\",\n description=\"{{PROJECT_DESCRIPTION}}\",\n version=\"0.1.0\",\n lifespan=lifespan,\n)\n\napp.add_middleware(\n CORSMiddleware,\n allow_origins=[settings.frontend_url],\n allow_credentials=True,\n allow_methods=[\"*\"],\n allow_headers=[\"*\"],\n)\n\napp.include_router(health.router)\n```\n\n#### src/backend/app/config.py\n```python\nfrom pydantic_settings import BaseSettings\n\n\nclass Settings(BaseSettings):\n environment: str = \"development\"\n port: int = 8000\n frontend_url: str = \"http://localhost:5173\"\n\n # Azure AI Foundry\n azure_ai_project_endpoint: str = \"\"\n azure_ai_model_deployment_name: str = \"gpt-4o-mini\"\n\n class Config:\n env_file = \".env\"\n\n\nsettings = Settings()\n```\n\n#### src/backend/app/routers/health.py\n```python\nfrom fastapi import APIRouter\n\nrouter = APIRouter(prefix=\"/api\", tags=[\"health\"])\n\n\n@router.get(\"/health\")\nasync def health_check() -> dict:\n \"\"\"Health check endpoint.\"\"\"\n return {\"status\": \"healthy\"}\n```\n\n#### src/backend/app/routers/__init__.py\n```python\nfrom app.routers import health\n\n__all__ = [\"health\"]\n```\n\n#### src/backend/tests/test_health.py\n```python\nimport pytest\nfrom httpx import ASGITransport, AsyncClient\n\nfrom app.main import app\n\n\n@pytest.fixture\nasync def client():\n async with AsyncClient(\n transport=ASGITransport(app=app),\n base_url=\"http://test\",\n ) as ac:\n yield ac\n\n\n@pytest.mark.asyncio\nasync def test_health_check(client: AsyncClient):\n response = await client.get(\"/api/health\")\n assert response.status_code == 200\n assert response.json() == {\"status\": \"healthy\"}\n```\n\n#### src/backend/Dockerfile\n```dockerfile\nFROM python:3.11-slim\n\nWORKDIR /app\n\nRUN pip install --no-cache-dir uv\n\nCOPY pyproject.toml ./\nRUN uv pip install --system -e .\n\nCOPY . .\n\nEXPOSE 8000\n\nCMD [\"uvicorn\", \"app.main:app\", \"--host\", \"0.0.0.0\", \"--port\", \"8000\"]\n```\n\n### 4. Create Infrastructure\n\n#### infra/main.bicep\n```bicep\ntargetScope = 'subscription'\n\n@minLength(1)\n@maxLength(64)\n@description('Name of the environment (e.g., dev, staging, prod)')\nparam environmentName string\n\n@minLength(1)\n@description('Primary location for all resources')\nparam location string\n\nparam frontendExists bool = false\nparam backendExists bool = false\n\nvar abbrs = loadJsonContent('./abbreviations.json')\nvar resourceToken = toLower(uniqueString(subscription().id, environmentName, location))\nvar tags = { 'azd-env-name': environmentName }\n\nresource rg 'Microsoft.Resources/resourceGroups@2022-09-01' = {\n name: 'rg-{{environmentName}}'\n location: location\n tags: tags\n}\n\nmodule containerAppsEnvironment './modules/container-apps-environment.bicep' = {\n name: 'container-apps-environment'\n scope: rg\n params: {\n name: '{{abbrs_appManagedEnvironments}}{{resourceToken}}'\n location: location\n tags: tags\n }\n}\n\nmodule frontend './modules/container-app.bicep' = {\n name: 'frontend'\n scope: rg\n params: {\n name: '{{abbrs_appContainerApps}}frontend-{{resourceToken}}'\n location: location\n tags: union(tags, { 'azd-service-name': 'frontend' })\n containerAppsEnvironmentName: containerAppsEnvironment.outputs.name\n targetPort: 80\n exists: frontendExists\n }\n}\n\nmodule backend './modules/container-app.bicep' = {\n name: 'backend'\n scope: rg\n params: {\n name: '{{abbrs_appContainerApps}}backend-{{resourceToken}}'\n location: location\n tags: union(tags, { 'azd-service-name': 'backend' })\n containerAppsEnvironmentName: containerAppsEnvironment.outputs.name\n targetPort: 8000\n exists: backendExists\n env: [\n { name: 'ENVIRONMENT', value: environmentName }\n { name: 'FRONTEND_URL', value: 'https://{{frontend_outputs_fqdn}}' }\n ]\n }\n}\n\noutput AZURE_LOCATION string = location\noutput FRONTEND_URL string = 'https://{{frontend_outputs_fqdn}}'\noutput BACKEND_URL string = 'https://{{backend_outputs_fqdn}}'\n```\n\n#### infra/main.parameters.json\n```json\n{\n \"$schema\": \"https://schema.management.azure.com/schemas/2019-04-01/deploymentParameters.json#\",\n \"contentVersion\": \"1.0.0.0\",\n \"parameters\": {\n \"environmentName\": {\n \"value\": \"{{AZURE_ENV_NAME}}\"\n },\n \"location\": {\n \"value\": \"{{AZURE_LOCATION}}\"\n }\n }\n}\n```\n\n#### infra/modules/container-apps-environment.bicep\n```bicep\nparam name string\nparam location string = resourceGroup().location\nparam tags object = {}\n\nresource logAnalytics 'Microsoft.OperationalInsights/workspaces@2022-10-01' = {\n name: '{{name}}-logs'\n location: location\n tags: tags\n properties: {\n sku: { name: 'PerGB2018' }\n retentionInDays: 30\n }\n}\n\nresource containerAppsEnvironment 'Microsoft.App/managedEnvironments@2023-05-01' = {\n name: name\n location: location\n tags: tags\n properties: {\n appLogsConfiguration: {\n destination: 'log-analytics'\n logAnalyticsConfiguration: {\n customerId: logAnalytics.properties.customerId\n sharedKey: logAnalytics.listKeys().primarySharedKey\n }\n }\n }\n}\n\noutput name string = containerAppsEnvironment.name\noutput id string = containerAppsEnvironment.id\n```\n\n#### infra/modules/container-app.bicep\n```bicep\nparam name string\nparam location string = resourceGroup().location\nparam tags object = {}\n\nparam containerAppsEnvironmentName string\nparam targetPort int = 80\nparam exists bool = false\nparam env array = []\n\nresource containerAppsEnvironment 'Microsoft.App/managedEnvironments@2023-05-01' existing = {\n name: containerAppsEnvironmentName\n}\n\nresource containerApp 'Microsoft.App/containerApps@2023-05-01' = {\n name: name\n location: location\n tags: tags\n identity: {\n type: 'SystemAssigned'\n }\n properties: {\n managedEnvironmentId: containerAppsEnvironment.id\n configuration: {\n ingress: {\n external: true\n targetPort: targetPort\n transport: 'auto'\n allowInsecure: false\n }\n }\n template: {\n containers: [\n {\n name: 'main'\n image: exists ? 'mcr.microsoft.com/azuredocs/containerapps-helloworld:latest' : 'mcr.microsoft.com/azuredocs/containerapps-helloworld:latest'\n resources: {\n cpu: json('0.5')\n memory: '1Gi'\n }\n env: env\n }\n ]\n scale: {\n minReplicas: 1\n maxReplicas: 10\n }\n }\n }\n}\n\noutput fqdn string = containerApp.properties.configuration.ingress.fqdn\noutput name string = containerApp.name\noutput id string = containerApp.id\noutput identityPrincipalId string = containerApp.identity.principalId\n```\n\n### 5. Create CI/CD\n\n#### .github/workflows/ci.yaml\n```yaml\nname: CI\n\non:\n push:\n branches: [main]\n pull_request:\n branches: [main]\n\njobs:\n frontend:\n runs-on: ubuntu-latest\n defaults:\n run:\n working-dir", "variables": [ "PROJECT_NAME", "PROJECT_DESCRIPTION", "environmentName", "abbrs_appManagedEnvironments", "resourceToken", "abbrs_appContainerApps", "frontend_outputs_fqdn", "backend_outputs_fqdn", "AZURE_ENV_NAME", "AZURE_LOCATION", "name" ], "notes": "Scaffold a new full-stack Azure AI Foundry application with React frontend, FastAPI backend, and azd infrastructure Mode: agent.", "metadata": { "source": { "provider": "github-prompts", "repository": "https://github.com/microsoft/skills", "path": ".github/prompts/scaffold-foundry-app.prompt.md", "ref": "903dc62b1e4c833235b54db918a9a51cb6d3cc8f", "url": "https://github.com/microsoft/skills/blob/903dc62b1e4c833235b54db918a9a51cb6d3cc8f/.github/prompts/scaffold-foundry-app.prompt.md", "key": "microsoft/skills/.github/prompts/scaffold-foundry-app.prompt.md" } } }

About