# Folders and Files Structure

## Overview

The below image gives a quick overview of the folder and file structure Drift follows:

<div align="left"><img src="/files/-Lu2iwxFR8_s6KObsSCI" alt=""></div>

* node\_modules/\
  All the dependency and third party libraries are placed in this folder.<br>
* src/\
  This will contain the source code of your project.<br>
  * app/\
    As usually angular offers to manage all the project related files in the app/ folder. So, this is the root app/ folder for the project. This app folder contains the following important sub-folders and files:<br>
    * content/\
      This folder basically contains all the files which represents to the content area of the layout.<br>
    * data-db/ (will available In source dir only)\
      This folder contains all the JSON formatted data being used throughout the demo.<br>
    * layouts/\
      This folder contains all the layout examples of the demo. You can keep only the layout which you want in your project. Or you can add your own custom layout here.<br>
    * settings/\
      This folder contains a service related to settings of the demo. The same could be used in your project to add/extend settings as per your project requirement.<br>
    * app.service.ts\
      This file contains service to fetch data from server which is being used in layouts etc.<br>
    * app-routing.module.ts\
      This file contains the base routes of the project and this defines which layout will be loaded.<br>
  * assets/\
    This assets/ folder contains all the required assets related to project. For example, css, sass, fonts, images, third-party assets etc.<br>
  * environments/\
    This is a default folder from Angular CLI<br>
  * gaxon/\
    This folder contains all the global components, directives, helpers, services, pipes, modules. These are reusable elements which could be used anywhere in your project.<br>
  * scss/\
    This folder contains all the scss files which defines the styling of the project.<br>
* packages.json\
  This file holds the list of all packages to be installed via `$ npm install` cammand<br>
* gulpfile.js\
  This file defines tasks to compile sass files. So, whenever you make any changes to sass files, you can run the following command to compile those changes:\
  \
  `$ gulp`\
  \
  There are more commands related to watch command etc. which you can explore by going through this file.

## src/assets/

The below image gives an insight of the assets/ folder:

<div align="left"><img src="/files/-Lu2jvw-jgrznBTqpUxU" alt=""></div>

Following sub-folders explain the management of these different type of assets:

* css/\
  This folder contains the css files for all the layouts. Inside this css/ folder, you can find all the layout folders and each layout folder contains css files for both RTL and without RTL version.\
  \
  You can keep only those layout folders which you wish to use in your project.<br>
* fonts/\
  This folder contains the web-fonts used throughout the project.<br>
* images/\
  This folder contains all the images used throughout the project.<br>
* i18n/\
  This folder contains the language translations for different languages.<br>
* vendor/\
  This folder contains the third-party assets. For example, gaxon-icon/ folder which is a custom font icon set designed and developed by G-axon.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-drift-angular.g-axon.work/structure/folders-and-files-structure.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.