What is Vite, and how does it work with React?

What Vite does

• Development: npm run dev starts a server, usually at localhost:5173, that serves your source files as native ES modules and updates the page instantly when you save.
• Production: npm run build bundles, minifies and splits your code into a dist folder of static files.
• Configuration: a short vite.config file, with plugins for React, Vue and others.

Starting a React project

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

Many AI app builders, including Lovable, generate Vite React projects, so this structure is common in vibe-coded apps.

Deploying a Vite app

• Run npm run build and deploy the dist folder to a static host such as Netlify, Vercel, Cloudflare Pages or GitHub Pages.
• Configure a fallback so unknown paths serve index.html. Without it, client-side routes return 404 on refresh or direct visit.
• Set environment variables at build time. Only variables prefixed VITE_ are exposed to your code, and they end up in the public bundle.

Anything in a VITE_ variable is visible to every visitor. Never put secret keys there.

SEO and link previews

A Vite React app sends an almost empty HTML file and builds the page in the browser. Google can render it, with some delay. Link preview bots for Slack, LinkedIn, WhatsApp and others, and many AI crawlers, read only the initial HTML, so they see the same title and description, or none, on every route.

• Set per-route titles and descriptions, ideally in the served HTML.
• For marketing pages that must rank and share well, consider pre-rendering, a server-rendered framework, or a separate static site.

Common problems

• Blank page after deploy: a wrong base path, or a JavaScript error visible in the console.
• 404 on refresh: missing single-page app fallback on the host.
• Changes not appearing: browser cache of old assets, usually fixed by Vite's hashed file names once caching headers are correct.

What a scan can and cannot tell you

WebAuditOS compares served HTML with the rendered page, so it shows how much of a Vite app exists only after JavaScript, checks that unknown URLs return a real 404 instead of the app shell with status 200, reports console errors, and checks titles for duplicates across routes.

It does not review your Vite config or bundle contents.

A Vite single-page app often answers every unknown URL with status 200. The soft 404 check catches that.

Short answers

Is Vite a framework? No. It is a build tool and dev server. React or Vue is the framework.

Is Vite better than Create React App? Create React App is deprecated, and Vite is a common replacement.

Can Vite do server-side rendering? It supports SSR, and frameworks built on Vite use it.

Where do I host a Vite app? Any static host, after npm run build.