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.

Installation

To install the WebApp TemplateMonorepo, follow these steps:

1. Clone the repository using git clone [repository-url].
2. Navigate to the cloned repository’s root directory.
3. Install the dependencies using pnpm by running pnpm install.
4. Set up the environment variables for GitHub or Vercel by following the instructions provided.
5. Run the desired commands for specific apps or packages, as listed in the template.

For more detailed installation instructions and specific code snippets, refer to the original documentation.

Summary

The WebApp TemplateMonorepo is a comprehensive template for building web applications. It offers a wide range of features and tools, including Turborepo, Prettier, ESLint, lint-staged with husky, and GitHub Actions. The template provides various apps and packages for different purposes, such as a local environment test server, a static site mockup, and a Svelte component library. It also includes instructions for registering environment variables and lists the listening port numbers for different services. With its extensive features and easy installation process, the WebApp TemplateMonorepo is a valuable resource for web developers.