Client Folder Structure

Client Folder Structure

Client-Side applications contains folder:

1. Root folder files

Root folder files - Details

1.1. "index.html" main entry for application (https://domain.name/index.html#)

The file contains all necessary HTML setting and loading required external java script libraries (CDN), CSS, icons, >fonts, Client-Side Applications constants, configurations and libraries. The file contains main HTML structure of Client->Side Applications and loading java script code: “index.js”.

1.2 “index.js” Contains code run after document ready (laded) "index.html".

The code loading applications HTML files:

• Navigation Menu (“navigation.html”),
• Header (“header.html”),
• Footer (“footer.html”),
• Spinner, Modals, alerts etc,
• Load default Navigation Menu “Data” ("entity/data/", "#nav-link-data")

1.3 “config.json”

Contains Client-Side applications default configuration parameters and constants.

Example:

• Default System Language: language.iso.code

"language": {
		"iso": {
			"code": "en",
			"value": "English"
		}
	},

• Default System Date Display: mask.datatime.display

"mask": {
		"datatime": {
			"ajax": "YYYY-MM-DDTHH:mm:ss",
			"display": "DD/MM/YYYY HH:mm:ss",
			"file": "YYYYMMDDTHHMMss",
			"dateRangePicker": "DD/MM/YYYY HH:mm"
		}	
	},

Each Deployment environment have specific config.json file:

• "config.json.live"
• "config.json.td"
• "config.json.uat"

---

2. Root folder - Template Folder

Root folder - Template Folder - Details

The template folder contains HTML, CSS, java script template files loaded at application start (“index.js”).

• "template\footer.html" - footer html markup
• "template\header.html" - header html markup
• "template\modal.group.html" - modal.group html markup
• "template\modal.html" - modal html markup
• "template\modal.user.html" - modal.user html markup
• "template\navigation.html" - navigation html markup
• "template\css" folder - definition CSS styling for HTML temnplates

• "template\css\navigation.css"
• "template\css\footer.css"
• "template\css\header.css"

• "template\js" folder - definition java script code for HTML temnplates

• "template\js\navigation.library.js"
• "template\js\entity.js"
• "template\js\footer.js"
• "template\js\header.js"
• "template\js\navigation.js"

---

3. Root folder - css Folder

Root folder - css Folder - Details

The template folder contains CSS styling definitions for Application and specific java script libraries.

• "css\app.bootstrap.guideline.css" - bootstrap base styling definition
• "css\app.bootstrap.override.css" - specific override bootstrap base styling definition
• "css\app.library.css" - Application library specific styling definition
• "css\app.media.css" - Application media library specific styling definition
• "css\app.prism.css" - Application prism base library specific styling definition
• "css\app.prism.override.css" - Application override prism library specific styling definition
• "css\app.xbbcode.css" - Application xbbcode library specific styling definition

---

4. Root folder - js Folder

Root folder - css Folder - Details

The template folder contains java script code for Specific Application and specific 3rd Party libraries.

• js\app.bootstable.js" - java script code for Specific bootstable library
• js\app.config.js" - java script code for Specific Application config(Load config.json file)
• js\app.constant.js" - java script code for Specific Application constant (Definitions of constant)
• js\app.global.js" - java script code for Specific Application - DEPRECATED
• js\app.library.group.js" - java script code for Specific Application group shared library
• js\app.library.js" - java script code for Specific Application shared library
• js\app.library.user.js"- java script code for Specific Application usershared library
• js\app.mindmup.editabletable.js" - java script code for Specific mindmup.editabletable library
• js\app.plugin.js" - java script code for Specific plugin library
• js\app.prism.js" - java script code for Specificprism library
• js\app.twbs-pagination.min.js" - java script code for Specific twbs-paginationlibrary
• js\app.xbbcode.js" - java script code for Specific xbbcode library

---

5. Root folder - entity Folder

Root folder - `entity` Folder - Details

The entity folder contains HTML, CSS, java script code for Specific Applications.

• entity\build" - HTML, CSS, java script code for Build Application
• entity\configuration" - HTML, CSS, java script code for Configuration Application
• entity\data" - HTML, CSS, java script code for Data Application
• entity\developer" - HTML, CSS, java script code for Developer Application
• entity\keyword" - HTML, CSS, java script code for Keyword Application
• entity\manage" - HTML, CSS, java script code for Manage Application
• entity\release" - HTML, CSS, java script code for Release Application
• entity\upload" - HTML, CSS, java script code for Upload Application

Example Upload Application:

• Web browser screen shot

• Folder structure screen shot

---

Top