This question was updated on Nov. 20, see comments below for context
I'm building a multi-page app using HTML/Javascript and Vite. Everything is working perfectly in development and production servers -- until I need to access pages that require the user to be logged in. I'm able to navigate to the login page and successfully login...but then when I try to route the logged in user to the home.html page, I encounter a problem.
When add home.html to my config file, the build breaks. I get an error saying:
[vite:build-html] EISDIR: illegal operation on a directory, read file: /Users/mickeyvershbow/Documents/coding/vite-projects/ekkobar-app/vite-web-app/pages/home/home.html error during build: Error: EISDIR: illegal operation on a directory
It seems like there must something wrong with the way I'm specifying the entry point in my config file, but I don't know how to address this and can't find any info on this in the vite docs. Is there a plugin I need to use? Some middleware?
File structure:
├── package.json
├── vite.config.js
├── index.html
├── main.js
├── styles.css
├── pages
│ ├── login
│ │ ├── login.html
│ │ ├── login.js
│ ├── home
│ │ ├── home.html **requires user to be logged in
│ │ ├── home.js
│ │
vite.config.js
const { resolve } = require("path");
const { defineConfig } = require("vite");
module.exports = defineConfig({
build: {
rollupOptions: {
input: {
main: resolve(__dirname, "index.html"),
login: resolve(__dirname, "pages/login/login.html"),
home: resolve(__dirname, "pages/home/home.html"),
},
},
},
});
The folder structure you have shared in the question shows that your login and home pages are present inside you pages folder. Hence you will have to provide valid path to your vite to include the files present in the folder.
Your folder path now becomes "pages/login/index.html" and "pages/home/index.html"
Please find the updated vite config below.
const { resolve } = require("path");
const { defineConfig } = require("vite");
module.exports = defineConfig({
build: {
rollupOptions: {
input: {
main: resolve(__dirname, "index.html"),
login: resolve(__dirname, "pages/login/index.html"),
home: resolve(__dirname, "pages/home/index.html"),
},
},
},
});