Skip to content
savemores
Menu
Get 20% off

Website tutorials

Host a React (Vite) App on Hostinger Shared Hosting, No VPS Required

Deploy a React Vite app on Hostinger shared hosting: build it, upload dist to public_html, fix 404s on refresh with one .htaccess file, and add caching and SSL.

By · 20+ years in tech

Published · 6 min read

The short answer

  • 01A React app built with Vite is static HTML, JavaScript and CSS, so any Hostinger web hosting plan can serve it without a VPS.
  • 02Upload the contents of dist, not the folder itself; index.html must sit directly inside public_html.
  • 03An .htaccess file in Vite's public folder rewrites unknown paths to index.html, which fixes React Router's 404 on refresh.
  • 04VITE_ environment variables are baked into the bundle at build time and readable by anyone, so never put secrets in them.
  • 05The same steps work for Vue, Svelte, Astro, plain HTML and Next.js with output: 'export'.

Why shared hosting is enough here

Once Vite has built it, a React app is just HTML, JavaScript and CSS. There is no server code to run, so any Hostinger web hosting plan can serve it. Paying for a VPS to host static files is money spent on nothing.

The same process works for Vue, Svelte, Astro, plain HTML and Next.js with output: 'export'. If your app needs server rendering, API routes or a database, you need a VPS or a plan with managed Node.js; the Next.js VPS guide covers that path.

Step 1: build for production

Anything prefixed VITE_ is written into the bundle at build time. Set the production values before you build, and never put a secret in one, because anyone can read it in the browser.

bash
npm ci
npm run build
# Output is in ./dist

Step 2: add .htaccess before the build ships

React Router links like /dashboard work when clicked but return a 404 on refresh, because Apache goes looking for a real /dashboard file. The rewrite below sends every unknown path to index.html so the router can take over. It also forces HTTPS and sets cache headers: a year for Vite's hashed assets, and no-cache for index.html so new releases are picked up.

Put the file in your project's public folder. Vite copies everything in public into dist, so it ships with every build without you thinking about it.

public/.htaccess
apache
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /

  # Force HTTPS
  RewriteCond %{HTTPS} !=on
  RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

  # Send unknown paths to the SPA
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

# Vite's hashed assets never change, so cache them for a year
<IfModule mod_headers.c>
  <FilesMatch "\.(js|css|woff2|svg|png|jpg|webp|avif)$">
    Header set Cache-Control "public, max-age=31536000, immutable"
  </FilesMatch>
  <FilesMatch "index\.html$">
    Header set Cache-Control "no-cache"
  </FilesMatch>
</IfModule>

Step 3: upload to public_html

Upload what is inside dist, not the dist folder. index.html has to sit directly in public_html. Pick whichever method suits you; if hPanel is new to you, the hPanel tour shows where everything lives.

  • File Manager: zip the contents of dist, open hPanel, go to Files, then File Manager, then public_html. Upload the zip, right-click and extract. Delete the default index.php or default.php if there is one.
  • FTP: create an FTP account in hPanel, connect with FileZilla, and drag the contents of dist into public_html.
  • Automated: have GitHub Actions build the app and upload dist over FTP on every push, so you never upload by hand.

Serving from a subfolder instead of the root

If the app lives at example.com/app/, tell both Vite and the router about the base path, then adjust the .htaccess to match: change RewriteBase / to RewriteBase /app/, and the last rule to RewriteRule . /app/index.html [L].

vite.config.ts
ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  base: "/app/",
});
React Router
tsx
<BrowserRouter basename="/app">

Step 4: confirm SSL, then verify the deploy

Hostinger includes a free SSL certificate on web hosting plans. Check it is active under the website's Security, then SSL section in hPanel; it is normally installed automatically within a few minutes of adding the domain.

  • Blank page after upload: the asset paths are wrong, almost always because the app is not at the domain root. Set base in vite.config.ts and rebuild. 404s on /assets/ files in the console confirm it.
  • 404 when refreshing a route: .htaccess did not make it into public_html. Check for it with File Manager's hidden-files option.
  • The old version keeps appearing: you uploaded the dist folder itself, so the new index.html is in public_html/dist rather than public_html.
  1. 1Open the site over https:// and confirm the padlock.
  2. 2Click into a nested route, then refresh the page. You should see the page, not a 404.
  3. 3Open the browser console and check that no files under /assets/ return 404.
  4. 4Deploy a small change and reload. Because index.html is set to no-cache, the new version should appear without clearing your cache.

Questions people ask

Which Hostinger plan should I use for a React app?

Single or Premium web hosting is plenty for one app, because it only serves static files. Premium lets you host more sites and includes a free domain on longer terms.

Why is my React app a blank page after uploading?

The asset paths are usually wrong. If the app is not at the domain root, set base in vite.config.ts and rebuild; 404 errors on /assets/ files in the browser console confirm the cause.

Can I run a Node backend alongside the React frontend?

The frontend can live on shared hosting, but the Node API needs a VPS or a plan with managed Node.js. A common split is the React build on web hosting and the API on a small VPS at api.example.com.

Does WEBHOST2026 work on web hosting?

Yes. The links on this site apply WEBHOST2026 to web hosting plans for an extra 20% off eligible terms.

Independent site, not Hostinger. Buy through my links and Hostinger pays me a referral fee; your price is the same or lower. How that works.