Learn SvelteKit - Modern Tooling & Build Automation

#Introduction

A healthy development rhythm is supported by good tooling: fast builds, strict types, and automation that runs quality checks without needing to be remembered. Episode 19 covers modern tooling and build automation in SvelteKit: Vite integration, TypeScript, CI/CD pipelines, and pre-commit hooks.

These tools work best when configured once and run automatically. The goal is not to add work, but to eliminate the work a machine can do: checking types, formatting code, and rejecting code that does not meet standards.

After this episode, you have a setup that makes a small team feel like a large one: quality is maintained without waiting on human review for things a machine can check.

#Vite Integration and Preprocessors

#Configuring Vite and Preprocessors

SvelteKit is built on Vite, so build and dev configuration share one place. vitePreprocess lets TypeScript and other languages be processed directly inside .svelte components, and aliases shorten imports.

svelte.config.js with a preprocessor

import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
import adapter from "@sveltejs/adapter-auto";
 
export default {
    preprocess: vitePreprocess(),
    kit: {
        adapter: adapter(),
        alias: {
            "@/*": "./src/*"
        }
    }
};

#Keeping Aliases and Types in Sync

Aliases in svelte.config.js need to be matched in tsconfig.json so TypeScript recognizes $lib and custom aliases. After changing the configuration, run npx svelte-kit sync so the generated types (like ./$types) are updated before type checking.

#TypeScript and Strict Typing

#Enabling Strict Mode

Strict typing turns many "should work" situations into "guaranteed to work". Enable strict in tsconfig.json and let TypeScript check the whole project, including components.

import type { PageLoad } from "./$types";
 
export const load: PageLoad = async ({ params }) => {
    const artikel = await ambilArtikel(params.slug);
 
    return { artikel };
};

#Leveraging Autogenerated Types

SvelteKit generates route-specific types in ./$types, for example PageLoad, Action, and ServerLoad. These types carry the shape of params, locals, and the values a load function returns, so contract changes are caught at compile time, not in production.

#CI/CD Pipeline for SvelteKit

#A Basic CI Workflow

A CI pipeline runs all checks on every push: install dependencies, lint, type check, test, and build. A failure at any step stops the process before the code reaches production.

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: 22
      - run: npm ci
      - run: npm run lint
      - run: npm run check
      - run: npm run test
      - run: npm run build

#Adding Cache and Artifacts

Caching dependencies in CI speeds up installs on the next push, and build artifacts can be reused by the deployment stage. Follow the documentation of the actions you use; the npm ci pattern with a lockfile ensures the installed dependencies match your local setup exactly.

#Linting, Formatting, and Pre-commit Hooks

#ESLint and Prettier in SvelteKit

The SvelteKit template already includes ESLint and Prettier. Lint rules keep patterns consistent and catch common mistakes, while Prettier standardizes formatting. Run both via npm run lint and npm run format.

npm install -D husky lint-staged
npx husky init

#Automating with Pre-commit Hooks

Hooks run automatic checks before a commit, so code that breaks standards never enters the history. lint-staged limits the checks to only the changed files, keeping the process fast even in a large repo.

npx lint-staged

#Closing

Key takeaways:

• Vite is the single place for dev and build config; vitePreprocess processes TypeScript.
• Aliases are kept in sync between svelte.config.js and tsconfig.json.
• Strict typing uses the autogenerated types in ./$types.
• CI runs lint, check, test, and build on every push.
• Prettier and ESLint keep style and patterns consistent.
• Husky and lint-staged automatically check files before they are committed.

In the next episode we get into deployment & hosting: deployment targets like Vercel, Netlify, Cloudflare, and self-hosting, comparing serverless and edge runtimes, optimizing builds and asset deployment, plus production deployment workflows.