Vite React Typescript Template

A simple vite react typescript starter template with husky, conventional commit, eslint, stylelint, prettier, sass, tailwindcss, material ui, tanstack routing, redux and saga, vitest and cypress

Trying this Online!

Features

This template setup will include following features.

✅	Feature	Branch Name
✅	Generate Vite + React + Typescript	feature/1/starter
✅	Husky	feature/2/husky
✅	Conventional Commit + Commitlint + Commitizen	feature/3/commitlint
✅	ESLint	feature/4/eslint
✅	StyleLint	feature/5/stylelint
✅	Prettier format	feature/6/prettier
✅	Lint Staged	feature/7/lint-staged
✅	Sass + Tailwind Css	feature/8/tailwindcss
✅	Material UI	feature/9/material-ui
✅	Tanstack Router	feature/10/tanstack-router
✅	Redux + Redux Toolkit	feature/11/react-redux
✅	Redux Saga	feature/12/react-saga
✅	Vitest + RTL	feature/13/vitest
✅	Cypress	feature/14/cypress

Installation

# For full template
npx degit R35007/vite-react-typescript#main myapp # main branch

# For starter template
npx degit R35007/vite-react-typescript#feature/1/starter myapp # feature/1/starter branch

NPM Scripts

Vite scripts

npm run start                 # start development server
npm run dev                   # start development server
npm run build                 # build production bundle to 'dist' directly
npm run preview               # start production server

Lint scripts

npm run lint:scripts          # check scripts
npm run lint:scripts:fix      # fix scripts
npm run lint:styles           # check styles
npm run lint:styles:fix       # fix styles
npm run format                # check code formatting
npm run format:fix            # fix code formatting
npm run lint:ts               # check types
npm run lint                  # check scripts, check styles, check formats and check types
npm run lint:fix              # fix scripts, fix styles, fix formats and check types
npm run lint:staged           # does npm run lint only for staged files

Test scripts

npm run test             # run test
npm run test:coverage    # run test with code coverage
npm run cy:open          # open cypress ui
npm run cy:run           # run cypress test in headless mode
npm run cy:run:e2e       # run cypress end 2 end test in headless mode
npm run cy:run:component # run cypress component test in headless mode

Report scripts

npm run lint:scripts:report   # generate eslint reports in reports/eslint.html
npm run lint:report           # generate eslint reports

Utility scripts

npm run validate              # check scripts, check styles, check formats, check types and builds the project
npm run validate:fix          # fix scripts, fix styles, fix formats, check types and builds the project
npm run validate:staged       # does npm run lint only for staged files and builds the project
npm run prepare               # create Husky hooks
npm run clean                 # removes node_modules package-lock.json .husky dist reports
npm run uninstall:husky       # uninstall husky and remove .husky folder
npm run uninstall:tailwindcss # uninstall tailwindcss and its related plugins
npm run uninstall:cypress     # uninstall cypress and its related plugins and test files
npm run commit                # cli prompt for conventional commit

License

MIT