Merge pull request #58 from Microsoft/makeImageboardLessBad

Improve imageboard sample

Author: DanielRosenwasser

imageboard/README.md

@@ -4,32 +4,51 @@
 
 This sample implements a complete Node.js application.
 Notable features:
-- Typed usage of express for server side MVC
-- Typed usage of mongodb for server side database
-- Typed usage of Node.js 
-- Use of TypeScript module syntax  
-- Visual Studio project file for working with the project
+
+* Typed usage of express for server side MVC
+* Typed usage of mongodb for server side database
+* Typed usage of Node.js
+* Use of external typings from DefinitelyTyped
+* Visual Studio project file for working with the project
 
 ## Running 
 
-Note: Perform steps 3 - 6 with your working directory set to the folder containing this README:
+Note: All commands entered need to be performed from within *this directory*.
 
 1. Install MongoDB if necessary (see http://docs.mongodb.org/manual/installation/ )
 
-2. Run the following command to launch the MongoDB process:
-`<mongoinstalldir>\bin\mongod`
-
-3. Restore the sample app data to MongoDB in another command prompt with the following command:
-`<mongoinstalldir>\bin\mongorestore dump`
-
-4. Install the app's node dependencies with the following command:
-`npm install`
-
-5. Compile the app with the following command:
-`tsc --sourcemap --module commonjs app.ts`
-
-6. Launch the Node process to serve the app using the following command:
-`node app.js`
-
-7. Open your favorite browser and going to the following URL to access the app:
-`http://localhost:3000/`
+2. Ensure you have a clean directory to dedicate as to a database (e.g. `C:\imageboard` or `~/imageboard/`). 
+
+3. From *this repository's imageboard directory*, run the following command to launch the MongoDB process.
+    ```shell
+    <MONGO_INSTALL_DIRECTORY>/bin/mongod --dbpath <PATH_TO_DB_DIRECTORY>
+    ```
+
+4. From *this repository's imageboard directory*, restore the sample app data to MongoDB in another command prompt with the following command:
+    ```shell
+    <MONGO_INSTALL_DIRECTORY>/bin/mongorestore dump
+    ```
+
+5. From this imageboard directory, install the app's node dependencies, tsd, and typings with the following commands:
+    ```shell
+    npm install
+    npm install -g tsd
+    tsd install
+    ```
+    Some things to note:
+
+    * `npm install` will install this project's node dependencies from `package.json`.
+    * `tsd install` will retrieve `.d.ts` files from [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped).
+
+6. Compile the app with the following command:
+    ```shell
+    tsc
+    ```
+    The above command will use `tsconfig.json` to compile all necessary files.
+
+7. Launch the Node process to serve the app using the following command:
+    ```shell
+    node app.js
+    ```
+
+7. Open your favorite browser and navigating to `http://localhost:3000/` to access the app.

imageboard/app.ts

@@ -1,17 +1,12 @@
-/// <reference path='typings/node/node.d.ts' />
-/// <reference path='typings/mongodb/mongodb.d.ts' />
-/// <reference path='typings/express/express.d.ts' />
-/// <reference path='typings/express/express-middleware.d.ts' />
-
-
-import http = require("http")
-import url = require("url")
-import routes = require("./routes/index")
-import db = require("./db")
-import express = require("express")
-import bodyParser = require("body-parser");
-import methodOverride = require("method-override");
+import * as http from "http";
+import * as url from "url";
+import * as express from "express";
+import * as bodyParser from "body-parser";
 import errorHandler = require("errorhandler");
+import methodOverride = require("method-override");
+
+import * as routes from "./routes/index";
+import * as db from "./db";
 
 var app = express();
 
@@ -27,9 +22,6 @@ app.use(express.static(__dirname + '/public'));
 
 var env = process.env.NODE_ENV || 'development';
 if (env === 'development') {
-    app.use(errorHandler({ dumpExceptions: true, showStack: true }));
-}
-else if (env === 'production') {
     app.use(errorHandler());
 }
 
@@ -38,91 +30,98 @@ else if (env === 'production') {
 
 app.get('/', routes.index);
 
-app.get('/findImages', function(req, res) {
+app.get('/findImages', (req, res) => {
     console.log('getting images from' + req.query['url']);
-   
-    var req2 = http.get(url.parse(req.query['url']), function(urlres) {  
-      console.log("Got response: " + urlres.statusCode);   
-      var text = "";
-      urlres.on('data', function(chunk: string) {  
+
+    let req2 = http.get(url.parse(req.query['url']), urlMessage => {
+      console.log("Got response: " + urlMessage.statusCode);
+
+      let text = "";
+
+      urlMessage.on('data', (chunk: string) => {
         text += chunk;
-      });   
-      urlres.on('end', function() {
-        console.log(text);     
-        var re = /<img[^>]+src=[\"\']([^\'\"]+)[\"\']/g;
-        var match, matches = [];
-        while(match = re.exec(text)) {
+      });
+
+      urlMessage.on('end', () => {
+        console.log(text);
+        const imageTagRegEx = /<img[^>]+src=[\"\']([^\'\"]+)[\"\']/g;
+
+        let match: RegExpMatchArray;
+        let matches: string[] = [];
+        while (match = imageTagRegEx.exec(text)) {
             matches.push(match[1]);
         }
+
         res.write(JSON.stringify(matches));
         res.end();
       });
-    }).on('error', function(a,e) {  
-      console.log("Got error: " + e.message);   
-    });   
+
+    }).on('error', function(a,e) {
+      console.log("Got error: " + e.message);
+    });
 });
 
-app.get('/user/:userid', function(req, res) {
+app.get('/user/:userid', (req, res) => {
     console.log('getting user ' + req.params.userid);
-    db.getUser(req.params.userid, function(user) {
-        res.render('user', { 
+    db.getUser(req.params.userid, user => {
+        res.render('user', {
             title: user._id,
-            username: user._id, 
-            boards: user.boards 
+            username: user._id,
+            boards: user.boards
        });
     });
 });
 
-app.get('/user/:userid/newboard', function(req, res) {
-    res.render('newboard', { 
+app.get('/user/:userid/newboard', (req, res) => {
+    res.render('newboard', {
         username: req.params.userid
-    });    
+    });
 });
 
-app.post('/user/:userid/newboard', function(req, res) {
-    db.addBoard(req.params.userid, req.param('title'), req.param('description'), function(user) {
-        res.redirect('/user/'+req.params.userid)
+app.post('/user/:userid/newboard', (req, res) => {
+    db.addBoard(req.params.userid, req.param('title'), req.param('description'), user => {
+        res.redirect('/user/'+req.params.userid);
     });
 });
 
-app.get('/user/:userid/:boardid', function(req, res) {
+app.get('/user/:userid/:boardid', (req, res) => {
     console.log('getting ' + req.params.userid + ", " + req.params.boardid);
-    db.getUser(req.params.userid, function(user) {
-        var board = user.boards.filter(function(board) {
-            return decodeURIComponent(req.params.boardid) === board.title;
-        })[0];
-        if(board) {
-            db.getImages(board.images, function(images) {
-                res.render('board', { 
+    db.getUser(req.params.userid, user => {
+        let board = user.boards.filter(board => decodeURIComponent(req.params.boardid) === board.title)[0];
+
+        if (board) {
+            db.getImages(board.images, images => {
+                res.render('board', {
                     title: user._id,
-                    username: user._id, 
+                    username: user._id,
                     board: board,
                     images: images
                 });
             });
-        } else {
+        }
+        else {
             res.send(404, 'not found');
         }
     });
 });
 
-app.get('/user/:userid/:boardid/newpin', function(req, res) {
-    res.render('newpin', { 
+app.get('/user/:userid/:boardid/newpin', (req, res) => {
+    res.render('newpin', {
         username: req.params.userid,
         boardid: req.params.boardid
-    });    
+    });
 });
 
-app.post('/user/:userid/:boardid/newpin', function(req, res) {
-    db.addPin(req.params.userid, req.params.boardid, req.param('imageUri'), req.param('link'), req.param('caption'), function(user) {
+app.post('/user/:userid/:boardid/newpin', (req, res) => {
+    db.addPin(req.params.userid, req.params.boardid, req.param('imageUri'), req.param('link'), req.param('caption'), user => {
         res.redirect('/user/'+req.params.userid +"/" + req.params.boardid)
     });
 });
 
-app.get('/image/:imageid', function(req, res) {
+app.get('/image/:imageid', (req, res) => {
     console.log('getting image ' + req.params.imageid);
-    db.getImage(req.params.imageid, function(image) {
-        res.render('image', { 
+    db.getImage(req.params.imageid, image => {
+        res.render('image', {
             title: "image",
             image: image
         });

imageboard/package.json

@@ -3,12 +3,12 @@
     "version": "0.0.1",
     "private": true,
     "dependencies": {
-        "express": "4.11.1",
-        "body-parser": "1.10.2",
-        "errorhandler": "1.3.2",
-        "method-override": "2.3.1",
+        "express": "^4.13.3",
+        "body-parser": "^1.14.1",
+        "errorhandler": "^1.4.2",
+        "method-override": "^2.3.5",
         "ejs": ">= 0.5.0",
-        "jade": ">= 0.0.1",
+        "jade": ">= 1.11.0",
         "mongodb": ">= 1.4.29"
   }
 }

imageboard/public/stylesheets/style.css

@@ -21,11 +21,6 @@ a
   color: #777777;
 }
 
-.imglink 
-{
-    text: none;
-}
-
 img.small
 {
     border:0;
@@ -70,6 +65,11 @@ img.large
     font-size: 80%;
 }
 
+.title
+{
+    font-size: 2.5rem;
+}
+
 form
 {
     font-size: 18px;

imageboard/tsconfig.json

@@ -2,5 +2,11 @@
     "compilerOptions": {
         "module": "commonjs",
         "sourceMap": true
-    }
+    },
+    "files": [
+        "./typings/tsd.d.ts",
+        "./routes/index.ts",
+        "./db.ts",
+        "./app.ts"
+    ]
 }

imageboard/tsd.json

@@ -0,0 +1,33 @@
+{
+  "version": "v4",
+  "repo": "borisyankov/DefinitelyTyped",
+  "ref": "master",
+  "path": "typings",
+  "bundle": "typings/tsd.d.ts",
+  "installed": {
+    "mime/mime.d.ts": {
+      "commit": "fc341765ebbb04b7109981a25dced01f488f4d94"
+    },
+    "serve-static/serve-static.d.ts": {
+      "commit": "fc341765ebbb04b7109981a25dced01f488f4d94"
+    },
+    "express/express.d.ts": {
+      "commit": "fc341765ebbb04b7109981a25dced01f488f4d94"
+    },
+    "mongodb/mongodb.d.ts": {
+      "commit": "fc341765ebbb04b7109981a25dced01f488f4d94"
+    },
+    "node/node.d.ts": {
+      "commit": "fc341765ebbb04b7109981a25dced01f488f4d94"
+    },
+    "method-override/method-override.d.ts": {
+      "commit": "fc341765ebbb04b7109981a25dced01f488f4d94"
+    },
+    "errorhandler/errorhandler.d.ts": {
+      "commit": "fc341765ebbb04b7109981a25dced01f488f4d94"
+    },
+    "body-parser/body-parser.d.ts": {
+      "commit": "fc341765ebbb04b7109981a25dced01f488f4d94"
+    }
+  }
+}