Accessibility, Build and Deploy

Ship an accessible production build with env vars and a static host.

• Advanced
• 15 min read
• 3 objectives

Before this lessonLesson 14: Component Patterns

Shipping a React app is a static build plus a host, plus the accessibility and environment work people skip until production hurts.

Accessibility checklist

• Every interactive control is a button or a link, not a div with an onClick.
• Form fields have a <label htmlFor> (or wrap the input).
• Images have meaningful alt, or alt="" if decorative.
• Do not rely on colour alone; keep contrast at 4.5:1 for body text.
• Manage focus when a modal opens and restore it when it closes.

function IconButton({ label, children, onClick }) {
  return (
    <button type="button" aria-label={label} onClick={onClick}>
      {children}
    </button>
  );
}

Production build

npm run build
npm run preview          # serve the dist/ folder locally

Vite emits hashed assets in dist/. Any static host (Netlify, Cloudflare Pages, GitHub Pages, S3 + CloudFront) can serve it. For client-side routing, configure the host to fall back to index.html.

Environment variables

Vite only exposes variables prefixed with VITE_, and they are inlined at build time. Never put a secret in the frontend bundle.

# .env.production
VITE_API_URL=https://api.example.com

const api = import.meta.env.VITE_API_URL;
fetch(`${api}/health`);