Home Metronic Hire Us Buy Now
The World’s #1 Bootstrap 4 & 5 HTML, Angular 11, React, VueJS & Laravel
Admin Dashboard Theme

## Files Structure

### Overview

Metronic comes with a flexible file structure that can be easily used for small to large scope projects. This section will explain Metronic's entire file structure and how to adapt it to your project.

Path | Description
--- | ---
doc | The theme documentation
theme | Main theme folder
html | Default HTML package folder.
[demo1] | Demo's directory(e.g: demo1, demo2, demo3, ...)
dist | This folder will be generated after run the gulp compile.
assets | Contains generated assets (JS, CSS, images, fonts, etc.) from build tools. Refer to folder `[metronic]/theme/html/tools/gulp.config.json`
index.html | Main page template.
src | Source folder contains the raw source code of javascript, scss, images and web font files that will be minified/concatenated by gulp tasks onto assets folder for production usage. Refer to Source File Structure below.
tools | Build tools for development and deployment
gulp | The build tools gulp tasks for bundle and minify the js and css files and compile sass files.
webpack | The build tools webpack for bundle and minify the js and css files and compile sass files.
node_modules | Yarn/NPM package installation folder
build.config.json | Contains theme assets configuration in json file.
gulpfile.json | Gulp tasks main script. All the build tool tasks are grouped in this script
package.json | Yarn/NPM package manager config file
webpack.config.json | Webpack main logic config file
[apps] | Other applications integration. Eg. Angular, React, Vue, etc.

### Source File Structure

Below table explains Metronic's components file structure including Javascript, SCSS, etc. The table below start with the path: `[metronic]/theme/html/[demo]/src/`

Path | Description
--- | ---
src | This source folder contains the raw source code of javascript, scss, images and web font files that will be minified/concatenated upon running build tasks onto the assets folder for production usage
js | Javascript files
components | Theme components plugins
layout | The theme base layout for current demo
pages | Custom pages JS files.
vendors | 3rd-party vendors that are included with the theme since they does not exist in NPM.
media | Media files(images, videos, etc...)
plugins | 3rd-party vendors that are included with the theme since they does not exist in NPM.
sass | SCSS files
base | Base functions and mixins of SCSS.
components | Theme components styles
layout | The theme base layout for current demo
pages | Custom pages SASS files.
themes | Multiple themes for the template skin and changeable.
vendors | Integration with 3rd party plugins or frameworks
_init.scss | Base style initialization file
style.scss | Main SCSS file of demo.