CleverStack Frontend

Introduction
MEAN and so much more!

  1. Documentation
  2. Frontend
  3. Introduction

CleverStack's Frontend (Angular Seed) has been designed to provide you with a super fast test driven front-end development lifecycle. Everything you need should be just one command away, if it's not please open an issue or fork the repo on github and submit a pull request.

Highlights
    • AngularJS Application Core Integrated with RequireJS
    • Grunt Server with Live Reload, Bootstrap 3, LESS
    • JavaScript Dependency Loading with Bower
    • Modular NPM Based Coding Structure
    • Unit Testing with Karma & Code Coverage Reports
    • E2E Testing with Angular Protractor and Grunt
    • Optimized Production Build Process


    Structure
    Cleverstacks's Architecture has been designed to be simple and intiutive to use and extend.

    1. Documentation
    2. Frontend
    3. Structure
    Complexity kills. It sucks the life out of developers, it makes products difficult to plan, build and test, it introduces security challenges and it causes end-user and administrator frustration.
    Ray Ozzie
    front-end/
├── app/              # angular app specific source files
│   └── modules/      # cleverstack front-end modules
├── scripts/          # app scripts and binaries
├── tests/            # app tests, both unit & integration
├── Gruntfile.js      # app grunt file for modifying configuration and adding tasks
├── bower.json        # app js dependencies
└── package.json      # app npm dependencies

    Important files and folders

    Here is a list of things you need to know about the structure of the CleverStack AngularJS Frontend


    app/
    • This folder contains the core of the Cleverstack Angular Seed.
    app/modules/
    • This is where all of the Cleverstack modules will be installed into your application by our CLI.
    • NPM Modules that have been made to work with Cleverstack will also be placed here.
    • You also add custom modules inside this folder, either by creating it manually (See https://github.com/CleverStack/frontend-example-module for an example of how to create your own modules) or using the CleverStack CLI's install, generate or scaffold commands.
    scripts/
    • This is where you can store your front-end scripts and binaries such as executables, JAR files or such. Examples of these might be browserstack-tunnel.sh, selenum-server.jar, chromedriver.exe, phantomjs.exe etc...
    • Scripts can be defined in package.json and then run with `npm run-script [name]`.
    Gruntfile.js
    • Defines the Applications global (main) gruntConfig.
    • Registers the Applications included Grunt tasks.
    • Note Each module's Gruntfile.js config is deep merged into this files main grunt config before registering any tasks with grunt.
    bower.json
    • Stores the apps main bower dependencies install during setup with the CLI.
    package.json
    • Defines the Application information, scripts and it's NPM dependencies like any normal NPM Module.
    • Defines the modules that are enabled, using the bundledDependencies[] array. (This also let's NPM know that these dependencies are local and not on the NPM Registry)


    Configuration

    Coming soon, we are working hard on this section.




    Modules

    These are the most important part of your application, where all your functionality and testing is defined.


    Structure

    This is a typical front-end (angular) module structure.

    example-module/
├── scripts/                          # module angular scripts
│   ├── controllers/
│   ├── directives/
│   ├── services/
│   └── resources/
├── styles/                           # module styles (optional)
├── img/                              # module images (optional)
├── fonts/                            # module fonts (optional)
├── views/                            # module ngTemplates
├── tests/                            # module tests
│   ├── unit/
│   └── e2e/
├── main.js                           # module requirejs scripts
├── module.js                         # angular main module
├── bower.json                        # module js dependencies
├── Gruntfile.js                      # module grunt tasks
└── package.json                      # module npm dependencies

    Important files and folders

    scripts/
    • This folder contains all the scripts required for the module. ie - all the modules angular controllers, directives, services and resources.
    views/
    • This allows each module to define it's own views for the ngtemplates provided within each module.
    tests/
    • Two folders for testing, unit/ and e2e/
    • This allows each module to define it's own tests for the functionality (code) that is provided within each module.
    main.js
    • This is the requirejs main file, use it to specify all the javascript files you need for your module..
    module.js
    • Instantiates and configures angular modules for your module.
    bower.json
    • Defines the modules JavaScript dependencies.
    package.json
    • Defines the Application and it's information, scripts and NPM dependencies just like every other NPM Module.

    • Important This is where you define which Modules are enabled, using the bundledDependencies[] array.
    • Note By adding modules into the bundledDependencies[] array, you are also letting NPM know that these dependencies are local and not on the NPM Registry, meaning NPM will never search or download those modules from the internet.
    • Note The order in which you place modules inside your bundledDependencies[] array will be the loading order of the modules.
    Gruntfile.js
    • Defines the Applications global (main) gruntConfig.
    • Registers the Applications included Grunt tasks.

    • Note Each module's Gruntfile.js config is deep merged into this files main grunt config before registering any tasks with grunt, which gives you the power to both add grunt tasks and modify the gruntConfig inside each module.



    Usage

    Coming soon, we are working hard on this section.




    Testing

    Coming soon, we are working hard on this section.




    Troubleshooting

    If you have any problems (including errors, exceptions and even general usage) with the AngularJS Frontend which is called the Angular Seed.



    Contributing

    Firstly please read our guidelines for contributing, Then fork the CleverStack Node Seed github repo, once you are ready please submit a "Pull Request" for review.