React with Vite (TypeScript) project structure

React with Vite (TypeScript) project structure

Explorer

  • .huskynew
  • commit-msgnew
  • pre-commitnew
  • .storybooknew
  • main.tsnew
  • preview.tsxnew
  • .vscodenew
  • extensions.jsonnew
  • launch.jsonnew
  • settings.jsonnew
  • coverage…new, not committed
  • dist…new, not committed
  • node_modules…, not committed
  • public
  • favicon.svg
  • icons.svg
  • mockServiceWorker.jsnew
  • robots.txtnew
  • src
  • App.css
  • App.tsx
  • index.css
  • main.tsx
  • vite-env.d.tsnew
  • storybook-static…new, not committed
  • .editorconfig
  • .env.examplenew
  • .env.localnew, not committed
  • .gitignore
  • .nvmrcnew
  • .oxlintrc.json
  • .prettierrc.jsonnew
  • AGENTS.mdnew
  • CLAUDE.mdnew
  • README.md
  • commitlint.config.jsnew
  • docker-compose.ymlnew
  • index.html
  • package-lock.json
  • package.json
  • tsconfig.app.json
  • tsconfig.json
  • tsconfig.node.json
  • vite.config.ts
  1. # Create the app from the official React and TypeScript template

    npm create vite@latest my-app -- --template react-ts
  2. # Install and start the dev server on localhost:5173

    cd my-app && npm install && npm run dev
  3. # Add routing, server state, client state, forms and validation

    npm install react-router @tanstack/react-query zustand react-hook-form @hookform/resolvers zod react-error-boundary
  4. # Add styling with Tailwind

    npm install tailwindcss @tailwindcss/vite
  5. # Add unit and component tests

    npm install -D vitest @vitest/coverage-v8 jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom @testing-library/user-event msw
  6. # Add Storybook and git hooks

    npm create storybook@latest && npm install -D husky lint-staged prettier && npx husky init
  7. # Add end-to-end tests

    npm init playwright@latest
  8. # Add error tracking

    npm install @sentry/react && npm install -D @sentry/vite-plugin