Learn Svelte - Modern Tooling & Build Automation

#Introduction

Modern projects don't rely on human memory. Properly installed tools — compilers, type checkers, linters, and automated pipelines — maintain quality every time code changes.

This episode covers Vite and SvelteKit as build tooling, TypeScript integration with strict mode, CI/CD pipelines for Svelte apps, and linting, formatting, and pre-commit hooks.

When you're done, you'll have a toolchain that catches errors early and enforces consistency without manual debate. A small investment in tools pays off every time a bug is caught before reaching production.

#Vite, SvelteKit, and Build Tooling

#One Build Pipeline

SvelteKit is built on top of Vite. All transformations — Svelte, TypeScript, CSS, and assets — flow through the same pipeline. Additional configuration is written in vite.config.ts, while SvelteKit behavior is set in svelte.config.js.

The commands used day to day:

npm run dev
npm run build
npm run preview

npm run build produces the production output according to the installed adapter, and npm run preview runs the build locally for verification before deployment.

#TypeScript Integration and Strict Mode

#Enabling Full Type Checking

TypeScript catches errors before code runs. Enable full strict mode in tsconfig.json to make type checking a real safety net:

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noUnusedLocals": true
  }
}

strict: true enables a set of strict checks, including explicit null and undefined handling. noUncheckedIndexedAccess forces you to face the possibility of a missing index. The result: more errors while typing, far fewer at runtime.

#svelte-check on Every Change

Run npx svelte-check regularly or through a check script. This tool understands .svelte syntax and checks types in templates, scripts, and across files — something a plain type checker can't do thoroughly.

#CI/CD Pipeline for Svelte Apps

#Build Pipeline in GitHub Actions

CI runs checks on every commit. A minimal pipeline checks, lints, then builds:

name: ci
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run check
      - run: npm run lint
      - run: npm run build

actions/setup-node@v4 prepares Node on the runner. npm ci installs dependencies deterministically from the lockfile. Failing at any step stops the pipeline — a broken commit never moves on to deploy.

#Automated Deployment

The deploy step is usually split into a separate job that runs after all checks are green. Secrets like deploy tokens are stored in GitHub Secrets and injected as environment variables when the pipeline runs.

#Linting, Formatting, and Pre-commit Hooks

#ESLint and Prettier

ESLint catches problematic code patterns; Prettier unifies formatting without style debates. They work as a pair: ESLint for logic, Prettier for visual consistency.

#Hooks Before Committing

Hooks make sure code is clean before it enters history. Husky runs lint-staged on the changed files:

npm install -D husky lint-staged
npx husky init

Husky creates a .husky folder with a pre-commit hook. The lint-staged configuration in package.json specifies the commands run on staged files — for example, format and lint only the files actually changed, not the whole project.

#Conclusion

Key takeaways:

• Vite and SvelteKit share one build pipeline.
• Enable strict mode and noUncheckedIndexedAccess in TypeScript.
• Run svelte-check, lint, and build in CI on every commit.
• Split deploy into a job that runs after checks are green.
• Store secrets in GitHub Secrets, not in the repository.
• Use Husky and lint-staged to maintain quality before commits.

Next, in episode 20 you'll learn deployment & hosting — platform choices like Vercel, Netlify, and Cloudflare Pages, SvelteKit adapters and serverless deployment, production output optimization, and caching and CDN integration. The CI pipeline from this episode will trigger deploys to those platforms.