kmc-ng shell scaffold with webpack, typescript, bootstrap and some mo…

…re essential libraries (#1)

- Initial KMC-ng shell. Angular2(.rc4) based technology. 
- webpack based module loader
- KMC-ng bootstrap vanilla theme support (using scss version)
- Kaltura projects licensing AGPL3
- The 'dashboard' and 'content' kmc-apps show stub layout
- The 'studio' kmc-app
  - Demonstrates an hosted application 
  - Expects nginx configuration to proxy any calls for 'player-studio' to local repository of [player-studio](https://github.com/kaltura/player-studio).     

### Known issues
- The upper menu content is static and not loaded dynamically from a dedicated file.
- The 'studio' kmc-app gets a mock data from the kmc-ng shell including expired ks. To make it work you need to provide valid KS by modifying file `src/app/kmc-apps/studio-app/universal-studio/universal-studio.component.ts`.

.editorconfig

@@ -0,0 +1,13 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

@@ -1 +1,55 @@
-.idea
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Users Environment Variables
+.lock-wscript
+
+# OS generated files #
+.DS_Store
+ehthumbs.db
+Icon?
+Thumbs.db
+
+# Node Files #
+/node_modules
+/bower_components
+
+# Coverage #
+/coverage/
+
+# Typing #
+/src/typings/tsd/
+/typings/
+/tsd_typings/
+
+# Dist #
+/dist
+/public/__build__/
+/src/*/__build__/
+__build__/**
+.webpack.json
+
+# Doc #
+/doc/
+
+# IDE #
+.idea/
+*.swp

CHANGELOG.md

@@ -0,0 +1,16 @@
+# Changelog
+
+## 2 Aug 2016
+
+- Initial KMC-ng shell. Angular2(.rc4) based technology. 
+- webpack based module loader
+- KMC-ng bootstrap vanilla theme support (using scss version)
+- Kaltura projects licensing AGPL3
+- The 'dashboard' and 'content' kmc-apps show stub layout
+- The 'studio' kmc-app
+  - Demonstrates an hosted application 
+  - Expects nginx configuration to proxy any calls for 'player-studio' to local repository of [player-studio](https://github.com/kaltura/player-studio).     
+
+### Known issues
+- The upper menu content is static and not loaded dynamically from a dedicated file.
+- The 'studio' kmc-app gets a mock data from the kmc-ng shell including expired ks. To make it work you need to provide valid KS by modifying file `src/app/kmc-apps/studio-app/universal-studio/universal-studio.component.ts`.

README.md

@@ -1 +1,160 @@
-# KMCng
+# KMC-ng Application
+
+> Kaltura management console HTML5 based applciation (a.k.a KMC-ng).
+  
+KMC-ng application uses the following technologies: 
+* Best practices in file and application organization for [Angular 2](https://angular.io/).
+* Ready to go build system using [Webpack](https://webpack.github.io/docs/) for working with [TypeScript](http://www.typescriptlang.org/).
+* Testing Angular 2 code with [Jasmine](http://jasmine.github.io/) and [Karma](http://karma-runner.github.io/).
+* Coverage with [Istanbul](https://github.com/gotwarlost/istanbul)
+* End-to-end Angular 2 code using [Protractor](https://angular.github.io/protractor/).
+* Stylesheets with [SASS](http://sass-lang.com/) (not required, it supports regular css too).
+* Error reported with [TSLint](http://palantir.github.io/tslint/) and [Codelyzer](https://github.com/mgechev/codelyzer).
+* Documentation with [TypeDoc](http://typedoc.io/).
+
+
+## Quick start
+
+> Clone/Download the repo then edit `app.ts` inside [`/src/app/app.component.ts`](/src/app/app.component.ts)
+
+```bash
+# clone our repo
+$ git clone https://github.com/kaltura/KMCng.git kmc-ng
+
+# change directory to your app
+$ cd kmc-ng
+
+# install the dependencies with npm
+$ npm install
+
+# start the server
+$ npm start
+```
+go to [http://localhost:8080](http://localhost:8080) in your browser.
+
+# Table of Contents
+
+* [Getting Started](#getting-started)
+    * [Dependencies](#dependencies)
+    * [Installing](#installing)
+    * [Running the app](#running-the-app)
+    * [Developing](#developing)
+    * [Testing](#testing)
+    * [Documentation](#documentation)
+* [Frequently asked questions](#faq)
+* [License](#license)
+
+# Getting Started
+
+## Prerequisites
+
+Install [Node.js and npm](https://nodejs.org/en/download/) if they are not already on your machine
+
+> Verify that you are running at least node v4.x.x and npm 3.x.x by running `node -v` and `npm -v` in a terminal/console window. 
+
+## Installing
+
+* `fork` this repo
+* `clone` your fork
+* `npm install` to install all dependencies
+
+## Running the app
+
+After you have installed all dependencies you can now run the app with:
+
+```bash
+npm start
+```
+
+It will start a local server using `webpack-dev-server` which will watch, build (in-memory), and reload for you. The port will be displayed to you as `http://localhost:8080`.
+
+## Developing
+
+### Build files
+
+This section will be update soon.
+
+## Testing
+
+This section will be update soon.
+
+## Documentation
+
+This section will be update soon.
+
+# Hosted applications
+- KMC-ng was built as a 'shell' that host mini applications (a.k.a kmc-apps) based on context. 
+- Developers can easily build kmc-app and register them into the KMC-ng shell and benefit its features and services such as user-context, permission concepts, i18n, caching, lazy loading etc.
+- To provide flexible platform each kmc-app is self-sufficient and is not aware/dependent on others.
+- KMC-app is however depend on the KMC-ng shell and thus should be hosted in the same sub-domain. 
+
+We are using nginx during the developement process to simulate one sub-domain of multiple repositories.
+
+## Setup nginx on your machine
+To install nginx using homebrew read the following [article](http://learnaholic.me/2012/10/10/installing-nginx-in-mac-os-x-mountain-lion/).
+
+Update nginx configuration file (usually at ```/usr/local/etc/nginx/nginx.conf```) with the following server:
+
+```bash
+ server {
+    listen       1234;
+    server_name  localhost;
+
+    # access_log  /var/log/nginx_access.log;
+
+    # This is the default location that exposes the KMC-ng application served at 8080
+    location /{
+        proxy_pass   http://localhost:8080;
+    }
+ }
+```
+
+## Setup new KMC-App on your machine
+1. Clone the KMC-App you want to develop
+
+Update nginx configuration file:
+* add the following inside the server node we created in previous step.
+* Append it **above** the default location.
+
+```bash
+    location /{the relative url of that application}/ {
+        alias {the path to the kmc-app repository code/dist folder};
+    }
+```
+
+For example, for the player-studio kmc-app the configuration should resemble the following:
+```bash
+    location /player-studio/ {
+        alias /Users/eransakal/dev/github/kaltura/player-studio/player-studio/app/;
+    }
+```
+
+> You will need to signal nginx to refresh nginx by running ```sudo nginx -s reload```
+
+# FAQ
+
+#### Do I need to add script / link tags into index.html ?
+
+No, Webpack will add all the needed Javascript bundles as script tags and all the CSS files as link tags. The advantage is that you don't need to modify the index.html every time you build your solution to update the hashes.
+
+#### How to include external angular 2 libraries ?
+
+It's simple, just install the lib via npm and import it in your code when you need it. Don't forget that you need to configure some external libs in the `src/main` bootstrap] of your application.
+
+### How to include external css files such as bootstrap.css ?
+
+Just install the lib and import the css files in `src/vendor.ts`. For example this is how to do it with bootstrap:
+
+```sh
+npm install [email protected] --save
+```
+
+And in `src/vendor.ts` add the following:
+
+```ts
+import 'bootstrap/dist/css/bootstrap.css';
+```
+
+# License
+
+[AGPL3](/LICENSE)

karma-shim.js

@@ -0,0 +1,36 @@
+Error.stackTraceLimit = Infinity;
+
+require('es6-shim');
+require('reflect-metadata');
+
+require('ts-helpers');
+
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
+
+/*
+ Ok, this is kinda crazy. We can use the the context method on
+ require that webpack created in order to tell webpack
+ what files we actually want to require or import.
+ Below, context will be a function/object with file names as keys.
+ using that regex we are saying look in client/app and find
+ any file that ends with '.spec.ts' and get its path. By passing in true
+ we say do this recursively
+ */
+var appContext = require.context('./src', true, /\.spec\.ts/);
+
+// get all the files, for each file, call the context function
+// that will require the file and load it up here. Context will
+// loop and require those spec files here
+appContext.keys().forEach(appContext);
+
+// Select BrowserDomAdapter.
+// see https://github.com/AngularClass/angular2-webpack-starter/issues/124
+// Somewhere in the test setup
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
+
+testing.setBaseTestProviders(browser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, browser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);

karma.conf.js

@@ -0,0 +1,91 @@
+var path = require('path');
+
+var webpackConfig = require('./webpack.config');
+
+module.exports = function (config) {
+  var _config = {
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['jasmine'],
+
+    // list of files / patterns to load in the browser
+    files: [
+      { pattern: './karma-shim.js', watched: false }
+    ],
+
+    // list of files to exclude
+    exclude: [],
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+      './karma-shim.js': ['webpack', 'sourcemap']
+    },
+
+    webpack: webpackConfig,
+
+    webpackMiddleware: {
+      // webpack-dev-middleware configuration
+      // i. e.
+      stats: 'errors-only'
+    },
+
+    coverageReporter: {
+      dir: 'coverage/',
+      reporters: [{
+        type: 'json',
+        dir: 'coverage',
+        subdir: 'json',
+        file: 'coverage-final.json'
+      }]
+    },
+
+    remapIstanbulReporter: {
+      src: 'coverage/json/coverage-final.json',
+      reports: {
+        lcovonly: 'coverage/json/lcov.info',
+        html: 'coverage/html',
+        'text': null
+      },
+      timeoutNotCreated: 1000, // default value
+      timeoutNoMoreFiles: 1000 // default value
+    },
+
+    webpackServer: {
+      noInfo: true // please don't spam the console when running in karma!
+    },
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress', 'mocha'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ["mocha", "coverage", "karma-remap-istanbul"],
+
+    // web server port
+    port: 9876,
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: false,
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['PhantomJS'], // you can also use Chrome
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true
+  };
+
+  config.set(_config);
+
+};