Vite in production: the Azure pod checklist nobody gives you

# -- Before (CRA) -------------------------------------------------------------
FROM node:16-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html   # ← breaks
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

# -- After (Vite) -------------------------------------------------------------
FROM node:22-alpine AS builder          # Node version also changes — see §2
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html    # ← fixed
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

# Azure DevOps — PublishBuildArtifacts
- task: PublishBuildArtifacts@1
  inputs:
    pathToPublish: '$(Build.SourcesDirectory)/dist'   # was: /build
    artifactName: 'frontend'
    publishLocation: 'Container'

# Azure DevOps pipeline — Node version
- task: NodeTool@0
  inputs:
    versionSpec: '22.x'     # was '16.x' or '14.x'
  displayName: 'Install Node.js'

# Kubernetes ConfigMap — rename all REACT_APP_* keys
apiVersion: v1
kind: ConfigMap
metadata:
  name: frontend-config
  namespace: production
data:
  # Before                              # After
  # REACT_APP_API_URL: ...              VITE_API_URL: "https://api.example.com"
  # REACT_APP_FEATURE_FLAGS: ...        VITE_FEATURE_FLAGS: "dark-mode,new-nav"
  # REACT_APP_BUILD_ENV: ...            VITE_BUILD_ENV: "production"
  VITE_API_URL: "https://api.example.com"
  VITE_FEATURE_FLAGS: "dark-mode,new-nav"
  VITE_BUILD_ENV: "production"

# Azure DevOps pipeline variables section
variables:
  # Before
  # REACT_APP_API_URL: $(API_URL_FROM_KEYVAULT)
  # REACT_APP_TENANT_ID: $(TENANT_ID)
  # After
  VITE_API_URL: $(API_URL_FROM_KEYVAULT)
  VITE_TENANT_ID: $(TENANT_ID)

# Dockerfile — accept build args in the builder stage
FROM node:22-alpine AS builder
WORKDIR /app

# Declare args — these are available during npm run build
ARG VITE_API_URL
ARG VITE_TENANT_ID
ARG VITE_BUILD_ENV=production

# Vite picks these up via import.meta.env during the build
ENV VITE_API_URL=$VITE_API_URL
ENV VITE_TENANT_ID=$VITE_TENANT_ID
ENV VITE_BUILD_ENV=$VITE_BUILD_ENV

COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run 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;"]

# Azure DevOps — pass vars as Docker build args
- task: Docker@2
  displayName: 'Build image'
  inputs:
    command: 'build'
    dockerfile: 'Dockerfile'
    arguments: >
      --build-arg VITE_API_URL=$(VITE_API_URL)
      --build-arg VITE_TENANT_ID=$(VITE_TENANT_ID)
      --build-arg VITE_BUILD_ENV=production
    tags: '$(Build.BuildId)'

#!/bin/sh
# docker-entrypoint.sh — generates config.js from pod env vars at startup
# Mount this as the container ENTRYPOINT in the Dockerfile

cat > /usr/share/nginx/html/config.js <<EOF
window._env_ = {
  API_URL: "${VITE_API_URL:-}",
  TENANT_ID: "${VITE_TENANT_ID:-}",
  BUILD_ENV: "${VITE_BUILD_ENV:-production}"
};
EOF

exec nginx -g 'daemon off;'

<!-- index.html — load config.js before your app bundle -->
<head>
  <meta charset="UTF-8" />
  <script src="/config.js"></script>  <!-- must be before the module scripts -->
</head>

// src/utils/env.ts — reads from window._env_ at runtime, falls back to build-time baked values
declare global {
  interface Window {
    _env_?: Record<string, string>
  }
}

export const env = {
  apiUrl:     window._env_?.API_URL     ?? import.meta.env.VITE_API_URL     ?? '',
  tenantId:   window._env_?.TENANT_ID   ?? import.meta.env.VITE_TENANT_ID   ?? '',
  buildEnv:   window._env_?.BUILD_ENV   ?? import.meta.env.VITE_BUILD_ENV   ?? 'production',
} as const

// Usage: import { env } from '@/utils/env'
// env.apiUrl, env.tenantId — same API regardless of whether values are baked or runtime-injected

# Full Azure DevOps pipeline snippet — before and after comparison
stages:
- stage: Build
  jobs:
  - job: BuildFrontend
    steps:
    - task: NodeTool@0
      inputs:
        versionSpec: '22.x'                # was: '16.x'

    - script: npm ci
      displayName: 'Install dependencies'

    - script: npm run build
      displayName: 'Vite build'             # command unchanged
      env:
        VITE_API_URL: $(VITE_API_URL)       # was: REACT_APP_API_URL
        VITE_TENANT_ID: $(VITE_TENANT_ID)   # was: REACT_APP_TENANT_ID

    # 1. Copy step — update source path
    - task: CopyFiles@2
      inputs:
        sourceFolder: '$(Build.SourcesDirectory)/dist'    # was: /build
        contents: '**'
        targetFolder: '$(Build.ArtifactStagingDirectory)'

    # 2. Publish step — update pathToPublish
    - task: PublishBuildArtifacts@1
      inputs:
        pathToPublish: '$(Build.ArtifactStagingDirectory)'
        artifactName: 'frontend'

    # 3. Docker build — update build args as shown in §3
    - task: Docker@2
      inputs:
        command: 'buildAndPush'
        dockerfile: 'Dockerfile'
        arguments: '--build-arg VITE_API_URL=$(VITE_API_URL)'

# nginx.conf — confirm this is what you have
server {
    listen 80;
    server_name _;

    # root points to the COPY target — already correct after Dockerfile fix
    root /usr/share/nginx/html;
    index index.html;

    location / {
        # This line is the one that matters for SPA routing
        # If it's here, no changes needed for Vite
        try_files $uri $uri/ /index.html;
    }

    # Cache built assets aggressively — Vite output hashes match CRA behavior
    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # If you had a /static/ location for CRA's static/ dir — remove it
    # Vite doesn't produce a static/ subdirectory
}

# 1. Confirm dist files landed in the right place
# Should show .js and .css files with content hashes in their names (Vite default)
kubectl exec -it <pod-name> -n <namespace> -- ls /usr/share/nginx/html/assets/

# Expected output: index-Cd7FkVHB.js  index-DiwrgTda.css  ...
# If empty or missing: check COPY path in Dockerfile

# 2. Confirm env vars were baked — the variable NAME should NOT appear in the bundle
# The literal value is inlined; the VITE_API_URL string itself should be gone
kubectl exec -it <pod-name> -n <namespace> -- sh -c \
  "grep -rl 'VITE_API_URL\|REACT_APP_' /usr/share/nginx/html/assets/ 2>/dev/null"

# Expected output: (nothing)
# If REACT_APP_ still appears: old bundle in the image — rebuild with --no-cache
# If VITE_API_URL appears: env var wasn't substituted — check that build args reached the builder stage

# 3. Smoke test SPA routing — non-root routes must return 200, not 404
# A 404 here means try_files is missing or nginx config wasn't updated
kubectl exec -it <pod-name> -n <namespace> -- sh -c \
  "curl -s -o /dev/null -w '%{http_code}' http://localhost/dashboard/settings"

# Expected output: 200
# If 404: check try_files $uri $uri/ /index.html in nginx.conf
# If 500: check nginx error log: kubectl logs <pod-name> -n <namespace>