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?
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:
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.