A Front-End Application Folder Structure that Makes Sense
<p>One of the most critical and challenging aspects of a large-scale application is a good and reasonable folder structure. Before considering breaking the codebase into multiple applications using micro frontends there are some steps that can be followed to improve the architecture at a project level and make the transition easier if you ever consider that path.</p>
<p>The goal is to apply some kind of modularisation that will make the codebase easier to understand by setting boundaries between features and minimizing code coupling and side effects.</p>
<h1>Default Project Structure</h1>
<p>By default when scaffolding a new project using one of the popular front-end frameworks the component structure is flat and follows no hierarchy whatsoever.</p>
<p><img alt="" src="https://miro.medium.com/v2/resize:fit:300/1*yPId5D9_0q4MZGxfYhI8OQ.png" style="height:438px; width:300px" /></p>
<blockquote>
<p>This example uses <a href="https://github.com/vuejs/create-vue/tree/main/template/code" rel="noopener ugc nofollow" target="_blank">Vue default project structure</a> but <a href="https://legacy.reactjs.org/docs/faq-structure.html" rel="noopener ugc nofollow" target="_blank">React also doesn’t have an opinion on how you put files into folders</a>.</p>
</blockquote>
<ul>
<li>The <code><strong>assets</strong></code> directory stores static assets such as images, fonts, and CSS files used throughout the application.</li>
<li>The <code><strong>components</strong></code> directory contains reusable Vue components. A flat hierarchy is recommended.</li>
<li>The <code><strong>main.js</strong></code> file serves as the entry point of your application, enabling Vue initialization and configuration of plugins or additional libraries.</li>
<li>The <code><strong>App.vue</strong></code> file represents the root component of your application, acting as a container for other components and serving as the main template.</li>
</ul>
<p>We have seen the hard way that for a large project, this architecture will soon get out of hand. Some kind of modularisation is needed to be able to easily locate a given file, set boundaries between features, and avoid tight coupling of the components.</p>
<p><a href="https://fadamakis.com/a-front-end-application-folder-structure-that-makes-sense-ecc0b690968b">Click Here</a></p>