Folders and Files Structure

Overview

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

node_modules/ All the dependency and third party libraries are placed in this folder.
src/ This will contain the source code of your project.
- 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:
  - content/ This folder basically contains all the files which represents to the content area of the layout.
  - data-db/ (will available In source dir only) This folder contains all the JSON formatted data being used throughout the demo.
  - 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.
  - 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.
  - app.service.ts This file contains service to fetch data from server which is being used in layouts etc.
  - app-routing.module.ts This file contains the base routes of the project and this defines which layout will be loaded.
- assets/ This assets/ folder contains all the required assets related to project. For example, css, sass, fonts, images, third-party assets etc.
- environments/ This is a default folder from Angular CLI
- 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.
- scss/ This folder contains all the scss files which defines the styling of the project.
packages.json This file holds the list of all packages to be installed via $ npm install cammand
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:

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.
fonts/ This folder contains the web-fonts used throughout the project.
images/ This folder contains all the images used throughout the project.
i18n/ This folder contains the language translations for different languages.
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.

PreviousDeployment NextLayouts

Last updated 4 years ago

Overview

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

node_modules/ All the dependency and third party libraries are placed in this folder.

src/ This will contain the source code of your project.

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:
- content/ This folder basically contains all the files which represents to the content area of the layout.
- data-db/ (will available In source dir only) This folder contains all the JSON formatted data being used throughout the demo.
- 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.
- 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.
- app.service.ts This file contains service to fetch data from server which is being used in layouts etc.
- app-routing.module.ts This file contains the base routes of the project and this defines which layout will be loaded.
assets/ This assets/ folder contains all the required assets related to project. For example, css, sass, fonts, images, third-party assets etc.
environments/ This is a default folder from Angular CLI
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.
scss/ This folder contains all the scss files which defines the styling of the project.

packages.json This file holds the list of all packages to be installed via $ npm install cammand

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:

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.

fonts/ This folder contains the web-fonts used throughout the project.

images/ This folder contains all the images used throughout the project.

i18n/ This folder contains the language translations for different languages.

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.