0Pricing
Frontend Academy · Lesson

Environment Variables in CI

Store secrets in GitHub Secrets, inject them into the build as environment variables, and access them in Vite with import.meta.env or Next.js with process.env.

Why Different Envs?

Apps need different values per environment: dev API URL, staging API URL, production API URL. Plus secrets (API keys, tokens) that must never end up in the repo. Environment variables are the standard way to inject these.

Public vs Server-Only

Frontend vars baked into the bundle are public — visible to anyone with DevTools. Never put secrets there. Server-side vars (used in serverless functions, SSR, API routes) can be true secrets.

All lessons in this course

  1. GitHub Actions for Frontend: lint test build
  2. Deploying to Vercel Netlify and Cloudflare Pages
  3. Environment Variables in CI
  4. Automated Lighthouse Checks
← Back to Frontend Academy