multiple HTML files about vite-vanilla-js-template

[Barata-Ribeiro]

Hey there,
For that, you have a few options.
The first follows Vite.js documentation for multi-page app.

Another way is something I did in my Utility App, where the HTML files are served in the public folder. I created HTML files as if they were components that, through a JavaScript router, are rendered lazyly. It's a bit messy despite trying my best to document the classes.

Also, one method that works well, if neither is enough, is by using the following setup in the vite.config.js:

rollupOptions: {
      input: {
        main: new URL('./index.html', import.meta.url).pathname,
        about: new URL('./src/pages/about.html', import.meta.url).pathname,
        contact: new URL('./src/pages/contact.html', import.meta.url).pathname,
      },
    },

And then, in the dist folder, you'll have something like:

dist/
├── assets/
│   ├── main-HRWRAZFR.css
│   └── main-lAQRPE8r.js
├── src/
│   └── pages/
│       ├── about.html
│       └── contact.html
├── index.html
├── screenshot.png
└── vite.svg

I haven't tested this last method with a deployment, but it was built successfully and worked in the preview.

And if you need an 'automated' way of doing it, you can use a function like this in the Vite config:

/**
 * Retrieves the entry files for HTML pages within a directory.
 *
 * @param {string} directory - The source directory to traverse.
 * @returns {Object} - An object containing the entry files, where the key is the name of the file and the value is the file path.
 */
function getEntryFiles(directory) {
  const entry = {};

  function traverseDir(currentDir) {
    const files = fs.readdirSync(currentDir);

    files.forEach((file) => {
      const filePath = path.join(currentDir, file);
      const isDirectory = fs.statSync(filePath).isDirectory();

      if (isDirectory) {
        traverseDir(filePath);
      } else if (path.extname(file) === '.html' && file !== 'index.html') {
        const name = path.relative(directory, filePath).replace(/\..*$/, '');
        entry[name] = new URL(`./${filePath}`, import.meta.url).pathname;
      }
    });
  }

  traverseDir(directory);

  return entry;
}

Then, I put it in a variable:
const entryFiles = getEntryFiles('./src/pages');

And spread it in the input:

rollupOptions: {
      input: {
        main: new URL('./index.html', import.meta.url).pathname,
        ...entryFiles,
      },
    },

There are probably more efficient ways to do it, but I hope these will help you. As a starting point.