How to Deploy a Vite React App to a Hosting Server

If you built your React website with Vite, deployment is straightforward once you understand what Vite produces during the build process.

The basic workflow is: npm run build, create the production files, upload the production output, configure hosting, connect your domain. The exact deployment process depends on your hosting provider, but the production build is the starting point.

Step 1: Open Your Vite Project

Open the project folder in your terminal. Make sure dependencies are installed. If you have not installed them yet, use your project's normal package manager. For npm projects, this is commonly npm install.

Step 2: Create the Production Build

Run npm run build. Vite creates a production-ready output directory. By default, Vite commonly uses dist as the output directory. Check your vite.config if your project uses a custom build configuration.

Step 3: Inspect the dist Folder

After the build finishes, look inside dist. You should see the files required to serve your application. Do not upload your entire development project when your hosting provider expects the production build. The purpose of the build is to transform your source project into deployable assets.

Step 4: Upload the Production Files

Upload the contents required by your hosting provider. Pay attention to the directory structure. Your hosting server needs to be able to find the application's entry HTML file at the expected location.

Step 5: Open the Deployed Website

Visit the temporary hosting URL or configured domain. Check the homepage, navigation, images, CSS, JavaScript, browser console, and network requests. If the page loads but assets are missing, inspect the actual asset URLs.

Step 6: Check the Vite Base Path

If your website is deployed at the root of a domain, https://example.com/, your Vite configuration can normally use the root deployment setup. If you deploy inside a subdirectory such as https://example.com/my-app/, your Vite base configuration may need to match that path. An incorrect base path can cause JavaScript, CSS or images to return 404.

Step 7: Handle React Router

If your application uses React Router, direct navigation to a route can require hosting fallback configuration. For example, /dashboard may work after clicking a link but return 404 when opened directly. The hosting server needs to serve the application's entry HTML so React Router can handle the URL.

Step 8: Connect Your Custom Domain

Once the deployment works, connect your domain through your hosting provider. Update DNS using the records provided by your hosting service. Then wait for DNS changes to take effect.

Step 9: Check HTTPS

After the domain points to your deployment, verify that https://yourdomain.com loads correctly. Check your hosting dashboard if the SSL certificate is not active yet.

Common Vite Deployment Problems

Blank Page

Check the browser console and the generated asset paths.

JavaScript Returns 404

Check the Vite base configuration and deployment path.

Images Are Missing

Check asset imports and the final URLs generated in the production build.

Routes Return 404

Check your hosting provider's SPA fallback configuration.

The Site Works Locally but Not Online

The production environment can expose incorrect paths, missing assets, case-sensitive filenames, or configuration assumptions that did not appear during local development.

FAQ