DBooks.org Frontend Documentation 1; Basic Directory Structure Description

Repository

https://github.com/feekayo/dbooks.org

Details

This document describes at full length the details of the frontend boilerplate for Dbooks.org in the repository added above.

This is the first piece of an hopefully evolving documentation journey. And this particular piece and is aimed at providing interested contributors an headstart into understanding the Architecture and Framework being used im developing the dbooks.org frontend.

Components

As shown above, there are five (5) folders and seven (7) files in the main directory of the repository. Of these 12 components we are mainly interested in three components.

1. The app Folder
2. The app.js File
3. The package.json file.

On cloning the Repository. Run

npm install

On command line, to install all the node dependencies from the package.json. Then Run

node app.js

On your local device, to get the server up and running.

The app folder is where most of the magic happens.
It contains six (6) folders and four (4) files. The folders and files we are interested in right now include;

1. The css folder:- Contains app.css; which is the primary stylesheet for the entire application
2. The img folder:- Is meant to hold the general images of the application
3. The js folder:- Holds five (5) files:
   i. app.js:- Instantiates the app's dependencies and configurations
   ii. controllers.js:- Contains general controllers for the application
   iii. directives.js:- Contains general custom directives for the application
   iv. services.js:- Contains general services for the application; including webAPI routes, domains and version services
   v. filters.js:- Contains general custom filters for the application
4. The lib folder:- Contains certain offline app dependencies
5. The modules folder:- It's to hold various app modules, to give the app a more modular architecture
6. The index.html file:- Instantiates the application's scripts

A deeper look into the modules folder

The modules folder; for now has just one module; the main module. Which on selecting shows the general template for a module. Four (4) folders and a Module file.
These components include

1. The css folder: contains {{modulename}}.css which would be the module specific stylesheet
2. The img folder: contains module specific image files
3. The js folder: contains
   i. controller.js: module specific controllers
   ii. directives.js: module specific controllers
   iii. filters.js: module specific filters
   iv. services.js: module specific services
4. The views folder: contains html views for the module
5. The {{modulename}}Module.js file contains; a module instantiation and routes provides by the module, alongside general module configurations

In a subsequent post; I'll be explaining how to make use of this structure in creating new functionality for the currently mostly blank application.

Difference

N/A

Links

Official Documentation hosted on:

https://github.com/feekayo/dbooks.org/wiki/Basic-Folder-Description

Proof of Authorship

https://github.com/feekayo