Merge pull request #23 from jeffbcross/universal-worker

feature(universal) add universal support

Author: robwormald

.vscode/launch.json

@@ -0,0 +1,30 @@
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Launch",
+			"type": "node",
+			"request": "launch",
+			"program": "dist/app/main-server.js",
+			"stopOnEntry": false,
+			"args": [],
+			"cwd": ".",
+			"runtimeExecutable": null,
+			"runtimeArgs": [
+				"--nolazy"
+			],
+			"env": {
+				"NODE_ENV": "development"
+			},
+			"externalConsole": false,
+			"sourceMaps": false,
+			"outDir": null
+		},
+		{
+			"name": "Attach",
+			"type": "node",
+			"request": "attach",
+			"port": 5858
+		}
+	]
+}

DEVELOPER.md

@@ -19,4 +19,13 @@ Or
 ```
 $ npm install -g karma
 $ karma start
-```
+```
+
+### Run the Universal server locally:
+
+```
+$ gulp
+$ npm run start_universal
+```
+
+Then navigate to localhost:3000

package.json

@@ -4,14 +4,17 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "karma start"
+    "test": "karma start",
+    "start_universal": "node dist/app/main-server.js"
   },
   "author": "",
   "license": "MIT",
   "dependencies": {
     "angular2": "^2.0.0-beta.1",
+    "angular2-universal-preview": "^0.32.0",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.13",
+    "express": "^4.13.3",
     "firebase": "^2.3.2",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.0",
@@ -23,6 +26,7 @@
     "gulp-inline": "^0.1.0",
     "gulp-minify-css": "^1.2.2",
     "gulp-sass": "^2.1.1",
+    "gulp-typescript": "^2.10.0",
     "gulp-util": "^3.0.7",
     "jasmine-core": "^2.3.4",
     "karma": "^0.13.15",
@@ -33,6 +37,7 @@
     "systemjs": "^0.19.6",
     "systemjs-builder": "^0.14.11",
     "ts-node": "^0.5.4",
+    "tsd": "^0.6.5",
     "typescript": "^1.7.3",
     "typescript-node": "^0.1.3"
   }

src/components/toast.ts

@@ -8,7 +8,8 @@ import {Component} from 'angular2/core';
 })
 export class Toast {
 	visible = false;
-	show(message){
+  message: string;
+	show(message:string){
 		this.message = message;
 		this.visible = true;
 		setTimeout(() => {

src/index.html renamed to src/index.ng2.html

@@ -0,0 +1,39 @@
+/// <reference path="../typings/tsd.d.ts" />
+
+import * as path from 'path';
+import * as express from 'express';
+import {SERVER_LOCATION_PROVIDERS, ng2engine} from 'angular2-universal-preview/dist/server';
+
+import {provide} from 'angular2/core';
+import {APP_BASE_HREF, ROUTER_PROVIDERS} from 'angular2/router';
+
+import {SHARED_PROVIDERS} from './shared-providers';
+
+// Angular 2
+import {App} from './app/app';
+
+let app = express();
+let root = path.join(path.resolve(__dirname, '..'));
+
+// Express View
+app.engine('.ng2.html', ng2engine);
+app.set('views', root);
+app.set('view engine', 'ng2.html');
+
+// Serve static files
+app.use(express.static(root));
+
+// Routes
+app.use('/', (req, res) => {
+  res.render('index', { App, providers: [
+    ROUTER_PROVIDERS,
+    SERVER_LOCATION_PROVIDERS,
+    provide(APP_BASE_HREF, {useValue: `http://localhost:3000${req.baseUrl}`}),
+    SHARED_PROVIDERS
+  ] });
+});
+
+// Server
+app.listen(3000, () => {
+  console.log('Listen on http://localhost:3000');
+});

src/main-server.ts

@@ -1,19 +1,14 @@
 import {bootstrap} from 'angular2/platform/browser';
 import {platform, provide} from 'angular2/core';
-import {ROUTER_PROVIDERS} from 'angular2/router';
+import {ROUTER_PROVIDERS, LocationStrategy, PathLocationStrategy} from 'angular2/router';
 
-import {AuthService} from './services/Auth';
-import {Backend, BackendConfig} from './services/Backend';
-import {Nav} from './services/Nav';
-
-const FIREBASE_URL = 'https://ng2-forum-demo.firebaseio.com';
+import {SHARED_PROVIDERS} from './shared-providers';
 
 import {App} from './app/app';
 
-bootstrap(App,[
+bootstrap(App, [
 	ROUTER_PROVIDERS,
-	AuthService,
-	Backend,
-	provide(BackendConfig, {useValue: {url: FIREBASE_URL }})
+  SHARED_PROVIDERS,
+  provide(LocationStrategy, {useClass: PathLocationStrategy})
 ]);
 

src/main.ts

@@ -1,4 +1,6 @@
-import Firebase from 'firebase';
+/// <reference path="../../typings/tsd.d.ts" />
+
+import * as Firebase from 'firebase';
 import {Injectable} from 'angular2/core';
 import {Observable} from 'rxjs/Observable';
 import {ReplaySubject} from 'rxjs/subject/ReplaySubject';
@@ -13,11 +15,14 @@ export class Backend {
 	authState: ReplaySubject<any> = new ReplaySubject(1);
 	ref: Firebase;
 	constructor(config: BackendConfig){
-		this.ref = new Firebase(config.url);
+    try {
+      this.ref = new Firebase(config.url);
+    } catch(e) {
+      console.error('something went wrong', config.url, e);
+    }
 	}
 	authenticate(){
 		let authRequest = new Observable(obs => {
-			
 			this.ref.authWithOAuthPopup('github', (err, res) => {
 				if(err){
 					obs.error(err);
@@ -26,10 +31,10 @@ export class Backend {
 					obs.next(res);
 				}
 			})
-			
+
 		});
-		
+
 		authRequest.subscribe(this.authState);
-		
+
 	}
 }

src/services/Backend.ts

@@ -0,0 +1,12 @@
+import {provide} from 'angular2/core';
+
+import {AuthService} from './services/Auth';
+import {Backend, BackendConfig} from './services/Backend';
+
+export const FIREBASE_URL = 'https://ng2-forum-demo.firebaseio.com';
+
+export const SHARED_PROVIDERS = [
+  AuthService,
+  Backend,
+  provide(BackendConfig, {useValue: {url: FIREBASE_URL }})
+];

src/shared-providers.ts

@@ -5,18 +5,18 @@ const inline = require('gulp-inline');
 const minifyCSS = require('gulp-minify-css');
 
 export const build = (gulp, config) => {
-	
-	gulp.task('default', ['compile:sass','compile:app','copy:dev'], () => {
-		
+
+	gulp.task('default', ['compile:sass','compile:app','compile:main-server','copy:dev'], () => {
+
 		gulp.src(config.index)
   		.pipe(inline({
     		base: 'dist',
 				css: minifyCSS,
-    		disabledTypes: ['img', 'js'], // Only inline css files 
+    		disabledTypes: ['img', 'js'], // Only inline css files
     	}))
   		.pipe(gulp.dest('dist/'));
-		
+
 	});
-	
-	
+
+
 }