How to serve the vite Application on nginx

[amgowda42]

Can anybody say how to serve the vite application properly on nginx.

[ghostkillerr]

For a client-rendered SPA hosted at /, build it with npm run build, then serve the contents of dist as static files:

server {
    listen 80;
    server_name example.com;
    root /var/www/my-app/dist;
    index index.html;

    location /assets/ {
        try_files $uri =404;
    }
    location / {
        try_files $uri $uri/ /index.html;
    }
}

The fallback allows refreshing client-side routes. Replace the hostname/path and configure HTTPS for production. If you host under /app/, align Vite's base, the router basename and nginx's path mapping. An SSR application needs its server runtime instead of this SPA-only configuration. vite preview is for local preview, not a production server.

References: https://vite.dev/guide/static-deploy.html and https://nginx.org/en/docs/http/ngx_http_core_module.html#try_files

Prepared with AI assistance and checked against the linked documentation. I have not reproduced your original project locally.

[Icaro0310]

Build it first (npm run build), then serve the dist/ folder as static files. The only nginx-specific part is the try_files fallback so client-side routes don't 404 on refresh.

server {
 listen 80;
 root /var/www/myapp/dist;
 index index.html;

 location / {
 try_files $uri $uri/ /index.html;
 }
}

If the app lives under a subpath (example.com/app/), set base: '/app/' in vite.config.ts before building or your asset URLs break. And if you were actually trying to put nginx in front of the dev server instead, proxy_pass to http://localhost:5173 and add the Upgrade/Connection headers or HMR websockets won't connect.

—
More of my work lives here: github.com/Icaro0310 · Website: icaro0310.github.io