Host a vite build online

Vite outputs files; StaticHost serves files

Vite is a build tool. StaticHost is a file host. The handshake is: run Vite’s production build yourself, upload dist, verify on HTTPS preview. There is no “Vite integration” that runs vite build remotely, and no SPA fallback for history-mode routers. nginx remains try_files $uri $uri/ =404.

Project settings that matter

base in vite.config.ts / vite.config.js must match the URL path where the site is hosted. For a site at the domain root:

import { defineConfig } from 'vite'

export default defineConfig({
  base: '/',
  build: {
    outDir: 'dist',
    sourcemap: false,
  },
})

If base is wrong (for example leftover '/my-repo/' from GitHub Pages docs), the preview HTML loads and every /assets/*.js returns 404.

Env prefixes. Only variables prefixed with VITE_ are exposed to client code via import.meta.env. Set them when you build:

export VITE_API_URL=https://api.example.com
npm run build

Or use .env.production locally/CI—never rely on StaticHost to inject env at request time.

publicDir. Files in public/ copy to dist/ as-is. Put favicon.ico and robots.txt there.

Build commands

npm ci
npm run build
# equivalent: npx vite build
ls dist

Expected shape:

dist/
  index.html
  assets/index-….js
  assets/index-….css

Zip contents:

cd dist && zip -r ../vite-site.zip .

Upload vite-site.zip to StaticHost, or push these files to a GitHub branch the host deploys. The host will not run npm ci. Nested zip issues: zip guide. Broader dist notes: host a dist folder.

Routing with Vite-powered SPAs

If you use vue-router or React Router in history mode, deep links 404 on StaticHost. Options:

1. Switch to createWebHashHistory() / HashRouter.
2. Pre-render routes to HTML files.
3. Host elsewhere if you require fallback rewrites.

Do not invent _redirects hoping nginx will honor them as Netlify does. See React, Vue, SPA.

Multi-page Vite apps (build.rollupOptions.input with several HTML entries) fit naturally: each HTML file is a real path.

Preview and production

Open StaticHost’s HTTPS preview immediately after deploy. Test:

• Hard reload on /
• Direct navigation to a fingerprinted asset URL
• A client route (expect 404 unless hash/SSG)
• API calls using import.meta.env.VITE_* values baked into the bundle

Roll back via deploy history if needed. Attach a custom domain after DNS verifies; then certificates issue. Rebuild if you must change VITE_ values for production versus preview—consider Pro staging ($30/mo, 3 sites, 10 GB) for a second site with staging env baked in.

CI sketch (build elsewhere)

# conceptual GitHub Actions fragment
- run: npm ci
- run: npm run build
- run: cd dist && zip -r ../artifact.zip .
# upload artifact.zip to StaticHost or commit to deploy branch

StaticHost’s role begins after dist exists.

Plans and non-features

Starter $9 (1 site, 2 GB), Pro $30 (3 sites, 10 GB, staging), Scale $65 (10 sites, 30 GB), Business $130 (30 sites, 100 GB, teams). Short trial ~1 day. No forever-free, no cPanel, no email, no built-in CDN, no remote Vite.

WordPress/PHP needs a different host.

Worked example: Vue 3 + Vite multipage brochure

You configure Rollup inputs for index.html and pricing.html. No client router.

// vite.config.js excerpt
import { resolve } from 'path'
export default defineConfig({
  base: '/',
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        pricing: resolve(__dirname, 'pricing.html'),
      },
    },
  },
})

export VITE_CONTACT_ENDPOINT=https://forms.example.com/abc
npm ci
npm run build
ls dist
# expect index.html, pricing.html, assets/*
cd dist && zip -r ../brochure.zip .

Deploy to StaticHost. On HTTPS preview, open / and /pricing.html (or /pricing if you also emit a directory style—be consistent). Both should 200 without SPA magic. Add the custom domain only after that. If you later add vue-router in history mode, revisit the SPA guide before launch—=404 will not rewrite.

Failure table: Vite → StaticHost

Extra procedure: local vs StaticHost parity check

1. Run npm run build (not only vite dev server).
2. Optionally vite preview for a quick local static check—then still deploy.
3. Upload dist to StaticHost; open HTTPS preview.
4. Diff behavior: asset paths, env values, router refresh.
5. Fix config; rebuild; redeploy; use rollback if a “fix” worsens prod.
6. DNS → verify → cert when preview matches intent.

Git-oriented teams: git deploy a static site. StaticHost will not run npm/Hugo, will not provide email/cPanel/CDN product/forever-free, and will not soften nginx for SPAs. Vite’s job ends at dist; the host’s job begins there.

Library mode and partial deploys you should avoid

Vite can build libraries (build.lib) as well as apps. StaticHost is for sites: ship index.html plus assets visitors can request. Uploading only a .js library build without an HTML entry leaves the site root empty. Likewise, do not deploy src/ because “Vite will compile on the server”—it will not.

If you maintain a monorepo, have CI cd into the app package, run npm ci && npm run build, and publish that package’s dist only. Root-level READMEs and package charts do not belong in the public tree. Fingerprinted assets are a feature: after deploy, hard-refresh and confirm the new hash appears in Network; if an old service worker pins yesterday’s shell, bump or unregister it on the HTTPS origin.

For teams splitting preview vs production API hosts, bake VITE_* per environment and keep Pro staging as a second StaticHost site when one bundle cannot serve both truths. Custom domains still follow preview → DNS verify → certificate; routing physics remain =404 regardless of how nice Vite’s dev server felt.

FAQ

Can I use Vite SSR plugins on StaticHost?

No. SSR needs a Node server. Use Vite as an SSG/SPA bundler only here.

Where do I set base for a custom domain at root?

Keep base: '/'. Custom domains on StaticHost sites are root-hosted in the usual setup.

Why do images from src/assets work but public images differ?

Imported assets get hashed URLs via the bundler; public files keep stable names at the dist root. Both are valid—use deliberately.

Does vite preview equal StaticHost?

vite preview is a local static server for checking builds. It may be more forgiving depending on config. Always validate on StaticHost preview before launch.

Can I enable sourcemaps in production?

Yes via build.sourcemap: true, but they publish your source shape. Prefer off unless debugging a specific release.