Folder Structure

Vuexy Angular has a very simple folder structure to understand it easily.

WARNING

@core folder contains core files of the template. It is not recommended to change anything inside @core folder unless you know it OR our support team guide you to do it.

Below is the Vuexy Angular full-version.zip folder structure explanation for better understanding. Once you unzip it you will find the belwo folder structure.

├── dist                     -> Contains the built app
├── e2e                      -> End-to-end tests
├── src                      -> Source files for the root-level app project
│   ├── @core                -> Contains core elements of Vuexy
│   ├── @fake-db             -> Fake Database for Angular in-memory-web-api (Fake API Calls)
│   ├── app                  -> Your app folder
│   │   ├── auth             -> Contains the authentication files
│   │   ├── layout           -> Contains the template layouts elements
│   │   │   ├── components   -> Layout components i.e navbar, menu, footer etc..
│   │   │   ├── horizontal   -> Horizontal layout setup
│   │   │   └── vertical     -> Vertical layout setup
│   │   ├── main             -> Contains Vuexy's ready-to-use apps, pages, dashboards, forms, etc...
│   │   ├── menu             -> Application main menu (navigation)
│   │   │   ├── i18n         -> Contains menu translation files
│   │   │   └── menu.ts      -> Contains menu data (structure)
│   │   ├── app-config.ts    -> App config for app customization
│   │   └── colors.const.ts  -> Colors constants used in app (i.e used in charts)
│   ├── assets               -> Contains app assets
│   │   ├── fonts
│   │   ├── images
│   │   ├── scss            -> Contains scss files to override variables and styles
│   │   │   ├── variables
│   │   │   │   ├── _variables-components.scss -> Custom component variable
│   │   │   │   └── _variables.scss            -> Bootstrap variable
│   │   │   └── styles.scss -> Custom styles
│   ├── environments
│   ├── favicon.ico         -> App favicon
│   ├── index.html          -> The main HTML page that is served
│   └── styles.scss         -> Lists CSS files that supply styles for a project.
├── .browserslistrc         -> Configures sharing of target browsers
├── angular.json            -> Angular CLI configuration
├── LICENSE                 -> Theme license file
├── package.json            -> Configures npm package dependencies
├── README.md               -> Introductory documentation
├── tsconfig.json           -> TypeScript configuration
└── tslint.json             -> TSLint configuration

TIP

Vuexy Angular documentation can not explain every small part of the angular app. For detailed information Workspace and project file structure (opens new window)

src/

This folder contains source files for the root-level application project.

• @core/ folder contains core files of the template which shall not get modified unless our support team guide you to do it. Apart from the @core you can modify any files as per your requirement.
• @fake-db/ folder just contains dummy data which we get in response of fake API call. This enables us to take step forward in providing API ready template.

app/

• auth/ folder contains Authentication helpers/, modals/ & services/ which help us to manage JWT authentication with role-based access. For more detail refer Authentication
• layout/ folder contains vertical & horizontal layouts and components i.e navbar, menu, footer etc... For more details refer Layout
• main/ folder contains Vuexy Angular ready to use apps, dashboard, pages, charts, cards and forms.
• menu/ folder contains main menu(navigation) data with translations. Translations files are in i18n/ folder. For more details refer Menu
• app-config.ts The config file for configuring the Vuexy template. For more details refer App Config
• colors.const.ts The color constant file which are used in app (i.e used in charts).