'Vite multi-page app not working for the extra pages

I have a file structure like so app(main) and dashboard(secondary) being the different pages but when trying to open the secondary app at /

enter image description here

vite.config.js

import * as path from "path";
import { defineConfig } from "vite";
import react from "vite-preset-react";
import svgr from 'vite-plugin-svgr'
import rollupReplace from "@rollup/plugin-replace";

const outDir = path.resolve(__dirname, 'build')


export default defineConfig({
  plugins: [
    rollupReplace({
      preventAssignment: true,
      values: {
        __DEV__: JSON.stringify(true),
        "process.env.NODE_ENV": JSON.stringify("development")
      }
    }),
    react(),
    svgr()
  ],
  root: 'app',
  build: {
    root: outDir,
    rollupOptions: {
      input: {
        app: path.resolve(__dirname, "app/index.html"),
        dashboard: path.resolve(__dirname, "dashboard/index.html"),
      }
    }
  },
});

and the server.js file is just an empty file not used



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source