creating project structure

.gitignore

@@ -4,6 +4,8 @@ node_modules/
 typings/
 frontend/*/*.js
 frontend/*/*.js.map
+frontend/*.js
+frontend/*.js.map
 backend/*/*.js
 backend/*/*.js.map
 backend/*.js

backend/server.ts

@@ -4,101 +4,110 @@ import * as _express from 'express';
 import * as _debug from 'debug';
 import * as _http from 'http';
 
-var debug = _debug("PiGallery2:server");
-var app = _express();
+
+export class Server {
+
+    private debug:any;
+    private app:any;
+    private server:any;
+    private port:number;
+
+    constructor(){
+
+        this.debug = _debug("PiGallery2:server");
+        this.app = _express();
+
+        if(process.env.DEBUG) {
+            var _morgan = require('morgan');
+            this.app.use(_morgan('dev'));
+        }
+
+
+        this.app.use(_express.static(__dirname +'./../frontend'));
+        this.app.use('/node_modules',_express.static(__dirname +'./../node_modules'));
+
+
+
+        // Get port from environment and store in Express.
+        this.port = Server.normalizePort(process.env.PORT || '80');
+        this.app.set('port', this.port);
+
+        // Create HTTP server.
+        this.server = _http.createServer(this.app);
+
+        //Listen on provided port, on all network interfaces.
+        this.server.listen(this.port);
+        this.server.on('error', this.onError);
+        this.server.on('listening', this.onListening);
+
+
+    }
+
+
+    /**
+     * Normalize a port into a number, string, or false.
+     */
+    private static normalizePort(val) {
+        var port = parseInt(val, 10);
+
+        if (isNaN(port)) {
+            // named pipe
+            return val;
+        }
+
+        if (port >= 0) {
+            // port number
+            return port;
+        }
+
+        return false;
+    }
+
+    /**
+     * Event listener for HTTP server "error" event.
+     */
+    private onError = (error) => {
+        if (error.syscall !== 'listen') {
+            throw error;
+        }
+
+        var bind = typeof this.port === 'string'
+            ? 'Pipe ' + this.port
+            : 'Port ' + this.port;
+
+        // handle specific listen errors with friendly messages
+        switch (error.code) {
+            case 'EACCES':
+                console.error(bind + ' requires elevated privileges');
+                process.exit(1);
+                break;
+            case 'EADDRINUSE':
+                console.error(bind + ' is already in use');
+                process.exit(1);
+                break;
+            default:
+                throw error;
+        }
+    };
+
+
+    /**
+     * Event listener for HTTP server "listening" event.
+     */
+    private onListening = () => {
+        var addr = this.server.address();
+        var bind = typeof addr === 'string'
+            ? 'pipe ' + addr
+            : 'port ' + addr.port;
+        this.debug('Listening on ' + bind);
+    };
+
+}
+
 
 
 if(process.env.DEBUG) {
     console.log("Running in DEBUG mode");
-
-    import * as _morgan from 'morgan';
-    app.use(_morgan('dev'));
-}
-
-
-app.use(_express.static(__dirname +'./../frontend'));
-app.use('/node_modules',_express.static(__dirname +'./../node_modules'));
-
-
-
-/**
- * Get port from environment and store in Express.
- */
-
-var port = normalizePort(process.env.PORT || '3001');
-app.set('port', port);
-
-/**
- * Create HTTP server.
- */
-
-var server = _http.createServer(app);
-
-/**
- * Listen on provided port, on all network interfaces.
- */
-
-server.listen(port);
-server.on('error', onError);
-server.on('listening', onListening);
-
-/**
- * Normalize a port into a number, string, or false.
- */
-
-function normalizePort(val) {
-    var port = parseInt(val, 10);
-
-    if (isNaN(port)) {
-        // named pipe
-        return val;
-    }
-
-    if (port >= 0) {
-        // port number
-        return port;
-    }
-
-    return false;
-}
-
-/**
- * Event listener for HTTP server "error" event.
- */
-
-function onError(error) {
-    if (error.syscall !== 'listen') {
-        throw error;
-    }
-
-    var bind = typeof port === 'string'
-        ? 'Pipe ' + port
-        : 'Port ' + port;
-
-    // handle specific listen errors with friendly messages
-    switch (error.code) {
-        case 'EACCES':
-            console.error(bind + ' requires elevated privileges');
-            process.exit(1);
-            break;
-        case 'EADDRINUSE':
-            console.error(bind + ' is already in use');
-            process.exit(1);
-            break;
-        default:
-            throw error;
-    }
-}
-
-/**
- * Event listener for HTTP server "listening" event.
- */
-
-function onListening() {
-    var addr = server.address();
-    var bind = typeof addr === 'string'
-        ? 'pipe ' + addr
-        : 'port ' + addr.port;
-    debug('Listening on ' + bind);
 }
 
+new Server();

common/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "sourceMap": true,
+    "module": "system",
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false
+  },
+  "exclude": [
+    "./../node_modules",
+    "./../typings"
+  ]
+}

frontend/app/app.component.ts

@@ -0,0 +1,24 @@
+import { Component } from 'angular2/core';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
+import {LoginComponent} from "./login/login.component";
+
+
+
+@Component({
+    selector: 'pi-gallery2-app',
+    template: `<router-outlet></router-outlet>`,
+    directives: [ROUTER_DIRECTIVES],
+    providers: [
+        ROUTER_PROVIDERS
+    ]
+})
+@RouteConfig([
+    {
+        path: '/login',
+        name: 'Login',
+        component: LoginComponent,
+        useAsDefault: true
+    }
+])
+export class AppComponent {
+}

frontend/app/login/login.component.html

@@ -0,0 +1 @@
+<h1>Login</h1>

frontend/app/login/login.component.ts

@@ -0,0 +1,11 @@
+import { Component, OnInit } from 'angular2/core';
+
+@Component({
+    selector: 'login',
+    templateUrl: 'app/login/login.component.html',
+    styleUrls: ['app/login/login.component.css']
+})
+export class LoginComponent{
+    constructor() { }
+}
+

frontend/index.html

@@ -6,8 +6,7 @@
     <title>PiGallery2</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <link rel="stylesheet" href="styles.css">
-    <!-- IE required polyfills, in this exact order -->
+    <!-- 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>
@@ -16,21 +15,32 @@
     <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.dev.js"></script>
+    <!-- IE required polyfills, in this exact order -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
+    <script src="https://npmcdn.com/angular2@2.0.0-beta.9/es6/dev/src/testing/shims_for_IE.js"></script>
 
+    <script src="https://code.angularjs.org/2.0.0-beta.9/angular2-polyfills.js"></script>
+    <script src="https://code.angularjs.org/tools/system.js"></script>
+    <script src="https://npmcdn.com/typescript@1.8.2/lib/typescript.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.9/Rx.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.9/angular2.dev.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.9/router.dev.js"></script>
     <script>
         System.config({
-            packages: {
-                app: {
-                    format: 'register',
-                    defaultExtension: 'js'
-                }
-            }
+            map: {
+                "ts": "../node_modules/typescript/lib/plugin.js",
+                "typescript": "../node_modules/typescript/lib/typescript.js"
+            },
+            transpiler: 'typescript',
+            typescriptOptions: { emitDecoratorMetadata: true },
+            packages: {'app': {defaultExtension: 'ts'}}
         });
-        System.import('app/main.js')
+        System.import('main.ts')
                 .then(null, console.error.bind(console));
     </script>
 
 <body>
-<my-app>Loading...</my-app>
+<pi-gallery2-app>Loading...</pi-gallery2-app>
 </body>
 </html>

frontend/main.ts

@@ -1,4 +1,4 @@
 import { bootstrap }    from 'angular2/platform/browser';
-import { AppComponent } from './app.component';
+import { AppComponent } from './app/app.component.ts';
 
 bootstrap(AppComponent);

tsd.json

@@ -10,6 +10,15 @@
     },
     "node/node.d.ts": {
       "commit": "0d622d857f97d44ea7dcad2b3edec1f23c48fe9e"
+    },
+    "debug/debug.d.ts": {
+      "commit": "0d622d857f97d44ea7dcad2b3edec1f23c48fe9e"
+    },
+    "mime/mime.d.ts": {
+      "commit": "0d622d857f97d44ea7dcad2b3edec1f23c48fe9e"
+    },
+    "serve-static/serve-static.d.ts": {
+      "commit": "0d622d857f97d44ea7dcad2b3edec1f23c48fe9e"
     }
   }
 }