Generator-nbgen NPM

Still under construction...

Introduction

This is a yeoman generator for generating code baseline for developing full stack web application. It is composed of opinionated use of AngularJS as front-end framework and Meteor as the backend.

On the front-end the following frameworks/libraries are used:

AngularJS - main framework used
AngularJS Material Design - For defining look and feel
Angular UI-Router - For client-side routing
Angular Translate - For implementing internalization & localization
Angular Meteor - For handling meteor inside AngularJS framework

On the back-end the following frameworks/libraries are used:

Meteor - main backend application server and framework used including the following modules:
- Publish / Subscribe
- Methods - implementing remote APIs
- Collections - encapsulate MongoDB operations
- Accounts / Roles - for handling user identity and roles management to enforce application access control
- Email - for sending email
HTML PDF - for generating reports in pdf
later - for handling task scheduling

Other components used both on front-end and backend:

momentjs - handling dates
underscore - extend javascript with numerous useful functions.
underscore.string - string handling and manipulations

Getting Started

Installation

Install Meteor.
Install Node.js. V8 is the preferred version. You may also opt not to install Node.js and use the version that comes with Meteor. To run node that comes with Meteor just prepend the command with meteor (e.g. meteor npm install).
Install Yeoman CLI

npm install -g yo

Install nbgen generator.

npm install -g generator-nbgen

Usage

Creating a Baseline Code

Create a project folder, and from the project folder run the following to generate the code baseline.
```
yo nbgen
```
You will be prompted with application name. Enter your desired application name. The tool will then start scaffolding the code baseline.
To run the application
```
npm start
```

Customising Basic UI Components

Change Color Theme

To change the color theme used by the app, edit client/imports/ui/app/nbgenApp/nbgenAppConfig.js and modify the default color theme. Optionally, add a secondary theme. For color theme reference, please visit Material Design's color palette reference.

const config = {
    // change to the user readable application name
    applicationName: "nbGenAppBase",
    applicationLogo: imagesToPreload[0],
    applicationLogoSquare: imagesToPreload[1],
    applicationBgs: applicationBgs,
    imagesToPreload,
    colorTheme: {
        // change the default color theme used by application
        primary: "indigo",
        accent: "teal",
    },
    secondaryTheme: {
        // secondary color theme used
        primary: "indigo",
        accent: "amber",
    }
}

Images

public/assets/images/application-bg.jpg - application background.
public/assets/images/application-logo.png - used in the toolbar header
public/assets/images/application-logo-square.png - used in sidenav navigation

You may also want to change the favicons located in public/assets/icons folder.

Built-in Routes

There are client-side routes that came with the generated baseline codes. You may customize these according to your application needs.

nbgenMain - The home screen located in client/imports/ui/app/nbgenApp/nbgenMain/ directory.
nbgenLogin - Contains the login facility. Located in client/imports/ui/app/nbgenApp/nbgenLogin/ directory.
nbgenRegister - Contains the self-registration facility. Located in client/imports/ui/app/nbgenApp/nbgenRegister/ directory.

Sub-Generators

Mongo DB Collection Maintenance

To generate set of codes for maintaining a MongoDB collection, complete with front-end and back-end codes:

yo nbgen:collection collectionName

You must provide the name of the mongo collection to create (e.g. yo nbgen:collection Customers)

Generated codes:

Front end mainly located in client/imports/ui/app/collectionName folder
- collection.js - declaration of minimongo collection which can be imported to access from other parts of the code.
- _collection.scss - may be modified to change css styles of the component
- actionToolbarListView.html - to include other UI components on the top toolbar shown when viewing the collection list
- actionToolbarFormView.html - to include other UI components on the top toolbar shown when viewing or editing a specific document from the collection.
- config.js - this is where you put codes to customize the behaviour of the component.
- listLayout.js - contains configuration on how to layout the list of collections.There are several options you can put in here to modify or override the default operations of the collection maintenance which will be explained on a separate section below.
- formSchema.js - contains configuration describing how to layout and composition of the forms. More details about this on the form components section.
- setup.js - this is where the component and its options are setup. For instance if you want to limit the access to of the client-side route to a set of roles, you will modify the alloweRoles variable declared in this file.
- i18n.hjson - this is located in client/imports/i18n/en
- An entry into the menu will be injected into client/imports/ui/app/nbgenApp/nbgenAppMenu.js
Back end mainly located in server/imports/api/collectionName folder
- index.js - declaration of mongo collection
- fixture.js - where you put initialization routines
- publish.js - control the publication of the collection to the client including filtering of exposed information based on user's group or role
- permissions.js - provides mechanism to control who can perform create, update and delete operations.
- methods.js - where to declare and define remote API methods, specific to the application requirements.