dorayx / template-typescript-app

(opinionated) Vite-TypeScript Boilerplate

opinionated Vite-TypeScript Template

This template is opinionated, and it is not meant to be a one-size-fits-all solution. It is meant to be a starting point for my personal projects to bootstrap development, as I like to create minimal viable products from time to time.

User Cases

• ✅ TypeScript Application
• ❌ TypeScript Library (use dorayx/template-typescript-library instead)
• ❌ UI Component Library

Features

• ✅ TypeScript v5
• ✅ Vite + Vitest
• ✅ Linters
• ✅ Code Generator
• ✅ Semantic Release
• ✅ GitHub Actions
• ❌ Monorepo

Tooling

This template is configured with the following tools:

Compiler & Bundler

• TypeScript (v5)
• Vite (v4)
  • Plugin: vite-tsconfig-paths
  • Plugin: vite-plugin-dts

Package Manager

• Yarn (v3)
  • Doc: Zero-installs

Testing

• Vitest
  • Convention: Unit tests for user cases are stored in the tests/units directory
  • Convention: Unit tests for individual functions are placed alongside their respective implementations (In-source testing)
  • Convention: The file tests/setup.ts is executed before each test file
  • Convention: The tests/tsconfig.json file configures TypeScript for testing
• GitHub Action: .github/workflows/test.yml

Linters

• ESLint
• Prettier
• Commitlint
• Husky
• LintStaged

Code Generator

• Plop: A micro-generator framework that makes it easy for an entire team to create files with a level of uniformity

Publish

• semantic-release: Fully automated version management and package publishing
  • GitHub Action: .github/workflows/release-package.yml
  • Env Variables: NPM_TOKEN is required to publish a package to the npm registry
  • Additional Plugin: semantic-release-yarn
  • Additional Plugin: @semantic-release/changelog

Development Conventions

Branches

• main: Used for stable features & production releases
• dev: Used for features under development
• next: Used for experimental features