Implement application decoupling

- Implements the application decoupling as discussed in #913.
- Excludes karma.conf.js, protractor.conf.js and test-main.js from the copy
build task, so that those files will not be copied over to /dist/** directory.
Furthermore also excludes the tsconfig.json from this copy process, as it was
copied over before too.
- Updates the protractor configuration and associated gulp task.
- Adds a e2e.singleRun gulp task to the gulpfile to leave the script
in the package.json more compact. Also updates the README to include
the new folder and file structure.

Author: TheDonDope

README.md

@@ -115,3 +115,11 @@ gulp.task('test', (done: any) =>
   runSequence('build.test',
               'karma.start',
               done));
+
+// --------------
+// E2E Test
+gulp.task('e2e.singleRun', (done: any) =>
+  runSequence('build.prod',
+              'build.js.e2e',
+              'e2e',
+              done));

gulpfile.ts

@@ -13,8 +13,9 @@
     "build.test": "gulp build.test --color",
     "build.test.watch": "gulp build.test.watch --color",
     "generate.manifest": "gulp generate.manifest --color",
-    "e2e": "protractor",
-    "e2e.live": "protractor --elementExplorer",
+    "e2e": "protractor src/browser/protractor.conf.js",
+    "e2e.live": "protractor src/browser/protractor.conf.js --elementExplorer",
+    "e2e.singleRun": "gulp e2e.singleRun --color",
     "gulp": "gulp",
     "karma": "karma",
     "karma.start": "karma start",
@@ -27,8 +28,7 @@
     "start": "gulp serve.dev --color",
     "tasks.list": "gulp --tasks-simple --color",
     "test": "gulp test --color",
-    "e2e.ci": "gulp build.prod --color && gulp build.js.e2e --color && gulp e2e --color",
-    "tests.all": "npm test && npm run e2e.ci",
+    "tests.all": "npm test && npm run e2e.singleRun",
     "webdriver-start": "webdriver-manager start",
     "webdriver-update": "webdriver-manager update"
   },

package.json

@@ -8,7 +8,7 @@ module.exports = function(config) {
   config.set({
 
     // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: './',
+    basePath: '../../',
 
 
     // frameworks to use
@@ -47,7 +47,7 @@ module.exports = function(config) {
       // suppress annoying 404 warnings for resources, images, etc.
       { pattern: 'dist/dev/assets/**/*', watched: false, included: false, served: true },
 
-      'test-main.js'
+      'src/browser/test-main.js'
     ],
 
     // must go along with above, suppress annoying 404 warnings.

src/client/app/+about/about.component.css renamed to src/browser/app/+about/about.component.css

@@ -2,7 +2,7 @@ const config = {
   baseUrl: 'http://localhost:5555/',
 
   specs: [
-    './dist/dev/**/*.e2e-spec.js'
+    '../../dist/dev/**/*.e2e-spec.js'
   ],
 
   exclude: [],

src/client/app/+about/about.component.e2e-spec.ts renamed to src/browser/app/+about/about.component.e2e-spec.ts

@@ -102,11 +102,11 @@ export class SeedConfig {
   BOOTSTRAP_DIR = 'app';
 
   /**
-   * The directory where the client files are located.
-   * The default directory is `client`.
+   * The directory where the browser files are located.
+   * The default directory is `browser`.
    * @type {string}
    */
-  APP_CLIENT = argv['client'] || 'client';
+  APP_BROWSER = argv['browser'] || 'browser';
 
   /**
    * The bootstrap file to be used to boot the application. The file to be used is dependent if the hot-loader option is
@@ -128,7 +128,7 @@ export class SeedConfig {
    * The base folder of the applications source files.
    * @type {string}
    */
-  APP_SRC = `src/${this.APP_CLIENT}`;
+  APP_SRC = `src/${this.APP_BROWSER}`;
 
   /**
    * The folder of the applications asset files.

src/client/app/+about/about.component.html renamed to src/browser/app/+about/about.component.html

@@ -11,7 +11,9 @@ export = () => {
   let paths: string[] = [
     join(APP_SRC, '**'),
     '!' + join(APP_SRC, '**', '*.ts'),
-    '!' + join(APP_SRC, '**', '*.scss')
+    '!' + join(APP_SRC, '**', '*.scss'),
+    '!' + join(APP_SRC, '*.js'), // Do not copy `karma.conf.js`, `protractor.conf.js`, `test-main.js`
+    '!' + join(APP_SRC, '*.json') // Do not copy `tsconfig.json`
   ].concat(TEMP_FILES.map((p) => { return '!' + p; }));
 
   return gulp.src(paths)

src/client/app/+about/about.component.spec.ts renamed to src/browser/app/+about/about.component.spec.ts

@@ -26,6 +26,8 @@ export = () => {
     '!' + join(APP_SRC, '**', '*.css'),
     '!' + join(APP_SRC, '**', '*.html'),
     '!' + join(APP_SRC, '**', '*.scss'),
+    '!' + join(APP_SRC, '*.js'), // Do not copy `karma.conf.js`, `protractor.conf.js`, `test-main.js`
+    '!' + join(APP_SRC, '*.json'), // Do not copy `tsconfig.json`
     '!' + join(ASSETS_SRC, '**', '*.js')
   ].concat(TEMP_FILES.map((p) => { return '!' + p; })))
     .pipe(onlyDirs(es))

src/client/app/+about/about.component.ts renamed to src/browser/app/+about/about.component.ts

@@ -1,6 +1,10 @@
 import * as express from 'express';
 import * as gulp from 'gulp';
 import { protractor } from 'gulp-protractor';
+import { join } from 'path';
+
+import { APP_SRC } from '../../config';
+
 
 class Protractor {
   server(port: number, dir: string) {
@@ -23,7 +27,7 @@ export = (done: any) => {
     .then((server: any) => {
       gulp
         .src('./dist/dev/**/*.e2e-spec.js')
-        .pipe(protractor({ configFile: 'protractor.conf.js' }))
+        .pipe(protractor({ configFile: join(process.cwd(), APP_SRC, 'protractor.conf.js') }))
         .on('error', (error: string) => { throw error; })
         .on('end', () => { server.close(done); });
     });

src/client/app/+about/index.ts renamed to src/browser/app/+about/index.ts

@@ -1,12 +1,14 @@
 import * as karma from 'karma';
 import { join } from 'path';
 
+import { APP_SRC } from '../../config';
+
 /**
  * Executes the build process, running all unit tests using `karma`.
  */
 export = (done: any) => {
   new (<any>karma).Server({
-    configFile: join(process.cwd(), 'karma.conf.js'),
+    configFile: join(process.cwd(), APP_SRC, 'karma.conf.js'),
     singleRun: true
   }).start(done);
 };