Webapp Template

SvelteKit (w/ Houdini) x Tailwind CSS x Storybook x Nhost x Turborepo (pnpm)

svelte logo

Want a Svelte site built?

Hire a Svelte developer

WebApp Template

Monorepo template for creating a web application.

What's inside?


Apps and Packages



  • ui
    A stub Svelte component library.
  • tailwind-preset-base
    A preset for use with tailwind.config.js and global.css.
  • eslint-config-custom
    eslint configurations. (w/ prettier-plugin-svelte + eslint-config-[prettier|turbo])

VS Code Extensions (Recommend)

Breaking changes


  • Change from TypeScript to JavaScript + JSDoc


  • Change frontend framework (apps/web): Next.jsSvelteKit
  • Change repository name: nextjs-templatewebapp-template



pnpm i  # Resolve dependency packages and prepare .env files
# Then set up /.env

pnpm build   # Build all apps and packages
pnpm dev     # Set up file monitoring builds and local servers for development
pnpm lint    # eslint + markuplint | prettier --check
pnpm test    # Testing
pnpm format  # eslint --fix + prettier --write + format project-words.txt

List of listening port numbers

  • 1337: apps/nhost/ - Hasura
    • 3030: Nhost Dashboard
    • 5432: Postgres
    • 8080: GraphQL Endpoint
    • 8025: MailHog
    • 9695: Hasura Console
  • 5173: apps/web/ - SvelteKit application
  • 6006: apps/story/ - Storybook
  • 8000: apps/mockup/ - Static site
  • 49160: apps/mockup/ - Express server

Registering environment variables for GitHub / Vercel

If you need to prepare GitHub / Vercel environment, you need to set all environment variables (.env items) in each service.

Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer

Get New Themes & Resources

Loading Svelte Themes