What is a good file structure to have with Vite?

Question

I am using Vite to easily run tailwind and other npm packages in my vanilla HTML and JavaScript.
This is what I have now: Current file structure

And this is my vite.config.js

const { resolve } = require("path");
const { defineConfig } = require("vite");

module.exports = defineConfig({
 build: {
   rollupOptions: {
     input: {
       main: resolve(__dirname, "index.html"),
       about: resolve(__dirname, "about/index.html"),
     },
   },
 },
});

Does anyone know a good file structure for a multi-page app, or know improvements to my current structure?

Answer 1

Personally, I like to separate my code by how it’s called, or type. For example, images and similar media type files may go in an “assets” directory. Same with CSS (or any styling methods), in a “styles” or similar directory, and same for JS. Whereas with JS, given that I generally use 99% JS in any given project, I get super modular.

My go-to style for JS (or just code in general honestly) is:

• Utils directory for highly re-usable code (code that would be like a utility in lodash or similar utility libraries that are super general purpose, used for anything, anywhere)
• Services directory for code that makes calls to external API’s or similar data fetching.
• Components directory (more useful with React/Vue/etc., but could be useful still!
• Pages (same as above)

And so on, with structure built on how the files actually get used, OR, the file type.

That being said, I’d personally check out how React people do it commonly, then aggregate that style with how Angular organizes its code. I’ve found a sweet spot between the two.