August 14, 2023

Minimal Starter Template for Vite with React, TypeScript and Tailwind

Starter Kit for Vite, React, TypeScript, Tailwind and Node.js ESM

Minimal, sensible defaults, fast.

Read the blog post about this template.

Technologies

screenshot of <code>App.tsx</code>

Setup

  • Press the "Use this template" on the top of this repository's GitHub page.
  • Run pnpm install (or npm install if you don't use pnpm).
  • pnpm dev for development.
  • Use pnpm test to run tests.
  • pnpm build for production builds.

Note: You can install pnpm via homebrew on macOS: brew install pnpm.

Protips for the fastest Developer Experience

  • Use npm-run-all to parallelize local test runs.
  • Prettier and eslint have --cache flags. Use them!
  • Do not run prettier inside of eslint. It commonly takes 50% of the eslint runtime!
  • Automatically sort imports when running prettier/saving the document via @ianvs/prettier-plugin-sort-imports.
  • Use swc with ts-node for fast node scripts with ESM. See below ↓

Run node scripts with ESM and TypeScript, fast.

Create a script.ts file, run chmod x script.ts and execute it via ./script.ts.

#!/usr/bin/env node --no-warnings --experimental-specifier-resolution=node --loader ts-node/esm

console.log('Your code goes here.');

Use this to restart your scripts instantly when a file changes:

#!/usr/bin/env NODE_ENV=development node --watch --no-warnings --experimental-specifier-resolution=node --loader ts-node/esm

console.log('This processes instantly restarts when a file changes.');