Serving index.html from different directory in your project is problematic currently

[lubomirblazekcz]

Clear and concise description of the problem

You should be able to have index.html wherever you want, outside from the project root directory. But this is currectly very limiting, even more with the #3321 restricting changes.

Suggested solution

Maybe ability to se directory index. Options like base and root are not suatable for this, there should be an option to say where the .html files are located. eg build. src/index.html -> dist/index.html and in browser /index.html is treated as /src/index.html

So maybe adding indexDir could solve this? It would alias all paths this way, same way as this works with /public/index.html -> /index.html (which doesn't work correctly btw - #3233

I don't know about this though https://vitejs.dev/guide/build.html#multi-page-app I always found this kind of hacky, having an deditacted option (for both build and server) to select the directories where index.html are located would be better.

Additional context

npm init @vitejs/app my-vue-app -- --template vanilla

And use one of following directory structures

1

use case: I don't want to have index.html in root of my project
doable now?: no, even if you set root path as "src" and server.fsServe.root as "../"
/src/main.js path returns 403 and /favicon.svg returns 404

structure:

• public
  • favicon.svg
• src
  • index.html
  • main.js
  • style.css

2

use case: I don't want to have index.html in root of my project
doable now?: no, even if you set root path as "src" and server.fsServe.root as "../"
/src/main.js path returns 403 and /favicon.svg works, only because it is inside root dir

structure:

• app
  • index.html
  • favicon.svg
• src
  • main.js
  • style.css

3

use case: I don't want to use Vite primary for build, but want to use the Server API for serving static files
doable now?: yes but with problems, you can still use default root path but page reload is not working correctly (#3233) if you use /index.html rather than /public/index.html

structure:

• public
  • index.html
  • favicon.svg
• src
  • main.js
  • style.css

[lubomirblazekcz]

I managed to resolve this partly with writing a middleware plugin. Took me a while to find out that this is even possible to do. You should add how to write middleware to guide, or maybe better add middleware option to config as it is in https://browsersync.io/docs/options#option-middleware and https://modern-web.dev/docs/dev-server/middleware/#dev-server-middleware

This solves 404 when index.html is not at root, and you can use /page rather than /page.html or /src/page.html requests

const middleware = () => {
    return {
        name: 'middleware',
        apply: 'serve',
        configureServer(viteDevServer) {
            return () => {
                viteDevServer.middlewares.use(async (req, res, next) => {
                    if (!req.originalUrl.endsWith(".html") && req.originalUrl !== "/") {
                        req.url = `/src` + req.originalUrl + ".html";
                    } else if (req.url === "/index.html") {
                        req.url = `/src` + req.url;
                    }

                    next();
                });
            };
        }
    }
}

So to anyone wondering how to have currently your index.html in different directories.

This solves case 1 and 2 partly, I didn't figure out how to change index.html entry point for build (changing main to different directory as explained here https://vitejs.dev/guide/build.html#multi-page-app didn't work, so I expect this to be a bug)

Case 3 is resolved with this middleware almost completely (just change /src to /public in the middleware script), only thing that is kind of annoying is warning files in the public directory are served at the root path still keeps poping up. But everything works as expected even the #3233 bug is not present, because the files are served directly from full public path in the middleware.

[lubomirblazekcz]

ok closing this, figures I am just stupid and I am doing this wrong the whole time. Sorry for opening kind of unnecessary issues #3233 #3358
I will read the docs better next time or ask at discussions

If anyone wonders how to configure this properly then this is my config

// vite.config.js
const middleware = () => {
    return {
        name: 'middleware',
        apply: 'serve',
        configureServer(viteDevServer) {
            return () => {
                viteDevServer.middlewares.use(async (req, res, next) => {
                    if (!req.originalUrl.endsWith(".html") && req.originalUrl !== "/") {
                        req.url = `/templates/` + req.originalUrl + ".html";
                    } else if (req.url === "/index.html") {
                        req.url = `/templates/` + req.url;
                    }

                    next();
                });
            };
        }
    }
}

export default {
    plugins: [middleware()],
    root: "src",
    publicDir: '../public',
    resolve: {
        alias: { '/src': resolve(process.cwd(), 'src') }
    },
    build: {
        outDir: '../dist',
    }
}

this accounts for structure like this

• dist
  • assets
  • favicon.svg
  • *.html
• public
  • favicon.svg
• src
  • scripts
  • styles
  • templates