ViteX

A simple, DX-focused Vite + ReactJS + TailwindCSS template to hit the ground running

Features

• Minimal setup needed (especially for smaller projects)
• Absolute imports so you can do things like

  • import { DarkModeSwitcher } from 'components';

• Code-formatting and linting out of the box on pre-commit
• Automatic import sorting via this prettier plugin
• Test runner vitest, alongside react-testing-library
• Styling via tailwindcss
• Pre-built dark mode logic and <DarkModeSwitcher /> component
• Easy icons via unplugin-icons

Tools/Packages

• pnpm
• vite
• react
• typescript
• eslint - using Kent C Dodd's eslint config
• prettier
• husky
• lint-staged
• tailwindcss
• vitest - test runner for Vite
• react-testing-library
• unplugin-icons

Usage

Make sure pnpm is installed.

# clones the template
$ pnpm dlx degit bkchu/vite-x <custom-name>

# go into the project folder
$ cd <custom-name>

# this is necessary to install `husky`
$ git init

# similar to `npm install` or `yarn install`
$ pnpm i

# start server
$ pnpm dev