Introduction
The default folder structure of Magpie is designed to be compatible with both large and small web applications. Being said that, it also follows the directory structure of Angular 6 and NodeJs.
testproject/
├── config/
│ ├── DB.js
├── e2e
├── nodex/
│ ├── admin/
│ | ├── customRoutes.js
│ | ├── usersRoutes.js
│ ├── api/
| | ├── customRoutes.js
│ ├── models/
│ ├── site/
├── package
| ├── mailService.js
|
├── src/
│ ├── app/
│ │ ├── admin/
│ │ │ ├── components/
│ │ │ │ ├── dashboard/
│ │ │ │ │ ├── dashboard.component.css
│ │ │ │ │ ├── dashboard.component.html
│ │ │ │ │ ├── dashboard.component.spec.ts
│ │ │ │ │ ├── dashboard.component.ts
│ │ │ ├── services/
│ │ │ │ ├── dashboard.service.ts
│ │ │ ├── sites/
│ │ │
│ │ |
| │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ ├── app.module.ts
│ │ ├── routerConfig.ts
| |
│ ├── assets/
│ ├── environments/
| │ ├── environment.prod.ts
| │ ├── environment.ts
├── system/
│ ├── nodex/
│ | ├── admin/
| │ | ├── customRoutes.js
| │ | ├── passport.js
| │ | ├── usersRoutes.js
| │ ├── api/
| | | ├── apiRoutes.js
| │ ├── models/
| | | ├── menus.js
| | | ├── roles.js
| | | ├── sections.js
| | | ├── users.js
| | | ├── file.js
| | | ├── general-settings.js
| | | ├── mail-template.js
| | | ├── package-installer.js
| | | ├── reset-password.js
│ ├── src/
│ | ├── components/
│ | | ├── admin/
│ | | | ├── create/
│ | | | | ├── create.component.css
│ | | | | ├── create.component.html
│ | | | | ├── create.component.spec.ts
│ | | | | ├── create.component.ts
│ | | | ├── dashboard/
│ | | | | ├── dashboard.component.css
│ | | | | ├── dashboard.component.html
│ | | | | ├── dashboard.component.spec.ts
│ | | | | ├── dashboard.component.ts
│ | | | ├── edit/
│ | | | | ├── edit.component.css
│ | | | | ├── edit.component.html
│ | | | | ├── edit.component.spec.ts
│ | | | | ├── edit.component.ts
│ | | | ├── index/
│ | | | | ├── index.component.css
│ | | | | ├── index.component.html
│ | | | | ├── index.component.spec.ts
│ | | | | ├── index.component.ts
│ | | | ├── login/
│ | | | | ├── login.component.css
│ | | | | ├── login.component.html
│ | | | | ├── login.component.spec.ts
│ | | | | ├── login.component.ts
│ | | | ├── profile-edit/
│ | | | | ├── profile-edit.component.css
│ | | | | ├── profile-edit.component.html
│ | | | | ├── profile-edit.component.spec.ts
│ | | | | ├── profile-edit.component.ts
│ | | | ├── view/
│ | | | | ├── view.component.css
│ | | | | ├── view.component.html
│ | | | | ├── view.component.spec.ts
│ | | | | ├── view.component.ts
| | | | ├── package-installer/
│ | | | | ├── package-installer.css
│ | | | | ├── package-installer.html
│ | | | | ├── package-installer.spec.ts
│ | | | | ├── package-installer.ts
| | | | ├── reset-password/
│ | | | | ├── reset-password.css
│ | | | | ├── reset-password.html
│ | | | | ├── reset-password.spec.ts
│ | | | | ├── reset-password.ts
| | | | ├── settings/
│ | | | | ├── settings.css
│ | | | | ├── settings.html
│ | | | | ├── settings.spec.ts
│ | | | | ├── settings.ts
│ | ├── directives/
│ | | ├── admin/
│ | | | ├── chart.directive.ts
│ | | | ├── datePicker.directive.ts
│ | | | ├── menuToggle.directive.ts
│ | | | ├── rolePermissions.directive.ts
│ | ├── pipes/
│ | | ├── admin/
│ | | | ├── dynamicSource.pipe.ts
│ | | | ├── getFile.pipe.ts
│ | | | ├── getMapDetails.pipe.ts
│ | | | ├── inArrayCheck.pipe.ts
│ | | | ├── objectFilterByKeyValue.pipe.ts
│ | | | ├── objectReturnKey.pipe.ts
│ | | | ├── tagsData.pipe.ts
│ | | | ├── toArray.pipe.ts
│ | | | ├── toObject.pipe.ts
│ | ├── services/
│ | | ├── admin/
│ | | | ├── auth-guard.service.ts
│ | | | ├── section.service.ts
│ | ├── magpie.component.css
│ | ├── magpie.component.html
│ | ├── magpie.component.spec.ts
│ | ├── magpie.component.ts
│ | ├── magpie.module.ts
│ | ├── routerConfig.ts
├── uploads/
├── karma.conf.js
├── package.json
├── package-lock.json
├── protractor.conf.js
├── server.js
├── tsconfig.json
├── tslint.json
├── .angular-cli.json
├── README.md
Lets look into some of the key folders
# config
Configurations like database connection are defined inside this folder. By default the framework provides a DB.js file to configure mongodb credentials
# nodex
This folder contains all the NodeJs related files and functions for the application. Files will be organised in corresponding folders:
# admin
This is where all admin related route logics are defined.
# api
API calls for mobile devices are stored in this folder.
# models
Mongodb related logics for any of the created sections are defined here.
# site
Site folder holds all front-end related route logics for the application.
# src
This is the Angular 6 default folder which holds all the angular related logics. Components are categorised under admin and site folders
# components/admin
If you want to extend any functionalities on admin side any of the sections created, you can create a new component and add custom logics here.
# components/site
Similarly, if you need any additional functionality on user side in any of the sections created, you can create a new component and add custom logics here.
# app/assets
This folder holds all the css, fonts, images etc. for both admin and site
# environments
This folder holds two key files one is for production environment and other for development environment.
# system
This is core folder which holds all default system source codes. If you have not extended any functionality on nodex and src/app each for NodeJs and Angular functionalities respectively, the code in system folder will be executed to perform all basic operations like CRUD for you.
# nodex
All the core NodeJs related logics and routes are here. Everything is organised as admin and site separately.
# src
All the core Angular components, services, pipes etc. logics and routes are here. Everything is organised as admin and site separately.
# uploads
All files uploaded in the system are stored inside this folder.
# package
This folder holds installed packages.