🥪 sveltekit-encore 🥪

Fullstack Monorepo Starter with Bun + SvelteKit + Encore.ts

[!NOTE]

sveltekit-encore is a modern fullstack monorepo starter featuring seamless integration between SvelteKit frontend and Encore.ts backend. Leveraging Bun's speed and Prettier for consistent formatting, it provides an optimized development experience with hot-reloading for both ends.

🌟 Features

sveltekit-encore comes batteries included:

• Bun-Powered Monorepo - Blazing fast development with Bun runtime
• Type-Safe APIs - Encore.ts backend with automatic validation
• SvelteKit Frontend - Modern reactive UI framework
• Seamless Integration - Auto-generated API client for frontend
• Pre-configured Tooling - Prettier formatting & concurrent execution
• Production Ready - Built-in build scripts for deployment

💻 Installation

Clone and install dependencies

git clone https://github.com/ArnavK-09/sveltekit-encore.git
cd sveltekit-encore
bun install

🛠️ MonoRepo Commands

{
  "scripts": {
    "backend": "Start backend dev server",
    "backend:gen": "Generate frontend API client",
    "backend:gen:prod": "Generate frontend API client for production",
    "frontend": "Start SvelteKit dev server",
    "frontend:build": "Build production frontend",
    "dev": "Run both servers simultaneously",
    "boot": "Concurrent dev server execution",
    "fmt": "Format code with Prettier"
  }
}

Start development servers

bun run dev  # Or use 'bun run boot' for windows

🧠 Encore.ts Backend

Core Concepts

• Type-safe API endpoints with built-in validation
• Async handlers with typed request/response interfaces
• Automatic OpenAPI schema generation
• Path/Query/Header parameter mapping

Example Endpoint

import { api } from "encore.dev/api";

interface Params { name: string }
interface Response { message: string }

export const hello = api(
  { method: "GET", path: "/hello/:name" },
  async ({ name }: Params): Promise<Response> => {
    return { message: `Hello ${name}!` };
  }
);

🖥️ Frontend Integration

SvelteKit API Call Example

<script lang="ts">
import { client } from "$lib/client";

let input = $state("");
let message = $state("");

const fetchData = async () => {
  const res = await client.hello.get(input);
  message = res.message;
};
</script>

<input bind:value={input}>
<button on:click={fetchData}>Submit</button>
<p>{message}</p>

📷 UI Preview

💻 Contributing

[!TIP] Contributions welcome! Follow standard GitHub workflow:

1. Fork & Clone the repository
2. Create a feature branch: git checkout -b feat/awesome
3. Commit changes: git commit -m "feat: awesome feature"
4. Push & Open PR

👤 Author

Arnav K

📄 License

sveltekit-encore is released under the MIT

🌟 Found this useful? Give the repo a star to support its development! 🌟