react-ts-vite-template

React + TypeScript + Vite Boilerplate

A frontend boilerplate for single-page applications.

Requirements

• Node.js 20+

Installed packages

• Vite 5
• React 18
• TypeScript
• React Router 6
• Linting, Formatting & Git hook
  • ESLint
  • Prettier
  • Husky
  • Lint-Staged
• UI
  • styled-components
• Translation: i18next, react-i18next, i18next-browser-languagedetector
• Testing
  • Vitest
  • React Testing Library: @testing-library/react, @testing-library/jest-dom, @testing-library/user-event

Feel free to install or remove packages as you prefer. Make sure to update packages to the latest version manually when needed.

How to use

Initialize

Remove the .git folder

rm -rf .git

Init a new git repository

git init

Install dependencies

nvm use
npm install

Remove bin in root directory.

Cleanup package.json with new configurations

{
  "name": "your-app-name",
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    ...
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  },
  "lint-staged": {
    ...
  },
}

Start dev server

npm run dev

Dev server will start automatically at http://localhost:8080.

Preview production build

npm run build
npm run preview

Run testing

npm run test

File Structure

Folders/Files

Path	Description
dist/	Built files
public/	Static files that will be copied as-is to /dist after build process
src/	Sources
src/assets/	Static assets
src/assets/translation/{lang}.json	Translation json files
src/examples/	Test examples
src/App.tsx	App component with Providers
src/i18n.ts	i18next init file
src/index.css	Root css
src/main.tsx	Root component
src/test-setup.ts	Testing set up file
src/vite-env.d.ts	TypeScript global type definitions

Project Configuration

File/Folder Name	Description
.husky	Husky configuration folder
.editorconfig	Text editor configuration file
.eslintrc.cjs	ESLint configuration file
.gitignore	Git ignored file list
.npmrc	NPM configuration file
.nvmrc	NVM configuration file
.prettierrc.cjs	Prettier configuration file
tsconfig.json	TypeScript configuration file
tsconfig.node.json	TypeScript configuration file for vite.config.ts
vite.config.ts	Vite configuration file