{"id":18160709,"url":"https://github.com/blankeos/svelte-launch","last_synced_at":"2025-07-17T03:32:10.257Z","repository":{"id":244596092,"uuid":"812773132","full_name":"Blankeos/svelte-launch","owner":"Blankeos","description":"🐅 My SvelteKit + tRPC boilerplate starter","archived":false,"fork":false,"pushed_at":"2024-08-22T14:45:22.000Z","size":383,"stargazers_count":6,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-03T01:57:09.697Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Blankeos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-09T20:47:24.000Z","updated_at":"2025-04-01T13:42:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"0185fe6d-9af7-40cd-9aff-c70c655510b9","html_url":"https://github.com/Blankeos/svelte-launch","commit_stats":null,"previous_names":["blankeos/svelte-launch"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Blankeos/svelte-launch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blankeos%2Fsvelte-launch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blankeos%2Fsvelte-launch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blankeos%2Fsvelte-launch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blankeos%2Fsvelte-launch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Blankeos","download_url":"https://codeload.github.com/Blankeos/svelte-launch/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blankeos%2Fsvelte-launch/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265563013,"owners_count":23788630,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-02T08:09:06.025Z","updated_at":"2025-07-17T03:32:10.242Z","avatar_url":"https://github.com/Blankeos.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 🧡 Svelte Launch\n\n\u003e An sophisticated boiler-plate built for **simplicity**.\n\n[Carlo](https://carlo.vercel.app/)'s starter for making a SvelteKit app with batteries included on stuff I like after experimenting for years.\n\nThis is handcrafted from my own research. This might not work for you, but it works for me. 🤓\n\nYou can also try my other starters:\n\n- [💙 Solid Launch](https://github.com/blankeos/svelte-launch) - If you like Solid, but same robust practices.\n\n### Benefits\n\n- [x] 🐭 **Simple and minimal** - SvelteKit is the best JS framework for simplicty and getting the job done. Hands-down.\n- [x] ⚡️ **Super-fast dev server** - way faster than NextJS thanks to Vite. You need to feel it to believe it! It can also literally build your app in seconds.\n- [x] ☁️ **Selfhost-ready** - Crafted with simple hosting in mind that'll still probably scale to millions. Just spin up Docker container on a good'ol VPS without locking into serverless. DHH and Shayan influenced me on this. You can still host it on serverless tho. I think? lol\n- [x] **🔋 Batteries-included** - took care of the hard stuff for you. A well-thought-out folder structure from years of making projects: a design system, components, utilities, hooks, constants, an adequate backend DDD-inspired sliced architecture that isn't overkill, dockerizing your app, and most importantly---perfectly-crafted those pesky config files.\n- [x] 🔑 Authentication-Ready - One thing devs get stuck on. There's a practical auth implemented from scratch here that doesn't vendor-lock you into any auth provider.\n  - [x] Password\n  - [ ] Transactional Emails (Forgot Password, Email Verification)\n  - [ ] OAuth\n  - [ ] Magic Link\n  - [ ] User Management Dashboard\n\n### Tech Stack\n\n- [x] **Bun** - Runtime and package manager. You can always switch to Node and PNPM if you wish.\n- [x] **Svelte** - Frontend framework that I like. Pretty underrated, but awesome!\n- [x] **SvelteKit** - Like NextJS, but for Svelte and Vite! Simpler and Faster!\n- [x] **tRPC** - E2E typesafety without context switching. Just amazing DevX.\n- [x] **Tailwind** - Styling the web has been pretty pleasant with it. I even use it on React Native for work. It's amazing.\n- [x] **Prisma** - Great _migrations_ workflow, but I want to maximize perf.\n- [x] **Kysely** - Great typesafe _query builder_ for SQL, minimally wraps around db connection.\n- [x] **SQLite/LibSQL (Turso)** - Cheapest database, easy to use.\n- [x] **Lucia** - Makes self-rolling auth easy.\n- [ ] **SES or MimePost** - Emails\n- [ ] **Backblaze** - Cheap blob object storage with an S3-compatible API.\n- [ ] **Paddle** - Accept payments and pay foreign taxes.\n\n### QuickStart\n\nI'll assume you don't want to change anything with this setup after cloning so let's get to work!\n\n1. Copy the environment variables\n\n   ```sh\n   cp .env.example .env\n   ```\n\n2. Replace the `\u003cabsolute_url\u003e` in the local database with:\n\n   ```sh\n   pwd # If it outputs: /User/Projects/svelte-launch\n\n   # Replace the .env with:\n   DATABASE_URL=\"file:/User/Projects/svelte-launch/local.db\"\n   ```\n\n3. Generate\n\n   ```sh\n   bun db:generate # generates Kysely and Prisma client types.\n   bun db:migrate # migrates your database.\n   ```\n\n4. Install deps and run dev\n\n   ```sh\n   bun install\n   bun dev\n   ```\n\n### Useful Development Tips\n\nI took care of the painstaking parts to help you develop easily on a SPA + SSR + backend paradigm. You can take take these practices to different projects as well.\n\n1. Make use of the `code-snippets` I added. It'll help!\n2. Check all typescript errors (`Cmd` + `Shift` + `B` \u003e `tsc:watch tsconfig.json`).\n3. Authentication Practices - I have these out-of-the-box for you so you won't have to build it.\n\n   - Getting Current User.\n\n     ```ts\n     import { authStore } from '@/stores/auth.store';\n     ```\n\n   - Login, Logout, Register\n\n     ```ts\n     import { login, logout, register } from '@/stores/auth.store';\n     ```\n\n   - Hydrating Current User\n\n     This will also automatically hydrate in your layouts. Anywhere you use `$authStore`, it's magic.\n\n     ```ts\n     // page.server.ts\n     export async function load(event: PageServerLoadEvent) {\n       const trpcClient = initTRPCSSRClient(event.request.headers, event.setHeaders);\n\n       const result = await trpcClient.auth.currentUser.query();\n\n       if (!result.user) {\n         throw redirect(302, '/dashboard'); // Must be a public route here.\n       }\n\n       return {\n         user: result.user ?? null,\n       };\n     }\n\n     // page.svelte\n     import { authStore, hydrateAuthStore } from '@/stores/auth.store';\n\n     let { data } = $props();\n     hydrateAuthStore(data.user);\n     ```\n\n   - Protecting Routes (Client-Side) - Just block the content.\n\n     ```tsx\n     \u003cscript\u003e\n     import ProtectedRoute from '@/components/common/protected-route.svelte';\n     \u003c/script\u003e\n\n     \u003cProtectedRoute\u003e\n       On the server (hydration), this part will not be rendered if unauthenticated.\n\n       On the client, you will be redirected to a public route if unauthenticated.\n     \u003c/ProtectedRoute\u003e\n     ```\n\n   - Protecting Routes (SSR) - Automatically redirect.\n\n     ```ts\n     import { initTRPCSSRClient } from '@/lib/trpc-ssr-client.js';\n     import { redirect } from '@sveltejs/kit';\n     import type { PageServerLoadEvent } from './$types';\n\n     export async function load(event: PageServerLoadEvent) {\n       const trpcClient = initTRPCSSRClient(event.request.headers, event.setHeaders);\n\n       const result = await trpcClient.auth.currentUser.query();\n\n       if (!result.user) {\n         throw redirect(302, '/dashboard'); // Must be a public route here.\n       }\n\n       return {\n         user: result.user ?? null,\n       };\n     }\n     ```\n\n4. Dataloading Practices - Also have these out-of-the-box for most usecases since they're tricky to do if you're clueless:\n   - Tanstack Query (Client-only) - Use `trpc-client.ts`\n   - Hydrated Tanstack Query (SSR) - Use `create-dehydrated-state.ts` + `trpc-ssr-client.ts`\n\n### Backend Architecture\n\nMy backend architecture is inspired by DDD where I separate in layers, but I keep it pragmatic by not going too overkill with Entities, Domains, and Aggregates. I personally still like the anemic data-driven architecture for most of my apps since the\napps I make aren't too business-logic-heavy.\n\n```sh\n.\n└── server/ # - root\n    ├── dao/ # - data-access-objects\n    │   └── *.dao.ts\n    ├── modules/\n    │   └── \u003cmodule\u003e/\n    │       ├── services/\n    │       │   └── *.service.ts # 1 service usecase\n    │       └── \u003cmodule\u003e.controller.ts\n    └── _app.ts # - root TRPC router.\n```\n\n- **`dao`** - abstracted away all queries here to interface with them as plain functions. It actually helps me mentally collocate db queries from service logic when I'm using them inside the service.\n- **`modules`** - a vertical slice of each module-group. This just depends on how I feel about grouping them. You get better overtime.\n- **`\u003cmodule\u003e.controller.ts`** - pretty much a group of http endpoints. I can put the DTOs/Validations for each endpoint here without context-switching.\n- **`services`** - these are even smaller pieces of logic that can be used inside each endpoint. It's not necessary to use if the app isn't too big, but it helps.\n- **`_app.ts`** - The root trpc router where the `AppRouter` type is exported.\n\n### Deployment\n\n\u003e [!WARNING]\n\u003e\n\u003e Still in progress\n\nHere are some guides on how to deploy.\n\n- [ ] Kamal (self-host VPS - I recommend)\n- [ ] Dokku (self-host VPS)\n- [ ] Caprover (self-host VPS)\n- [ ] Cloudflare (serverless + static)\n- [ ] Vercel (serverless + static)\n- [ ] Netlify (static)\n\n### Future Plans\n\n\u003e I'll probably make a swapping guide soon. To replace to these:\n\u003e\n\u003e - Runtime: Bun -\u003e Node\n\u003e - Package Manager: Bun -\u003e PNPM\n\u003e - ORM: Prisma -\u003e Drizzle\n\u003e - Database: SQLite -\u003e PostgreSQL, CockroachDB, MongoDB\n\n\u003c!-- # create-svelte\n\nEverything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).\n\n## Creating a project\n\nIf you're seeing this, you've probably already done this step. Congrats!\n\n```bash\n# create a new project in the current directory\nnpm create svelte@latest\n\n# create a new project in my-app\nnpm create svelte@latest my-app\n```\n\n## Developing\n\nOnce you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:\n\n```bash\nnpm run dev\n\n# or start the server and open the app in a new browser tab\nnpm run dev -- --open\n```\n\n## Building\n\nTo create a production version of your app:\n\n```bash\nnpm run build\n```\n\nYou can preview the production build with `npm run preview`.\n\n\u003e To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblankeos%2Fsvelte-launch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblankeos%2Fsvelte-launch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblankeos%2Fsvelte-launch/lists"}