Folder Structure for Modern Web Applications

It is critical to create a maintainable folder structure while developing web apps, having the right files in the correct folder helps organize your code and makes other developers have an idea of how the architecture of your web application is or will be during development. In this post, I am going to explain some folder names when building your modern web project.

Maintaining a well-organized folder structure is crucial when developing web applications, even though it may not be the first thing that comes to mind when working alone or with few resources. If not, you run the risk of coming across as unprofessional.

Some Tips In Designing Your Folder Structure

• Understand the purpose of your web project: In order to figure out how to organize your web project, you will need to establish a good understanding of what you have, depending on how many assets you are trying to organize and the features in your web applications.
• Use proper naming convention for your folders and files, they should be descriptive of the purpose in your web application.

Folder Structures and their explanation

Assets
The assets folder contains all images, icons, css files, font files, etc. that will be used in your web application. Custom images, icons, paid fonts are being placed inside this folder.

Context
When using React Js as your preferred frontend ui library, the context folder stores all your react context files that are used across components and multiple pages.

Components
The components folder holds the UI for your application. It contains all our UI components like navbar, footer, buttons, modals, cards, etc.

Composables
In the context of Vue applications, a "composable" is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic.

Data
The data folder is used for storing text data which will be used in different sections and pages as JSON files. Doing this will enable updating of information easier.

Features
This folder contains individual folder feature for each page (authentication, theme, modals). For example each page might have a modal feature.

Hooks
Hooks are functions that let you “hook into” React state and lifecycle features from function components. Also we can create custom hooks whose name starts with 'use' and can be used to call other hooks.

Layouts
When defining the general look and feel of the web page, the Layouts folder comes in handy. It is used to place layout-based components such as the sidebar, navbar, and footer. If your web application has many layouts, this folder is a fantastic place to save them.

Modules
Modules folder handles specific tasks in your application.

Pages
The pages directory contains your web application views. Pages directory in frontend frameworks like Next Js and Nuxt Js reads all files inside the directory and automatically creates the router configuration for you.

Public
The public directory is directly served at the server root and contains public files that won't change e.g favicon.ico.

Routes
The routes folder is just a place in your web application to store the routes path to different screens.

Utility/Utils
This folder is for storing all utility functions, such as auth, theme, handleApiError, etc.

Views
Views folder are like the pages folder, The views are used to represent your pages properly, that users can navigate back and forth.

Conclusion

A good folder structure allows you and other developers to find files faster and manage them more easily. A well-organized folder structure makes you appear professional.

Comments

[Adam Crockett 🌀]

I’ve tried completely flat projects before that’s had some mileage before it got too much, then I added some folders but this subject, it’s not actually important because we have amazing find in files features built into everything, don’t get hung up on it ✌️

[gunslingor]

I'm actually in complete disagreement with this statement... its only true if you've worked there for years and know the application history. If not, finding via string search in 100k lines of code is often, more often than not, nightmarish.

[Adam Crockett 🌀]

I use for example ECSS a system that is designed to group css by a 3 letter namespace and that is a point that conventions are often found more in files than folders so identifying patterns and searching are indeed skills that a developer must aim to improve on.
I did state as many have missed that there is a limit read the entire comment

[gunslingor]

Great system... but rings my point home too... ive been in many a code base developed by 1000 engineers, where css policies are different throughout precisely due to iteration by each developer individually, without a common folder structure, without a standard... this is the common folly of iterative design, it's equivalent to shoot first and ask questions later, which is definitely appropriate in some scenarios. Imagine an app where the login page uses your standard, the home page uses nested Ultra specific css and the dashboard uses bootstrap... worst case scenario... now imagine everything in the same folder, or even just organized by file type. Plan for the future, plan for architecture... there is a big difference to me between Programming and Software Engineering.

No worries man, take care.

[Dante]

That's actually not true. If you're working on a giant codebase where there's no organization behind folder/directory structuring or assigned naming conventions, it'll prolong your onboarding process a great, great deal.

Being organized with this kind of stuff means being cost-effective and empathetic to your coworkers.

[Adam Crockett 🌀]

you have find in files, your folder structure is irrelevant in this context, that is how as somebody who had no-one to onboard me got around and its battle tested, its true in my context certainly not false.
I have also stated that at a small scale, no structure a flat structure is sufficient at a prototyping phase, adding what you need, when you need it. Im sorry if you disagree but from my experience thats what I have seen.

[Dante]

I think its absolutely okay and valid approach if it's a personal project. Then the only pain you'll receive there will be one of your own doing.😆 But when working with others I wouldn't advise others to "not get hung up on structure". I think that kind of mindset is a gateway to start writing legacy code that nobody wants to touch in the future because messy/sticky/non-comprehensive.

[Adam Crockett 🌀]

My point is iteration is superior to perfection and organisation that will change countless times in the beginning, why don’t you as an experiment write a todo list in a flat structure with no folders, and then explain where the folders start to be needed, that would be an interesting post no?

[Dante]

Not really following your thread there. Anyway - all I know is that if I had to work with someone who had zero care in the matter, I'd be worried about the impact that developer's code would have as far as maintainability goes. But you do you! I'm honestly not here to argue. I just felt it was important to point out another perspective. Hope you have a nice day!

[Adam Crockett 🌀]

I promise there is no argument here I’m also presenting the alternative point of view as well 😊 have a lovely day

[Dante]

Absolutely! Which is totally valid as well. Thanks.😊

[Obaseki Noruwa]

I really enjoyed this thread, it is insightful. Learnt alot from you guys perspective.

[tnypxl]

I use well-structured folders so I don’t have to rely on find in files.

[gunslingor]

Really man, this is old 1980s vim approach. Software architecture is very important, you don't have any of it if all files are flat in a 1000 file application. But even in the vim days we considered architecture. Iteration is actually the least effective method of implementing, short and long term. How would you feel if they built bridges via iteration, why would this be okay for heart monitor software, or even a web-based front-end where personal information can be leaked... there is only one reason, lower upfront cost if you ignore architecture, régulation, new hire onboarding time, comprehension time for when devs modify each other's code, etc, etc.

But when you start a business, actual operating costs far exceeds upfront... so plan for the future and flat file word search ain't it... at least use the IDE click to go feature, faster than typing when tracing and also confirms object is accessible in real time.

[Adam Crockett 🌀]

Op:

had some mileage before it got too much

80s eh, I’m not that old and I don’t use vim 😂

[Romeo]

I dont understand what this mean, can you write in plain english? Thanks

[Adam Crockett 🌀]

Bristolian to English translation:

[devnaqvi]

Thanks but I disagree with you on keeping the styles in assets directory.

[Ray Thurne Void]

I like to organize folders per functionality context rather than architecture layer. For instance i can keep only a components and a utile folder, everything else depends on the project. Eg: eg i may have an auth folder for all things related to authentication, or a transformers folder to store all the modules that are used to convert a data type to another or a cart folder for all the modules related to my e-commerce cart logics.

I also like to design my code to minimize the number of call stacks.

[Obaseki Noruwa]

Folder by functionality is also a great method of structuring web application, Other devs can easily understand your application features 👍🏾 .

[Javier Carrion]

This is the reason I prefer Angular.

[gunslingor]

Spent 3 years doing angular, 3 years doing react. They are truely about equal, each has its strengths. As I recall in angular the value attribute connects to the controller, in react its really the onchange event more so, I did like than in angular better. Angular separates view and controller explicitly, react combines and encapsulates them by default, but still easy to externalize. I find react hooks are more pleasant to work with than the angular equivalent, forgot the term, been a while. Also the child composition aspect of react is great when used right. Angular development focuses a lot on separating view and controller, classic mvc approach that is solid, many advantages. React on the other hand focuses on separating the view layout logic from the view logic (e.g. submit)... layout is king in react, Controller is king and View is queen in angular. I have a lot more fun in react but it takes a while to really understand it and use it correctly compared to angular. Angular is kinda like php + js to but with a modern templating engine, react changes the paradigm more... for better or worse depends on the property and application.

[viyashdoss]

same here

[awatansa]

Seems to me like a good approach initially (means for small sized projects), but very bad on enterprise level projects.

My Point of view is to create a structure more like modules/feature based and keep some common functions/classes or whatever in a separate folder such as common/core.

[leob]

Yeah not bad, very generic though, not every project needs all these folders, and some projects need more/other folders ... another remark is that oftentimes much of the folder structure tends to be more or less 'dictated' by the framework that you're using.

The distinction between views and pages is pretty vague - views are supposed to be "higher level" than components, but "lower level" than pages?

(funny how I'm in fact contradicting myself because in my latest project I have indeed "components", "views" and "pages", so it seems to fulfill a need, lol)

[gunslingor]

This is horrendously bad advice. The article is basically recommending organizing by type as the first layer, instead of subject. But this is precisely the reason modern large codebases are so difficult to maintain and are bugy and insecure and cost insaine inappropriate quantities of cash to maintain.

My main advice would be this:

• generally, 2 top level folders under src, common and pages or routes depending on whether it's front or backend.
• common folder can be organized by type as the article describes, pages get ordered by page subject and complex pages can have layers of type and subject folder structure. Login is simple, stock trader will be nested deep.
• ensure that ALL subject based folders (login, email, etc) have only one file in it, referred to as the [subject] container and subfolders for its children and subject specific support files; one must make smart decisions about chosing the substructure here, by type or subject. This tells the dev the root file, instead of having to open 20 flat files and reverse engineering something that was assembled but not engineered. Also ensure all type folders are broken down by subject and generally avoid flat structure here unless it makes sense (e.g. if you have 1000 related forms, flat might be appropriate, until they have their own reducers, css, etc).
• I would also strongly consider adding another layer: common/data and common/view as well as pages(or routes on backend)/login/(data and view). This significantly improves code in react applications because view should be data independant in react, react has no support for data it is view and layout control only... so data often suffers from the learning curve of react and the view does as well because data ends up encapsulated in the view by those new to react.

When designing architectural structure one must know what one is building. This is rarely the case in the web world were iteration is king, unfortunately. This is why it is key to refactoring and refactoring often with iterative architectural solutions.

But be warned, you do it like this app suggests, and it's a huge complicated app used by millions, it will be a costly nightmare in the long term.

[Obaseki Noruwa]

Thanks for your comment, I really appreciate it. I will use your advice on web projects from now on 👍🏾.

[Alwaisy al-waisy]

feature folder is good to know

[Eric Bishard]

Folders exist to be used. Just like code and tests they should be self explanatory and make understanding discovery and navigation easy. Just at important is naming of the files and co-location of certain logic.

Not one is really more important than the other but folders like layout of your application create a better DX as layout creates a better UX.

It's always interesting to see how others do it, stunt just take everyone's advice, it needs to be a team decision as with most things, but there is some definite and obvious patterns that can be learned through articles such as this.

[szeredaiakos]

That is functional domain partitioning. It's very good at creating small apps fast. However if extended it completely breaks down on maintenance. Recomended only for less than 30 un-nested screens.

I prefer problem domain. In all cases even if i have to write more code.