WebApp Template

Monorepo template for creating a web application.

What's inside?

Uses

• Turborepo x pnpm
• Prettier (w/ prettier-plugin-svelte + prettier-plugin-tailwindcss)
• ESLint (w/ eslint-plugin-import) / CSpell
• lint-staged / husky
• GitHub Actions (Linting + Testing (Validate href and src paths))
• Execute eslint --fix and prettier when saving with VS Code

Apps and Packages

apps/

• nhost
  Local environment test server and production Nhost migration.
• mockup [Demo]
  A starting point for building a static site.
  Tailwind CSS + Vanilla JS + Vitest (Check links + file names)
• story
  Stories for the Svelte Components.
  Storybook (w/ Svelte + Tailwind CSS)
• web [Demo]
  A starting point for building Svelte application.
  SvelteKit (w/ Tailwind CSS)
  Nhost (w/ Houdini) / Vitest

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)

• EditorConfig
• ESLint
• Prettier
• Svelte
• Tailwind CSS IntelliSense

Breaking changes

v1.6.0

• Change from TypeScript to JavaScript + JSDoc

v1.0.0

• Change frontend framework (apps/web): Next.js → SvelteKit
• Change repository name: nextjs-template → webapp-template

v0.23.0

• Replace Firebase (apps/firebase) and Hasura (apps/hasura) apps with Nhost (apps/nhost)

Commands

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.