Sveltekit Directus Starter

alexvdvalk

SvelteKit + Directus Starter

A modern, type-safe boilerplate for building full-stack applications with SvelteKit and Directus. This starter template features automatic type generation, remote functions pattern, async Svelte 5 components, and Tailwind CSS v4.

✨ Features

🚀 SvelteKit 2 - Modern full-stack framework
📦 Directus SDK - Type-safe headless CMS integration
🔄 Auto Type Generation - Automatic TypeScript types from Directus schema
🎯 Remote Functions Pattern - Clean separation of server-side data fetching
⚡ Async Svelte Components - Leverage Svelte 5's $derived and await syntax
🎨 Tailwind CSS v4 - Utility-first styling with latest features
📝 TypeScript - Full type safety across the stack
🛠️ ESLint & Prettier - Code quality and formatting
🔐 Environment Variables - Secure configuration management

🏗️ Project Structure

src/
├── lib/
│   ├── directus/
│   │   ├── directus.ts              # Directus client configuration
│   │   └── generateDirectusTypes.ts # Type generation script
│   ├── remotes/
│   │   └── directus.remote.ts       # Remote functions for data fetching
│   └── types/
│       └── directus-schema.ts       # Auto-generated Directus types
└── routes/
    ├── +page.svelte                 # Example page with async data
    └── +layout.svelte               # Root layout

🚦 Getting Started

Prerequisites

Node.js 18+
A running Directus instance
npm or pnpm

Installation

Clone the repository

Using degit (recommended for starter templates):

npx degit https://github.com/alexvdvalk/sveltekit-directus-starter my-project
cd my-project

Install dependencies

npm install

Set up environment variables

Create a .env file in the root directory:

PUBLIC_DIRECTUS_SERVER=https://your-directus-instance.com
DIRECTUS_TOKEN=your-static-token

Note: You can generate a static token in your Directus admin panel under Settings → Access Tokens.

Generate Directus types

npm run generate:types

This will create/update src/lib/types/directus-schema.ts with types matching your Directus schema.

Start the development server

npm run dev

Visit http://localhost:5173 to see your app running!

📖 Usage

Remote Functions Pattern

This starter uses a "remote functions" pattern for server-side data fetching. Remote functions are defined using SvelteKit's query helper and can be directly awaited in components.

Define a remote function (src/lib/remotes/directus.remote.ts):

import { query } from "$app/server";
import getDirectus from "$lib/directus/directus";
import { readUsers } from "@directus/sdk";

export const getUsers = query(async () => {
    const directus = getDirectus();
    return await directus.request(readUsers());
});

Use in a component (src/routes/+page.svelte):

<script lang="ts">
    import { getUsers } from "$lib/remotes/directus.remote";
    
    // Async data with Svelte 5's $derived
    const data = $derived(await getUsers());
</script>

{#each data as user}
    <p>{user.first_name}</p>
{/each}

Working with Directus

The Directus client is configured to:

Use SvelteKit's native fetch for optimal performance
Support static token authentication
Provide full TypeScript support via generated types

Example: Fetching items

import { query } from "$app/server";
import getDirectus from "$lib/directus/directus";
import { readItems } from "@directus/sdk";

export const getPosts = query(async () => {
    const directus = getDirectus();
    return await directus.request(
        readItems('posts', {
            fields: ['id', 'title', 'content'],
            filter: { status: { _eq: 'published' } }
        })
    );
});

Type Generation

Whenever you update your Directus schema, regenerate types:

npm run generate:types

This ensures your TypeScript types stay in sync with your CMS structure.

🎨 Styling with Tailwind CSS

This project uses Tailwind CSS v4 with additional plugins:

@tailwindcss/typography - Beautiful typographic defaults
@tailwindcss/forms - Form styling

Example usage in components:

<div class="container mx-auto px-4">
    <h1 class="text-4xl font-bold text-gray-900">
        Welcome to SvelteKit + Directus
    </h1>
</div>

📜 Available Scripts

Command	Description
`npm run dev`	Start development server
`npm run build`	Build for production
`npm run preview`	Preview production build
`npm run check`	Run type checking
`npm run lint`	Lint code with ESLint
`npm run format`	Format code with Prettier
`npm run generate:types`	Generate TypeScript types from Directus

🔧 Configuration

Directus Client

The Directus client is configured in src/lib/directus/directus.ts. It uses:

Static Token Authentication - Simple and secure for server-side operations
SvelteKit's fetch - Leverages SvelteKit's enhanced fetch with cookies and headers
Type Safety - Full TypeScript support via generated schema

Environment Variables

Required environment variables:

PUBLIC_DIRECTUS_SERVER - Your Directus instance URL
DIRECTUS_TOKEN - Static token for authentication

🚀 Deployment

Build the application:

npm run build

The build output will be in the build/ directory. Deploy using your preferred adapter:

See SvelteKit adapters documentation for more options.

📚 Learn More

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - feel free to use this starter for your projects!

Happy coding! 🎉

Top categories