React Router / Nginx returning 404 on subroute

Question

Im in a process of serving my first react app on VPS. I encounter a problem when trying to serve my spa on subroute of my server. It works seemlessy on "/" but on "/app" its returning "Unexpected Application Error 404 not found". DevTools shows that js and css is loaded and returns with code 200.

im using

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.11.2"
"typescript": "^5.0.2",
"vite": "^4.3.9"

and nginx 1.18 (ubuntu)

I want my folder structure to look like this :

/var/www/html/ index.html ==> simple html landing page
/var/www/html/app/index.html ==> react app entry point

Due to unknown reasons i have to specify locations in sites-avalible/default , because creating separete files and linking them to sites-enable doesnt work.

vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
        base: 'http://server.com/app/'
});

/etc/nginx/sites-avalible/default

server {
    listen 80 default_server;
    listen [::]:80 default_server;

     root /var/www/html;

     server_name _;

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

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

I was exprimenting with boliler plate Vite-React and problem arises when react router is added to code. But i dont have any errors in console that could point me in specific direction.

React Router / Nginx returning 404 on subroute

0 Answers0