Major changes: Use gulp to build files and start server + cleanup pac…

…kages + use babel for ES6

.babelrc

@@ -0,0 +1,4 @@
+{
+  "plugins": ["transform-runtime"],
+  "presets": ["es2015", "stage-0"]
+}

.gitignore

@@ -1,3 +1,5 @@
 /nbproject/
 /node_modules/
-/dist/
+/build/
+!/build/jquery-1.6.2.min.js
+!/build/jquery.event.drag-2.0.js

app.js

@@ -13,7 +13,7 @@ const app = express();
 const server = http.createServer(app);
 const io = require('socket.io').listen(server);
 
-app.set('views', path.join(__dirname, 'views'));
+//app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'ejs');
 
 server.listen(8085, function () {
@@ -27,13 +27,14 @@ app.use(logger('dev'));
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({extended: false}));
 app.use(cookieParser());
-app.use(express.static(path.join(__dirname, 'public')));
+//app.use(express.static(path.join(__dirname, 'public')));
+//app.use(express.static('./views/'));
+//app.use('/*', express.static('./views/index.ejs'));
 
 app.use('/', routes);
 app.use('/users', users);
 
 
-
 io.on('connection', function (socket) {
     socket.emit('test', 'Connectedddd');
     socket.on('drawClick', function (data) {

gulpfile.babel.js

@@ -0,0 +1,112 @@
+'use strict';
+import gulp from 'gulp';
+import nodemon from 'gulp-nodemon';
+import browserSync from 'browser-sync';
+import del from 'del';
+import source from 'vinyl-source-stream';
+import browserify from 'browserify';
+import babelify from 'babelify';
+import ngAnnotate from 'browserify-ngannotate';
+import templateCache from 'gulp-angular-templatecache';
+import rename from 'gulp-rename';
+import notify from 'gulp-notify';
+import ejs from 'gulp-ejs';
+import htmlreplace from 'gulp-html-replace';
+import concat from 'gulp-concat';
+import minifyCSS from 'gulp-minify-css';
+
+// Where our files are located
+var jsFiles = "public/assets/javascripts/*.js";
+var viewFiles = "views/*.ejs";
+
+var interceptErrors = function (error) {
+    var args = Array.prototype.slice.call(arguments);
+
+    // Send error to notification center with gulp-notify
+    notify.onError({
+        title: 'Compile Error',
+        message: '<%= error.message %>'
+    }).apply(this, args);
+
+    // Keep gulp from hanging on this task
+    this.emit('end');
+};
+
+gulp.task('default', ['build', 'browser-sync'], function () {
+    gulp.watch(['./views/**.**', './public/**/*'], ['build']);
+    gulp.watch('./build/', browserSync.reload());
+});
+
+gulp.task('browser-sync', ['nodemon'], function () {
+    browserSync.init(['./build/**.**'], {
+        port: 8080,
+        serveStatic: ['./build/'],
+        proxy: {
+            target: 'localhost:8085', // original port
+            ws: true // enables websockets
+        }
+    });
+});
+
+gulp.task('nodemon', (cb) => {
+    var started = false;
+
+    return nodemon({
+        script: 'app.js'
+    }).on('start', function () {
+        if (!started) {
+            cb();
+            started = true;
+        }
+    });
+});
+
+gulp.task('build', ['browserify', 'css'], () => {
+    gulp.start('html');
+    //gulp.start() will have to be replaced by gulp.series() when gulp 4.0 is released.
+});
+
+gulp.task('browserify', ['views'], function () {
+    return browserify(['./public/assets/javascripts/main.js'])
+            .transform(babelify, {presets: ["es2015"]})
+            .transform(ngAnnotate)
+            .bundle()
+            .on('error', interceptErrors)
+            .pipe(source('main.js'))
+            .pipe(gulp.dest('./build/'));
+});
+
+gulp.task('views', function () {
+    return gulp.src(viewFiles)
+            .pipe(templateCache({
+                standalone: true
+            }))
+            .on('error', interceptErrors)
+            .pipe(rename("app.templates.js"))
+            .pipe(gulp.dest('./public/config/'));
+});
+
+gulp.task('css', function () {
+    gulp.src('./public/assets/stylesheets/*.css')
+            .pipe(minifyCSS())
+            .pipe(concat('style.css'))
+            .on('error', interceptErrors)
+            .pipe(gulp.dest('./build'))
+});
+
+gulp.task('html', function () {
+    return gulp.src("./views/index.ejs")
+            .pipe(ejs({}, {ext: '.html'}))
+            .pipe(htmlreplace({
+                css: 'style.css',
+                js: 'main.js'
+            }))
+            .on('error', interceptErrors)
+            .pipe(gulp.dest('./build/'));
+});
+
+gulp.task('clean', () => {
+    del(['./build/**', '!./build', '!./build/jquery-1.6.2.min.js', '!./build/jquery.event.drag-2.0.js', '!./build/socket.io.js']).then(paths => {
+        console.log('Deleted files and folders:\n', paths.join('\n'));
+    });
+});

package.json

@@ -18,23 +18,40 @@
   },
   "homepage": "https://github.com/gevalo1/WebApps3#readme",
   "devDependencies": {
+    "babel-core": "^6.18.2",
+    "babel-loader": "^6.2.7",
+    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-polyfill": "^6.16.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-stage-0": "^6.16.0",
+    "babelify": "^7.3.0",
+    "browser-sync": "^2.17.5",
+    "browserify": "^13.1.1",
+    "browserify-ngannotate": "^2.0.0",
     "del": "^2.2.2",
     "eslint": "^3.9.0",
     "eslint-config-standard": "^6.2.1",
     "eslint-plugin-promise": "^3.3.0",
     "eslint-plugin-standard": "^2.0.1",
     "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.1",
+    "gulp-angular-templatecache": "^2.0.0",
     "gulp-concat": "^2.6.0",
-    "gulp-cssnano": "^2.1.2",
-    "gulp-livereload": "^3.8.1",
-    "gulp-load-plugins": "^1.3.0",
-    "gulp-rename": "^1.2.2"
+    "gulp-ejs": "^2.2.1",
+    "gulp-html-replace": "^1.6.1",
+    "gulp-minify-css": "^1.2.4",
+    "gulp-nodemon": "^2.2.1",
+    "gulp-notify": "^2.2.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-uglify": "^2.0.0",
+    "vinyl-source-stream": "^1.1.0"
   },
   "dependencies": {
-    "ejs": "2.5.2",
+    "angular": "^1.5.8",
+    "angular-ui-router": "^0.3.1",
+    "babel-runtime": "^6.18.0",
     "body-parser": "1.15.2",
     "cookie-parser": "1.4.3",
+    "ejs": "2.5.2",
     "express": "4.14.0",
     "morgan": "1.7.0",
     "serve-favicon": "2.3.0",

public/app.js

@@ -0,0 +1,34 @@
+import angular from 'angular';
+
+// Import our app config files
+import constants  from './config/app.constants';
+import appConfig  from './config/app.config';
+import appRun     from './config/app.run';
+import 'angular-ui-router';
+// Import our templates file (generated by Gulp)
+import './config/app.templates';
+// Import our app functionaity
+import './components';
+import './services';
+import './auth';
+
+
+// Create and bootstrap application
+const requires = [
+    'app.components',
+    'app.services',
+    'app.auth',
+];
+
+// Mount on window for testing
+window.app = angular.module('app', requires);
+
+angular.module('app').constant('AppConstants', constants);
+
+angular.module('app').config(appConfig);
+
+angular.module('app').run(appRun);
+
+angular.bootstrap(document, ['app'], {
+    strictDi: true
+});

public/app/auth/auth.config.js

@@ -0,0 +1,33 @@
+function AuthConfig($stateProvider, $httpProvider) {
+  'ngInject';
+
+  // Define the routes
+  $stateProvider
+
+  .state('app.login', {
+    url: '/login',
+	controller: 'AuthCtrl as $ctrl',
+    templateUrl: 'auth/auth.html',
+    title: 'Sign in',
+	resolve: {
+		auth: function(User) {
+			return User.ensureAuthIs(false);
+		}
+	}
+  })
+
+  .state('app.register', {
+    url: '/register',
+	controller: 'AuthCtrl as $ctrl',
+    templateUrl: 'auth/auth.html',
+    title: 'Sign up',
+	resolve: {
+		auth: function(User) {
+			return User.ensureAuthIs(false);
+		}
+	}
+  });
+
+};
+
+export default AuthConfig;

public/app/auth/auth.controller.js

@@ -0,0 +1,27 @@
+class AuthCtrl {
+	constructor(User, $state) {
+		'ngInject';
+
+		this._User = User;
+		this._$state = $state;
+
+		this.title = $state.current.title;
+		this.authType = $state.current.name.replace('app.', '');
+	}
+
+	submitForm() {
+		this.isSubmitting = true;
+
+		this._User.attemptAuth(this.authType, this.formData).then(
+			(res) => {
+				this._$state.go('app.home');
+			},
+			(err) => {
+				this.isSubmitting = false;
+				this.errors = err.data.errors;
+			}
+		);
+	}
+}
+
+export default AuthCtrl;

public/app/auth/auth.html

@@ -0,0 +1,52 @@
+<div class="auth-page">
+  <div class="container page">
+    <div class="row">
+
+      <div class="col-md-6 offset-md-3 col-xs-12">
+        <h1 class="text-xs-center" ng-bind="::$ctrl.title"></h1>
+        <p class="text-xs-center">
+          <a ui-sref="app.login" ng-show="$ctrl.authType === 'register'">
+            Have an account?
+          </a>
+		  <a ui-sref="app.register" ng-show="$ctrl.authType === 'login'">
+            Need an account?
+          </a>
+        </p>
+
+		<list-errors errors="$ctrl.errors"></list-errors>
+
+        <form ng-submit="$ctrl.submitForm()">
+          <fieldset ng-disabled="$ctrl.isSubmitting">
+
+            <fieldset class="form-group" ng-show="$ctrl.authType === 'register'">
+              <input class="form-control form-control-lg"
+                type="text"
+                placeholder="Username"
+                ng-model="$ctrl.formData.username" />
+            </fieldset>
+
+            <fieldset class="form-group">
+              <input class="form-control form-control-lg"
+                type="email"
+                placeholder="Email"
+                ng-model="$ctrl.formData.email" />
+            </fieldset>
+
+            <fieldset class="form-group">
+              <input class="form-control form-control-lg"
+                type="password"
+                placeholder="Password"
+                ng-model="$ctrl.formData.password" />
+            </fieldset>
+
+            <button class="btn btn-lg btn-primary pull-xs-right"
+              type="submit" ng-bind="$ctrl.title">
+            </button>
+
+          </fieldset>
+        </form>
+      </div>
+
+    </div>
+  </div>
+</div>