[Help]: How can I setup vite config with nginx to serve project at /app

[iserioton]

Describe the bug

I have a domain with the following structure:

1. https://example.com points to a different project located at /var/www/html/app-web.
2. https://example.com/app should serve my Vite-built React app. The build is located at /var/www/html/myapp/dist.
3. https://example.com/api which is pointing to the nodejs app. This is working fine.

Here is the configuration I have in my vite.config.js:

export default defineConfig({
  base: '/app',
  build: {
    manifest: true, // For integration with Nginx
  },
});

And here is my Nginx configuration:

server {
    server_name www.example.com;

    # Vite React app
    location /app {
        alias /var/www/html/myapp/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # Proxy to Node.js API
    location /api {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    # Root HTML files
    location / {
        root /var/www/html/app-web;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

The app generally works, but I am facing some issues:

1. When navigating directly to a route like /app/login(react routes), Nginx redirects it to the root / and serves content from /var/www/html/app-web instead of my Vite app.
2. Assets and sub-path routing (/app/...) are sometimes mismatched due to the way base: '/app' is handled.

What’s the best way to configure Nginx and Vite so that:

• The Vite app is fully isolated under /app.
• Does Nginx correctly handle all routes (/app/...) and assets?

Any help or guidance is appreciated!

Reproduction

www.example.com

Steps to reproduce

No response

System Info

Ubuntu 24.04.1 LTS

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[iserioton]

The issue was related to my Nginx configuration. Since I was using alias to serve the Vite React build, Nginx was loading the default index.html. To resolve this, I explicitly specified /app/index.html in the configuration. Here's the updated location block:

# Vite React app
    location /app {
        alias /var/www/html/myapp/dist/;
        index index.html;
        try_files $uri /app/index.html;
    }

This ensures the correct fallback behavior for routes under /app.