Node back-end support added

Author: rkazakov

README.md

@@ -42,6 +42,8 @@ npm start
 
 ## Release History
 
+* 0.1.2
+    * Back-end Node support added
 * 0.1.1
     * Folder structure changed
 * 0.1.0

app/app.component.js.map

@@ -0,0 +1,13 @@
+var locallydb = require('locallydb');
+
+var db = new locallydb('db');
+var collection = db.collection('testcollection');
+
+if (collection.items.length === 0)
+{
+  collection.insert([
+    {key: "value"}
+  ]);
+}
+
+//console.log(collection.items.length);

app/vendor.min.js

@@ -0,0 +1 @@
+{"header":{"$created":"2016-04-12T23:55:31.215Z","$updated":"2016-04-12T23:55:31.215Z","lcid":-1},"items":[]}

db/seed.js

@@ -1,65 +1,127 @@
 var gulp = require('gulp');
 
+/* DEV FOLDERS */
 var appDev = 'src/';
 var assetsDev = 'assets/';
 
+/* PROD FOLDERS */
 var appProd = 'app/';
 var assetsProd = 'app/assets/';
 
-/* Mixed */
-var ext_replace = require('gulp-ext-replace');
+var BROWSER_SYNC_RELOAD_DELAY = 500;
 
-/* CSS */
-var postcss = require('gulp-postcss');
-var sourcemaps = require('gulp-sourcemaps');
-var autoprefixer = require('autoprefixer');
-var precss = require('precss');
-var cssnano = require('cssnano');
-
-/* JS & TS */
-var jsuglify = require('gulp-uglify');
-var typescript = require('gulp-typescript');
-
-/* Images */
-var imagemin = require('gulp-imagemin');
+var ext_replace = require('gulp-ext-replace'),
+  postcss = require('gulp-postcss'),
+  sourcemaps = require('gulp-sourcemaps'),
+  autoprefixer = require('autoprefixer'),
+  precss = require('precss'),
+  cssnano = require('cssnano'),
+  concat = require('gulp-concat'),
+  rename = require('gulp-rename'),
+  uglify = require('gulp-uglify'),
+  typescript = require('gulp-typescript'),
+  imagemin = require('gulp-imagemin'),
+  nodemon = require('gulp-nodemon'),
+  browserSync = require('browser-sync');
 
 var tsProject = typescript.createProject('tsconfig.json');
 
-gulp.task('build-css', function () {
-    return gulp.src(assetsDev + 'scss/*.scss')
-        .pipe(sourcemaps.init())
-        .pipe(postcss([precss, autoprefixer, cssnano]))
-        .pipe(sourcemaps.write())
-        .pipe(ext_replace('.css'))
-        .pipe(gulp.dest(assetsProd + 'css/'));
+gulp.task('build-vendor', function() {
+  return gulp.src([
+    /* AnguLAR 2 required libraries */
+    /* IE required polyfills, in this exact order */
+    'node_modules/es6-shim/es6-shim.min.js',
+    'node_modules/systemjs/dist/system-polyfills.js',
+    'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
+    'node_modules/angular2/bundles/angular2-polyfills.js',
+    'node_modules/systemjs/dist/system.src.js',
+    'node_modules/rxjs/bundles/Rx.js',
+    'node_modules/angular2/bundles/angular2.js',
+    'node_modules/angular2/bundles/router.dev.js',
+    'node_modules/angular2/bundles/http.js'
+  ])
+  .pipe(concat('vendor.js'))
+  .pipe(rename({suffix: '.min'}))
+  .pipe(uglify())
+  .pipe(gulp.dest('app/'));
 });
 
 gulp.task('build-ts', function () {
-    return gulp.src(appDev + '**/*.ts')
-        .pipe(sourcemaps.init())
-        .pipe(typescript(tsProject))
-        .pipe(sourcemaps.write())
-        //.pipe(jsuglify())
-        .pipe(gulp.dest(appProd));
+  return gulp.src(appDev + '**/*.ts')
+    .pipe(sourcemaps.init())
+    .pipe(typescript(tsProject))
+    .pipe(sourcemaps.write())
+    //.pipe(jsuglify())
+    .pipe(gulp.dest(appProd));
+});
+
+gulp.task('build-css', function () {
+  return gulp.src(assetsDev + 'scss/*.scss')
+    .pipe(sourcemaps.init())
+    .pipe(postcss([precss, autoprefixer, cssnano]))
+    .pipe(sourcemaps.write())
+    .pipe(ext_replace('.css'))
+    .pipe(gulp.dest(assetsProd + 'css/'));
 });
 
 gulp.task('build-img', function () {
-    return gulp.src(assetsDev + 'img/**/*')
-        .pipe(imagemin({
-            progressive: true
-        }))
-        .pipe(gulp.dest(assetsProd + 'img/'));
+  return gulp.src(assetsDev + 'img/**/*')
+    .pipe(imagemin({
+        progressive: true
+    }))
+    .pipe(gulp.dest(assetsProd + 'img/'));
 });
 
 gulp.task('build-html', function () {
-    return gulp.src(appDev + '**/*.html')
-        .pipe(gulp.dest(appProd));
+  return gulp.src(appDev + '**/*.html')
+    .pipe(gulp.dest(appProd));
+});
+
+gulp.task('nodemon', function(cb) {
+  var called = false;
+  return nodemon({
+    // nodemon our expressjs server
+    script: 'server.js',
+    // watch core server file(s) that require server restart on change
+    watch: ['server.js', 'server/**/*.js']
+  })
+  .on('start', function onStart() {
+    // ensure start only got called once
+    if (!called) { cb(); }
+    called = true;
+  })
+  .on('restart', function onRestart() {
+    // reload connected browsers after a slight delay
+    setTimeout(function reload() {
+      browserSync.reload({
+        stream: false
+      });
+    }, BROWSER_SYNC_RELOAD_DELAY);
+  });
+});
+
+gulp.task('browser-sync', ['nodemon'], function() {
+  // for more browser-sync config options: http://www.browsersync.io/docs/options/
+  browserSync({
+    // informs browser-sync to proxy our expressjs app which would run at the following location
+    proxy: 'http://localhost:3001',
+    // informs browser-sync to use the following port for the proxied app
+    // notice that the default port is 3000, which would clash with our expressjs
+    port: 4000,
+    // open the proxied app in chrome
+    browser: 'google chrome'
+  });
+});
+
+gulp.task('bs-reload', function() {
+  browserSync.reload();
 });
 
 gulp.task('watch', function () {
-    gulp.watch(appDev + '**/*.ts', ['build-ts']);
-    gulp.watch(assetsDev + 'scss/**/*.scss', ['build-css']);
-    gulp.watch(assetsDev + 'img/*', ['build-img']);
+  gulp.watch(appDev + '**/*.ts', ['build-ts', browserSync.reload]);
+  gulp.watch(assetsDev + 'scss/**/*.scss', ['build-css', browserSync.reload]);
+  gulp.watch(assetsDev + 'img/*', ['build-img', browserSync.reload]);
+  gulp.watch('*.html', ['bs-reload']);
 });
 
-gulp.task('default', ['watch', 'build-ts', 'build-css']);
+gulp.task('default', ['build-vendor', 'watch', 'build-ts', 'build-css', 'browser-sync']);

db/testcollection

@@ -1,37 +1,24 @@
 <!doctype>
 <html>
-<head>
+  <head>
     <base href="/">
     <title>Angular 2 boilerplate</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!-- Load libraries -->
-    <!-- IE required polyfills, in this exact order -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
-    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
-    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
-    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-    <script src="node_modules/rxjs/bundles/Rx.js"></script>
-    <script src="node_modules/angular2/bundles/angular2.js"></script>
-    <script src="node_modules/angular2/bundles/router.dev.js"></script>
-    <script src="node_modules/angular2/bundles/http.js"></script>
-
+    <script src="app/vendor.min.js"></script>
     <link rel="stylesheet" href="app/assets/css/app.css">
-</head>
-<body>
-<my-app>Loading...</my-app>
-
-<script>
-    System.config({
-        packages: {
+  </head>
+  <body>
+    <my-app>Loading...</my-app>
+    <script>
+        System.config({
+          packages: {
             app: {
-                format: 'register',
-                defaultExtension: 'js'
+              format: 'register',
+              defaultExtension: 'js'
             }
-        }
-    });
-    System.import('app/main')
-        .then(null, console.error.bind(console));
-</script>
-</body>
+          }
+        });
+        System.import('app/main').then(null, console.error.bind(console));
+    </script>
+  </body>
 </html>

gulpfile.js

@@ -1,6 +1,6 @@
 {
   "name": "angular2-gulp-browserify-boilerplate",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Angular 2, Express, Gulp, Browserify and SASS/Stylus boilerplate",
   "scripts": {
     "lite": "lite-server",
@@ -14,25 +14,30 @@
   "author": "Ruslan Kazakov",
   "license": "MIT",
   "dependencies": {
-  	"express": "^4.13.3",
-  	"angular2": "2.0.0-beta.14",
-    "systemjs": "0.19.25",
+    "angular2": "2.0.0-beta.14",
     "es6-shim": "^0.35.0",
+    "express": "^4.13.3",
+    "locallydb": "0.0.9",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.2",
+    "systemjs": "0.19.25",
     "zone.js": "0.6.6"
   },
   "devDependencies": {
     "autoprefixer": "^6.3.5",
-    "cssnano": "^3.4.0",
+    "browser-sync": "^2.12.3",
     "concurrently": "^2.0.0",
+    "cssnano": "^3.4.0",
     "gulp": "^3.9.0",
+    "gulp-concat": "^2.6.0",
     "gulp-ext-replace": "^0.2.0",
     "gulp-imagemin": "^2.4.0",
+    "gulp-nodemon": "^2.0.6",
     "gulp-postcss": "^6.0.1",
+    "gulp-rename": "^1.2.2",
     "gulp-sourcemaps": "^1.6.0",
     "gulp-typescript": "^2.10.0",
-    "gulp-uglify": "^1.5.1",
+    "gulp-uglify": "^1.5.3",
     "lite-server": "^2.1.0",
     "postcss": "^5.0.13",
     "postcss-scss": "^0.1.3",

index.html

@@ -0,0 +1,21 @@
+var express = require('express');
+var path = require('path');
+var app = express();
+var router = require('./server/router');
+
+app.get('/', function (req, res) {
+  res.sendFile(path.join(__dirname + '/index.html'));
+});
+
+app.use(router);
+
+app.use('/app', express.static(__dirname + '/app'));
+
+// app.set('views', __dirname + '/server/views');
+// app.set('view engine', 'ejs');
+// app.engine('html', require('ejs').renderFile);
+
+var server = app.listen(3001, function () {
+  var host = server.address().address;
+  var port = server.address().port;
+});

package.json

@@ -0,0 +1,15 @@
+var locallydb = require('locallydb');
+var db = new locallydb('db');
+var collection = db.collection('testcollection');
+
+var router = module.exports = require('express').Router();
+
+router
+  .get('/', function (req, res, next) {
+    res.writeHead(200);
+    res.end();
+  })
+  .get('/healthcheck', function (req, res, next) {
+    res.writeHead(200);
+    res.end();
+  });