Guides

📦 Full-Stack Starter Docs

logo2

⚒️ Starter DOCS: Drizzle OAuth Cloudflare Svelte

Docs-Driven Development: Generate easy-to-understand docs from your JS functions and APIs, to maximize reusable value and make the options clear to everyone.

Functionally Brilliant, Elegantly Simple Toolkit: StarterDOCS is to SvelteKit what Next.js is to React: full stack with smart defaults for common needs. It is easy to switch in alternatives: Such as running on AWS/GCE instead of Cloudflare, or using Next/Supabase isntead of Svelte/Cloudflare.

npx create-starter-app

📚 Drizzle ORM - lightweight ORM compatible with Cloudflare D1 and drizzle-kit to manage schema migrations

👤 Better Auth- Google oAuth sign-in and/or email signup via Resend mailer api, Stripe built-in, API docs, One Tap, with 4 email templates: reset password, change email, verify email, welcome. Settings and admin panel for users.

☁️ Cloudflare for Svelte - serverless autoscaling API and D1 database, great hosting platform with free tier

🖼️ SvelteKit - full stack interface and API routes framework. Many developers prefer Svelte over React.

🎨 Tailwind CSS + Bits UI + shadcn-svelte - popular UI components, with  lucide icons

📝 formsnap + sveltekit-superforms with zod validation and rate-limiting in server memory

✅ Vitest - unit testing UI

⭐ Extras & Alternative UI Blocks

  1. Shadcn Sidebar
  2. 21st.dev
  3. Magic UI Animations
  4. List of Svelte Libraries
  5. Material UI
  6. SkeletonUI
  7. Flowbite
  8. Icon sets
  9. Shadcn Libraries

🖼️ Screenshots

⬇️ Installation

  1. Install prerequisites Node.js or Bun curl -fsSL https://bun.sh/install | bash. Optional: Setup shell with dev tools like nvim, fish, system info with Server-Shell-Setup
  2. Clone to localhost or server git clone https://github.com/vtempest/svelte-docs-starter.
    Optional: Press . when on the Github repo page to fork and run in Github Workspaces.
  3. CD to project directory cd svelte-docs-starter.
  4. Install dependencies bun install.
  5. mv .env.example .env ; mv wrangler.example.toml wrangler.toml and set the domain and API keys in .env.
  6. Auth providers, get id/secret from Google.
  7. Set OAuth origin http://localhost and http://localhost:5173 on local or https://domain.com on server.
  8. Set redirect http://localhost:5173/auth/oauth/google/callback or https://api.domain.com/auth/oauth/google/callback.
  9. Optional: For email auth, get API from Resend mailer and verify domain.
  10. Log in with your Cloudflare account by running: bunx wrangler login.
  11. Create your D1 database via dashboard or with bunx wrangler d1 create serverless-docs-db or your custom db name.
  12. Copy the console output database_name and database_id.
  13. Go to wrangler.toml and change database_name and database_id.
  14. Go to drizzle.config.ts and change db name in dbName.
  15. Go to package.json and change db name in db:push:* and db:backup:prod.
  16. Generate and migrate the schema to dev or prod db: bun run db:migrate; bun run db:push:dev; bun run db:push:prod.
  17. Develop on local with bun dev.
  18. Deploy to prod with bun serve.
  19. Domain: Cloudflare Dashboard -> Workers and Pages -> [your worker name] -> Settings
  20. Add-to-Home on Mobile Web: Design logo and generate icons for with PWA Asset Generator or Favicon.io
  21. User Analytics: Get Google Analytics ID from Google Analytics or SimpleAnalytics and add to app.html.
  22. Email Forwarding: Setup Cloudflare Email Routing and GMail's Send From Verification

🛠️ Server Shell Setup

Previous Page

On this page

⚒️ Starter DOCS: Drizzle OAuth Cloudflare Svelte⭐ Extras & Alternative UI Blocks🖼️ Screenshots⬇️ Installation