React Project Starter (Vite)

Before you start

Check Node is installed and recent (18+, ideally 20+):

node --version
npm --version

Scaffold the project

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

That's it — Vite prints a local URL (usually http://localhost:5173). Open it and you have hot-reloading React.

Other templates if you need them: react (plain JS), vue-ts, svelte-ts, vanilla-ts.

What you just got

• src/main.tsx — entry point; mounts <App /> into index.html
• src/App.tsx — your root component; start editing here
• index.html — the actual page Vite serves (unlike CRA, it lives at the root)
• vite.config.ts — build config; mostly leave alone until you need proxies or aliases
• public/ — static files served as-is

The commands you'll forget

npm run dev        # dev server with hot reload
npm run build      # production build into dist/
npm run preview    # serve the production build locally

When to use Next.js instead

If you need routing across many pages, server-side rendering, or SEO (like this site), scaffold Next.js instead:

npx create-next-app@latest my-app

Vite is best for single-page apps, dashboards, and experiments; Next.js for content sites and full-stack apps.

Common gotchas

• Blank page after build: check the browser console — usually a wrong base path in vite.config.ts when deploying to a subfolder.
• Port already in use: npm run dev -- --port 3001.
• "command not found: npm create": your Node is too old — reinstall the LTS from nodejs.org.