Skip to content

⚛️ 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

License

Notifications You must be signed in to change notification settings

R35007/vite-react-typescript

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

61 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vite React Typescript Template

Build Lints Tests Cypress

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

image

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