Generator-cui-ng NPM

Cui-Ng Generator

Summary

Starting point for CUI IDM Angular projects containing pre-built tools and modules for developers.

Prerequisites

Node and NPM

Every step after this requires NPM

Grunt CLI: npm install -g grunt-cli
Yeoman: npm install -g yo

Installing

Install by running npm install -g generator-cui-ng.
Create a new directory for your new project.
Inside the new directory run yo cui-ng.

You will be given questions to customize your new project. If you make a mistake you can always start over by deleting the new project directory and restarting from step 2.

At the end of this process you will be given instructions on how to generate the environment variable profile for your new project.

Customizing Your New CUI Project

The generator is built to allow you to get the newest upstream features of Cui-Idm-B2X without risk of overwriting any of your current work by splitting it into 2 main folders: app and app-custom.

The app/ directory contains the most up to date upstream B2X code (upon updating your B2X dependency to a newest version). You can also run yo cui-ng:update from your project's root to get the newest upstream updates.

The app-custom/ directory houses your own customizations or new features. Any files inside of app-custom that share a path and filename to a file inside of app will overwrite that file inside of app with your own work from app-custom.

Customization Example

In this example, say we want to change the way the applications are being shown in the 'My applications' screen.

The file containing the markup for the 'My Applications' screen is located at: app/modules/applications/myApplications.html

What you would do is:

Copy the original file into: app-custom/modules/applications/myApplications.html
- This will override the original file located in the app/ directory
Do your customizations in that new file.

NOTES:

Every time you want to reference an asset in app-custom, be it an image or html template, make sure to point to app instead of app-custom, since everything gets moved to the app folder during the build process.
All html files in app-custom get concatenated and merged in with the rest of your js files, using ng-templates. This helps reduce the number of http requests. If for some reason you need an html file to carry over (maybe to open in a new tab), simply create a non-concat folder in app-custom and put your html files in there (remember to follow the first note when referencing them)

The benefits of this yeoman generator should be clear now: You can change pieces in a file by file fashion without compromising your ability to get updates to the other moving pieces.

Running Your App

Running grunt from the root of the project will start browsersync. This is a grunt task that will auto-reload the browser page for you every time you make edits.

Running grunt build will concatenate and minify all project assets needed to run your application inside of the build/ directory. You might have to update the copy task if you add in new assets to your project.

Running grunt demo will run the project from the build folder giving you an accurate representation of what the project will look like once it is deployed. It is always a good idea after introducing major changes or new assets to confirm that the project runs from the build folder before deploying or publishing anything.

Other Notes/Features

The gruntfile, tasks/, app/wrappers directories do not get updated after running yo cui-ng:update or via traditional npm update or npm install.
From the app-custom/modules/ directory you can run yo cui-ng:add-module to kick start a new module structure with a basic state configuration.
From within a nested module folder (app-custom/modules/appliciations/myApplications/ for example) you can kick start a new feature by running yo cui-ng:add-controller. This will create a new controller attached to the applications module and, optionalls, a new html template file that matches the name of the controller.