Learn TanStack - Modern Tooling & Build Automation

#Introduction

Logically correct code isn't necessarily ready to ship to production without the right tooling. Episode 19 covers modern tooling and build automation for TanStack apps: choosing a bundler between Vite, Webpack, or esbuild, TypeScript integration for type-safe builds, dependency management and plugin configuration, and CI/CD pipelines.

The journey from episodes 3 through 18 built your application code; episode 19 shifts to the infrastructure that turns that code into a release-ready form. You'll learn that a good build pipeline keeps errors out of production, speeds up the feedback loop, and lets teams grow safely.

By the end of the episode, you can configure a TanStack project from scratch all the way to a CI/CD pipeline that runs lint, type check, and build automatically.

#Choosing Build Tooling: Vite, Webpack, or esbuild

#Vite for Development Speed

Vite is the primary choice because it combines esbuild for fast transformation during development with Rollup for optimal production bundling. Near-instant HMR makes TanStack UI iteration very fast.

npm i @tanstack/react-query @tanstack/react-table @tanstack/react-router
npm i -D @types/node typescript vite @vitejs/plugin-react

The command npm i @tanstack/react-query @tanstack/react-table @tanstack/react-router installs the runtime, while the second package set holds development tooling. Separating dependencies and devDependencies matters so the production bundle doesn't carry unused tooling.

#Webpack for Legacy and Monorepos

Webpack is still relevant for legacy codebases or monorepos with many entry points. Its configuration is more verbose, but its loader ecosystem is the most mature. esbuild itself is used as a fast transpiler for TypeScript and JSX before entering another bundler.

#Comparing the Strategies

Choosing tooling isn't about right or wrong, it's about context. For new TanStack projects, Vite is recommended because it's fast and concise. You can still add esbuild for specific transformation steps, or keep Webpack if a monorepo already depends on it.

#TypeScript Integration and Type-safe Builds

TypeScript is the backbone of TanStack's type safety. To make a build genuinely type-safe, run tsc --noEmit separately from the bundler, because Vite and esbuild ignore type errors for speed.

Script type check dan build

{
  "scripts": {
    "typecheck": "tsc --noEmit",
    "build": "tsc --noEmit && vite build"
  }
}

The script "typecheck": "tsc --noEmit" makes sure all types are valid before the bundle is produced. By combining it into build, you'll never produce an artifact from code that violates a type contract.

#Dependency Management and Plugin Configuration

#Lockfile and Controlled Upgrades

Dependency consistency is maintained through the lockfile and deterministic resolution. Always commit the lockfile and avoid random npm install runs on individual machines.

bun install --frozen-lockfile
npm ci

npm ci installs exactly as the lockfile specifies and rejects it if the lockfile is out of sync with package.json. This is the standard command in CI pipelines so builds are deterministic in every environment.

#Plugin Configuration in Vite

Vite plugins for TanStack Router and React are added through vite.config.ts. The Router plugin is responsible for automatic per-route code splitting.

Vite config dengan plugin TanStack

import { tanstackRouter } from "@tanstack/router-vite-plugin"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
 
export default defineConfig({
  plugins: [react(), tanstackRouter()],
})

The defineConfig({ plugins: [react(), tanstackRouter()] }) function registers both plugins. Plugin order matters: React runs first so JSX is transformed, then the Router plugin processes the route tree.

#CI/CD Pipelines for TanStack Apps

A CI/CD pipeline automates quality verification before deployment. For TanStack projects, the minimal stages are install, lint, typecheck, and build. Each stage runs in a clean environment so results are reproducible.

name: ci
on:
  pull_request:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run lint
      - run: npm run typecheck
      - run: npm run build

The steps block in the workflow above holds four commands: npm ci, npm run lint, npm run typecheck, and npm run build. If any of them fails, the pipeline stops and the PR can't be merged until it's fixed. This is the first line of defense before code reaches production.

#Conclusion

Episode 19 wrapped up modern tooling and build automation: strategies for choosing Vite, Webpack, and esbuild, TypeScript integration with a separate typecheck, dependency management with a lockfile, and CI/CD pipelines that run automated verification.

Key takeaways:

• Vite is recommended for new TanStack projects because it's fast and concise.
• Run tsc --noEmit separately from the bundler so types are truly checked.
• Separate dependencies and devDependencies so the production bundle is clean.
• Lockfile and npm ci make installation deterministic in CI.
• The Router plugin handles per-route code splitting automatically.
• CI pipelines run install, lint, typecheck, and build before release.

In the next episode, episode 20, we'll discuss production deployment — deploying TanStack Query and Router apps, hosting options for SPA and server-rendered apps, managing environment variables and runtime config, and build optimization for production. Your code and pipelines are ready; it's time to take the app into the real world!