wrenchEngineering

Build, Tooling & Deployment

Bundlers, linting and formatting, env handling, type-checking in CI, and shipping a Next.js app to production.

1 item

Links1

01NotesNote

Bundlers & dev server

  • For a plain SPA, Vite is the default — fast dev server (native ESM + esbuild), simple config, great DX. For Next.js, the build tooling is built in (Turbopack in dev).
  • You rarely need to hand-configure a bundler anymore. Reach for custom config only when a real constraint demands it.

Linting & formatting — automate the bikeshedding

  • ESLint for correctness (catches the React/hooks footguns via the React plugins). Prettier for formatting. Keep them in separate lanes so they don't fight.
  • Make the editor format on save, and run lint + format in CI so style is never a PR discussion.
  • A pre-commit hook (Husky + lint-staged) catches issues before they land.

Type-checking is part of the build

  • Run tsc --noEmit in CI as a gate. A green build that doesn't type-check isn't green.
  • Treat type errors and lint errors as build failures, not warnings to ignore.

Environment & secrets

  • In Next.js, only NEXT_PUBLIC_* vars reach the browser — everything else stays server-side. Never put a secret in a public var.
  • Validate env vars at startup (a Zod schema over process.env) so a missing/typo'd var fails the build, not a user request.
  • Keep .env.local out of git; document required vars in .env.example.

Shipping

  • Vercel is the path of least resistance for Next.js (zero-config, preview deploys per PR). Self-hosting works too — next build + the standalone output in a Docker container behind Nginx — which is the route when you want control or to avoid platform lock-in.
  • Preview deployments per pull request are a huge workflow win — review the actual running UI, not a screenshot.
  • Set up source maps + an error monitor (Sentry) so production errors are visible with real stack traces.

Testing baseline

  • Vitest + React Testing Library for component/unit tests — test behavior the user sees, not implementation details.
  • Playwright for a handful of end-to-end tests on critical flows (auth, checkout). A few real E2E tests catch more than a hundred shallow unit tests.