Webapp Template

Overview

The WebApp TemplateMonorepo is a versatile template for creating web applications. It utilizes various tools and technologies such as Turborepo, Prettier, ESLint, lint-staged, and GitHub Actions to provide a seamless development experience. The template includes different apps and packages, each serving a specific purpose such as a local environment test server, a static site mockup, Svelte components library, and more. It also provides a list of listening port numbers for different services. If you need to prepare the environment for GitHub or Vercel, the template offers instructions for registering environment variables.

Features

• Turborepo: Utilizes Turborepo along with pnpm to manage dependencies and improve the monorepo development workflow.
• Prettier: Integrates Prettier with prettier-plugin-svelte and prettier-plugin-tailwindcss for consistent code formatting.
• ESLint: Includes ESLint along with eslint-plugin-import and CSpelllint for code quality and spelling checks.
• Lint-staged / husky: Automates linting and formatting checks for staged files using lint-staged and husky.
• GitHub Actions: Sets up GitHub Actions for linting and testing, including path validation for href and src paths.
• Local environment test server and production Nhost migration: Provides an app called nhost for testing the local environment and migrating to production Nhost.
• Static site mockup: Offers a starting point for building a static site using Tailwind CSS, Vanilla JS, and Vitest for link and file name checking.
• Svelte Components Stories: Includes stories for the Svelte components, leveraging Storybook with Svelte and Tailwind CSS.
• SvelteKit web application: Provides a starting point for building a Svelte application using SvelteKit and Tailwind CSS, enhanced with Nhost and Houdini.
• Svelte component library: Offers a stub Svelte component library in the form of a package called ui.
• Tailwind preset: Provides a preset for use with the tailwind.config.js and global.css, called tailwind-preset-base.
• ESLint configurations: Includes eslint-config-custom, which provides ESLint configurations along with prettier-plugin-svelte and eslint-config-[prettier|turbo].
• VS Code Extensions: Recommends installing several VS Code extensions for improved development experience, including EditorConfig, ESLint, Prettier, Svelte, and Tailwind CSS IntelliSense.
• Breaking changes: Details the major breaking changes in different versions of the WebApp TemplateMonorepo, such as switching from TypeScript to JavaScript and JSDoc.
• Commands: Provides a list of listening port numbers for various services in the template, including apps/nhost, Nhost Dashboard, Postgres, GraphQL Endpoint, MailHog, Hasura Console, SvelteKit application, Storybook, Static site, and Express server.
• Registering environment variables for GitHub / Vercel: Guides users on registering environment variables (.env items) for GitHub or Vercel to prepare the environment.