#Setup NPM, Gulp, Mocha, Chai and Webpack with AngularJS from scratch

This is a very basic setup/seed to make everything work and get started on your project. Tested on OSX El Capitan

Prerequisites: Basic knowledge of AngularJS and make sure you have XCode and git installed

#Install NPM:

Install NodeJS with NPM: https://nodejs.org/en/download/

$node --version
$npm --version

Remove EACCESS error (Install NPM packages without sudo)

Reference: https://github.com/sindresorhus/guides/blob/master/npm-global-without-sudo.md

$mkdir "${HOME}/.npm-packages"

Add in your ~/.npmrc

prefix=${HOME}/.npm-packages

Check Shell (bash or zsh):

echo $0

Update .bashrc/.zshrc based on your shell:

$ vi ~/.bashrc

Copy this in your ~/.bashrc file:

NPM_PACKAGES="${HOME}/.npm-packages"

PATH="$NPM_PACKAGES/bin:$PATH"

# Unset manpath so we can inherit from /etc/manpath via the `manpath` command
unset MANPATH # delete if you already modified MANPATH elsewhere in your config
export MANPATH="$NPM_PACKAGES/share/man:$(manpath)"

Run to update NPM:

$ npm install -g npm

#Download this skeleton project: (https://github.com/arp1t/basic_angular_app/)

$ git clone https://github.com/arp1t/basic_angular_app.git

Create package.json

basic_angular_app$ npm init

Enter these values to create a package.json:

name: (basic_angular_app)
version: (1.0.0) 0.0.1
description: Basic Angular App
entry point: (index.js) gulpfile.js
test command: ./node_modules/.bin/mocha
git repository: (https://github.com/arp1t/basic_angular_app.git)
keywords: npm, gulp, webpack, chai, mocha
author: Arpit Shah
license: (ISC) MIT

#Install Gulp: Reference: https://css-tricks.com/gulp-for-beginners/ Reference: https://travismaynard.com/writing/getting-started-with-gulp

$ npm install -g gulp
$ npm install --save-dev gulp

You would see your 'package.json' updated with gulp dependency and a new 'node_modules' folder added.

Create a 'gulpfile.js' in 'basic_angular_app/' and add this:

//Include gulp
var gulp = require('gulp');

//Sample Task
gulp.task('hello', function(){
console.log('Hello Arpit');
});

Now run:

$gulp hello

//This will run the hello task and put your name in the console
//If for some reason your global gulp is not installed properly,
//you can try running the local gulp in our project (ideal) by:

$ ./node_modules/gulp/bin/gulp.js hello

#Add LiveReload with browser-sync: Reference: https://css-tricks.com/gulp-for-beginners/

Install browser-sync:

$ npm install browser-sync --save-dev

Add this above 'sample task' in gulpfile.js

//Include Plugins
var browserSync = require('browser-sync').create();

//BrowserSync Task
gulp.task('browserSync', function() {
  browserSync.init({
  server: {
  baseDir: 'app'
  },
  })
})

//Watch tasks
gulp.task('watch', ['browserSync'], function (){
     //Reloads the browser whenever these files change
     gulp.watch('app/**/*.html', browserSync.reload);
     gulp.watch('app/**/*.css', browserSync.reload);
     gulp.watch('app/**/*.js', browserSync.reload);
})

Run to confirm:

$ gulp watch
//OR
$ ./node_modules/gulp/bin/gulp.js watch

Now, if you update any html, css or js file under app/ , the browser will automatically reload.

#Testing: Mocha and Chai

Install mocha and chai:

$npm install mocha chai --save-dev

I already have a basic test in app/test/test.js:

var mocha = require('mocha'),
chai = require('chai');

var expect = chai.expect;

describe("A basic test", function() {
  it('should pass when everything is okay', function() {
  expect(true).to.be.true;
  });
});

Run:

$ npm test
//NPM will run ./node_modules/mocha/bin/mocha which we already typed in our package.json

#Webpack:

Install webpack, css-loader and style-loader:

$ npm install --save-dev webpack
$ npm install --save-dev css-loader
$ npm install --save-dev style-loader

Create 'webpack.config.js' in 'basic_angular_app/' and paste this code:

var webpack = require('webpack');

var config = {
  context: __dirname + '/app',
  entry: './index.js',
  output: {
  path: __dirname + '/app',
  filename: 'bundle.js'
  },

  plugins: [
  new webpack.DefinePlugin({
  ON_TEST: process.env.NODE_ENV === 'test'
  })
  ],

  module: {
  loaders: [
  {test: /\.css$/, loader: 'style!css', exclude: /node_modules/},
  ]
  }
};

if (process.env.NODE_ENV === 'production') {
  config.output.path = __dirname + '/dist';
}

module.exports = config;

Create app/index.js and paste this:

//Including CSS
require ('./css/main.css');

//Including JS
require('./js/vendor/angular.min.js');

Remove this css and js include from index.html and replace it with

<script src="bundle.js"></script>

Run webpack to create a bundle:

$ webpack
//OR
$ ./node_modules/webpack/bin/webpack.js
//This will bundle CSS and JS mentioned in index.js following configuration in webpack.config.js

Check if everything loads correctly:

$ gulp watch
//OR
$ ./node_modules/gulp/bin/gulp.js watch

Later, you can minify, uglify etc those files and put it in production and integrate he task with gulp.

#Notification: Reference: http://sachinchoolur.github.io/angular-flash/

Include angular-flash CSS and JS in index.html

<link href="https://raw.githubusercontent.com/sachinchoolur/angular-flash/master/dist/angular-flash.css" rel="stylesheet" />

<script src="https://raw.githubusercontent.com/sachinchoolur/angular-flash/master/dist/angular-flash.min.js"></script>

Include 'ngFlash' as a dependency in app.js

var app=angular.module("BoltNetworkApp",['ngFlash','ui.router']);

Paste the FlashController in app.js

// Flash controller
app.controller('NotificationController', ['$rootScope', '$scope', 'Flash', '$timeout', function($rootScope, $scope, Flash, $timeout) {
  $scope.success = function() {
  var message = '<strong>Well done!</strong> You successfully read this important alert message.';
  Flash.create('success', message);
  };
  $scope.info = function() {
  var message = '<strong>Heads up!</strong> This alert needs your attention, but it\'s not super important.';
  Flash.create('info', message);
  };
  $scope.warning = function() {
  var message = '<strong>Warning!</strong> Better check yourself, you\'re not looking too good.';
  Flash.create('warning', message);
  };
  $scope.danger = function() {
  var message = '<strong>Oh snap!</strong> Change a few things up and try submitting again.';
  Flash.create('danger', message);
  };
}]);

This is the code to include flash message:

<div ng-controller="NotificationController">
  <flash-message duration="5000"></flash-message>
</div>

This is the code to trigger notifications:

<div ng-controller="NotificationController">
  <button class="btn btn-success" ng-click="success()">Success</button>
  <button class="btn btn-info" ng-click="info()">Info</button>
  <button class="btn btn-warning" ng-click="warning()">Warning</button>
  <button class="btn btn-danger" ng-click="danger()">Danger</button>
</div>

Update app/views/home.html:

<div class="main">
<div ng-controller="NotificationController">
<flash-message duration="5000"></flash-message>
</div>
  <div class="container">
  <div class="content" ng-repeat="program in programs">
<program-listing listing="program"></program-listing>
  <div ng-controller="NotificationController">
  <button class="btn btn-success" ng-click="success()">Success</button>
<button class="btn btn-info" ng-click="info()">Info</button>
<button class="btn btn-warning" ng-click="warning()">Warning</button>
<button class="btn btn-danger" ng-click="danger()">Danger</button>
</div>
  </div>
  </div>
</div>

Update app/views/about.html:

<div class="main">
<div ng-controller="NotificationController">
<flash-message duration="5000"></flash-message>
</div>
  <div class="container">
<h1>About Us</h1>
  <div ng-controller="NotificationController">
  <button class="btn btn-success" ng-click="success()">Success</button>
<button class="btn btn-info" ng-click="info()">Info</button>
<button class="btn btn-warning" ng-click="warning()">Warning</button>
<button class="btn btn-danger" ng-click="danger()">Danger</button>
</div>
</div>
</div>

Update app/views/pricing.html:

<div ng-controller="NotificationController">
<button class="btn btn-success" ng-click="success()">Success</button>
<button class="btn btn-info" ng-click="info()">Info</button>
<button class="btn btn-warning" ng-click="warning()">Warning</button>
<button class="btn btn-danger" ng-click="danger()">Danger</button>
</div>
<div class="main">
  <div class="container">
<h1>Pricing Page</h1>
</div>
<div ng-controller="NotificationController">
<flash-message duration="5000"></flash-message>
</div>
</div>

Later on, you can make a separate template for notification messages or include the html in the header template to avoid redundancy.

#End I have added a 'setup' branch with complete configuration that works for me.

Additionally, you can include 'angular-flash.min.js' and 'angular-ui-router.js' into index.js, so that webpack can take care of the includes.