Documentation
Development

Directory Structure

Fuse's directory structure might look overwhelming and intimidating at first, but following this page and giving a bit time to understand it before jumping right into code will help immensely.

Fuse built around the idea of multi-purpose and multi-layout. You can think of Fuse as a Starter kit and a guide rather than just a simple template. The purpose of Fuse is not only provide a pre-made styles for visual elements but is also be a guide to follow while building an app.

It's more of an answer to the questions like Where should I put this file? or Which file should I put this piece of code into? rather than just a compilation of example pages and ready to use styles.

Here's a simplified version of the entire directory structure of the Fuse:

├─
└─
{{node.name}}
{{node.name}}

@fuse/

This is the core directory of the Fuse. It includes components, directives, services, pipes, custom validators, animations, base styles and much more.

Modifications on this directory is NOT recommended. Since majority of changes happen within this directory on updates, any modifications to this directory and its content will make the updating process complex and time consuming.

app/

This directory contains all application related codes. This is where you put your code.

Fuse provides a sensible default directory structure within the app directory. You can of course completely remove everything from it and design your own structure but the provided structure is designed to handle applications from small to enterprise grade:

├─
└─
{{node.name}}
{{node.name}}

app/core/

This directory is designed to contain your application's core; Singleton services, default configurations, default states and likes. It's NOT recommended to put any components, directives, pipes or simply anything has a template or related to templates in here.

Example files that can go into this directory includes, but not limited to:

and etc...

app/mock-api/

This directory is designed to contain data services for custom made MockAPI library. Detailed information about this directory and the MockAPI library can be found in the Fuse Components > Libraries > MockAPI section of this documentation.

app/layout/

This directory designed to contain everything related to the layout of your app. By default, Fuse provides variety of different layout options for you to use.

The LayoutComponent is an entry component and it provides an easy way of switching between different layouts. More information about how the LayoutComponent works can be found in the Customization > Theme layouts section of this documentation.

The app/layout/common/ folder includes common components for layouts such as:

These components are being used across different layouts, so if you use multiple layouts and want to create a component, directive or a pipe for using within your layouts, you can put them inside the common folder.

app/modules/

This directory is designed to contain your application's feature modules.

For example; Authentication related pages such as Sign In, Sign Up, Lost Password and etc. can be grouped into auth/ directory while your main admin components and modules grouped into admin/ directory.

If you use SSR (Server Side Rendering) you can even include your landing page as one of the modules and keep everything in a single app.

app/shared/

This directory is designed to contain anything re-usable such as components, directives and pipes. By default, it doesn't include any of them but when you create one for your app, you can put it here.

The only file here is the shared.module.ts file which simply imports and exports some of the common Angular modules so you don't have to import them one by one. You can just import the shared.module.ts into your module whenever you need one of those common modules.

Currently it imports and exports:

You can add/remove anything to/from the shared.module.ts file and use the module to import commonly used modules without needing to remember them one by one.

assets/

Default Angular assets folder.

environments/

Default Angular environments folder.

styles/

This folder contains 4 different scss files: