Proof of Concept 3 (PoC3)

A simple demo web application built with AngularJS, Bootstrap, Grunt, Bower, Jasmine, Karma, and json-server.

Prerequisite

Node.js
ConEmu – to have Git option, install ConEmu first.
Git
Brackets or any Editor that you are comfortable with.

Proxy Configuration

$ git config --global http.proxy http://{yourID}:{your_password}@ProxyServer:8080
$ git config --global https.proxy https://{yourID}:{your_password}@ProxyServer:8080

npm config set proxy 'http://{yourID}:{your_password}@ProxyServer:8080'
npm config set strict-ssl false

Bower - .bowerrc file to add configuration

{
"proxy":"http://{yourID}:{your_password}@ProxyServer:8080",
"https-proxy":"http://{yourID}:{your_password}@ProxyServer:8080"
}

Install

Install JSON server

$ npm install -g json-server

Create a folder named json-server, and move to this folder. Copy db.json (project directory) to the folder above. Start JSON Server to reflect any change in the db.json.

$ json-server --watch -p 9988 db.json

By default, it runs on port 3000, but above start script will change the port to 9988 to avoid any port conflict. Without json-server running, this demo application will not load any data.

Start from scratch

If you want to start a fresh project, here is the steps.

Install Bower

$ npm install bower

Initialize Bower on a new project. Resource

$ bower init

Now add dependent packages - angular, bootstrap, font-awesome, angular-ui-router, angular-resource, angular-mocks. You can concatenate all the dependencies in a single line.

$ bower install boostrap font-awesome angular-ui-router angular-resource angular-mocks -S

$ bower install angular -S

$ bower install bootstrap -S

$ bower install font-awesome -S

$ bower install angular-ui-router -S

$ bower install angular-resource -S

$ bower install angular-mocks -S

Install Grunt CLI. Resource

$ npm install -g grunt-cli

Install Grunt locally

$ npm install grunt --save-dev

Create a Gruntfile.js in your project root directory. Basic file listed below. For a complete file, please copy Gruntfile.js from this project.

'use strict';
module.exports = function (grunt) {
    require('jit-grunt')(grunt);

    //Define the configuration for all the tasks
    grunt.initConfig({

    });

    grunt.registerTask('build', ['jshint']);
    grunt.registerTask('default', ['build']);
};

Create .jsintrc file in your project root directory - configuration for JSHint. For a complete file, please copy Gruntfile.js from this project.

Install Grunt Tasks --save-dev option is to update package.json devDependencies.

JSHint
jshint-stylish
time-grunt
jit-grunt

$ npm install grunt-contrib-jshint jshint-stylish time-grunt jit-grunt --save-dev

copy, clean: Copying and Clean up Dist folder

$ npm install grunt-contrib-copy grunt-contrib-clean --save-dev

useminPrepare task: Looks for block configuration in html, automatically generate configuration information for concat, cssmin, and uglify
filerev: revision your file
usemin: After concat, cssmin, uglify and filerev are run, this will replace css, JS with single concatenated files

$ npm install grunt-contrib-concat grunt-contrib-cssmin grunt-contrib-uglify grunt-filerev grunt-usemin --save-dev

watch, connect and serve: Reflect any changes and publish to http://localhost:9000

$ npm install grunt-contrib-watch grunt-contrib-connect --save-dev

Install Grunt ng-annotate - automatically add explicit dependency injection to your source code. Resource

$ npm install grunt-ng-annotate --save-dev

Start Grunt

Based on Gruntfile.js, default task is to compile.

$ grunt

To start the Live view