To create and deploy a React app with Vite, scaffold it from Vite’s React template, run the development server, build the project, then publish the generated dist directory to a static host. If the site will live under a URL subpath, configure Vite’s base before building. The built app is static output; vite preview is for local inspection, not production hosting.
Create a React project with Vite
Vite combines a development server with hot module replacement (HMR) for fast feedback, and a production bundler that generates static assets. Start with the official React template:
-
In a terminal, run
npm create vite@latest my-react-app -- --template react. Replacemy-react-appwith your preferred project directory. -
Enter the project and install its dependencies:
cd my-react-app, thennpm install.Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.#1 Best Overall
-
Start the local development server with
npm run dev. Open the local address printed in the terminal. Changes to the app are reflected through Vite’s development workflow and HMR.
The template defines npm scripts in package.json; in a typical project, npm run dev starts Vite, npm run build creates the production build, and npm run preview serves that build locally for inspection.
Build and check the production app
When you are ready to publish, run npm run build from the project directory. This normally runs vite build. Vite uses the project’s root index.html as its entry point and writes optimized static assets to dist by default. See Vite’s Building for Production guide.
To check the output locally, run npm run preview and open the address shown in the terminal. Vite describes vite preview as a way to inspect a production build locally; it is not intended to act as your production server. See the Static Site Deployment guide.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Deploy the dist directory to static hosting
Vite’s deployment guide assumes the default dist output. After building, connect your repository to a static hosting provider or upload the generated files, following that provider’s current build and routing instructions. If the provider builds from your repository, its build command is typically npm run build, with dist as the output directory.
Check the host’s settings for single-page application routing. A client-side React app may need the host to serve index.html for app routes that do not correspond to physical files; without the appropriate fallback, the home page may work while direct visits or refreshes on nested routes return a not-found response. Provider-specific routing configuration varies, so follow the host’s current documentation.
Hosting configuration can also affect custom domains and TLS, preview deployments, cache invalidation, edge delivery, and environment variables supplied during the build. Those are host-specific capabilities and settings rather than Vite requirements.
Set Vite’s base path for a subpath deployment
If your app is served below a domain’s root—for example, at https://example.com/my-app/ rather than https://example.com/—set Vite’s base to the public path before building. Otherwise, generated asset URLs may point to the wrong location.
Free tools Windows power users keep installed
One-click scans. No signup required.
Best Value
For example, configure a project published at /my-app/ in vite.config.js:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
base: '/my-app/',
})Alternatively, specify the base path for a single build with vite build --base=/my-app/. Vite rewrites JavaScript, CSS, HTML, and imported asset URLs for the configured public path. Use the actual path at which the host serves the app, including the leading and trailing slash. Details are in Vite’s build documentation.
Use environment variables without exposing secrets
Vite loads .env, .env.local, .env.[mode], and .env.[mode].local files. Mode-specific files take precedence over generic ones. A normal vite build uses production mode; to build in a different mode, such as staging, run vite build --mode staging, which loads the corresponding .env.staging file.
In browser code, access client-exposed values through import.meta.env. Variables prefixed with VITE_ are included in the client bundle at build time, so anyone who can access the app can inspect them. They are suitable for public configuration, not API keys, passwords, or other secrets. Keep secret operations on a backend or in a serverless or edge function. Read Vite’s Env Variables and Modes guide for details.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Know the default production browser target
Vite’s documented default production targets in the current major are Chrome 111+, Edge 111+, Firefox 114+, and Safari 16.4+. You can change the target with the build.target option, but lowering it still depends on minimum native ES modules and import.meta support. Check the build documentation and your users’ browser requirements before changing the target.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
