Deploy a React (Vite) app on Hostinger shared hosting

When shared hosting is enough

A React app built with Vite is just HTML, JavaScript and CSS once it's built. There's no server code to run, so any Hostinger web hosting plan can serve it, and you can skip the VPS entirely.

The same steps work 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 instead.

• Need SSR? Deploy Next.js on a VPS →

Step 1 — Build

Environment variables prefixed with `VITE_` are baked into the bundle at build time. Set production values before building, and never put secrets in them; anyone can read them in the browser.

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

Step 2 — Add the .htaccess before you upload

With React Router, a link like `/dashboard` works when you click it but returns a 404 when you refresh, because the server looks for a real `/dashboard` file. This rule sends every unknown path to `index.html` so the router can handle it.

Put the file in your project's `public` folder. Vite copies everything in `public` into `dist`, so it's included in every build automatically.

<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 the contents of `dist`, not the `dist` folder itself. `index.html` must sit directly inside `public_html`.

• •File Manager: zip the contents of dist, open hPanel → Files → File Manager → public_html, upload the zip, then 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.

Deploying to a subfolder

If the app lives at `example.com/app/` rather than the root, tell Vite and the router about the base path, and adjust the .htaccess to match.

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

export default defineConfig({
  plugins: [react()],
  base: "/app/",
});

<BrowserRouter basename="/app">

Step 4 — HTTPS and a quick check

Hostinger includes a free SSL certificate on web hosting plans. Make sure it's active under the website's Security → SSL section in hPanel; it's usually installed automatically within a few minutes of adding the domain.

Then open the site, click into a nested route and refresh. If you get the page and not a 404, the rewrite is working.