Initial commit

Author: tobymurray

.gitignore

@@ -0,0 +1,44 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Build folders
+build
+dist
+
+# Build artifact
+*.zip

.travis.yml

@@ -0,0 +1,8 @@
+dist: trusty
+language: node_js
+node_js:
+  - node
+
+before_script:
+  - yarn
+  - yarn run build

README.md

@@ -0,0 +1,42 @@
+[![Build Status](https://travis-ci.org/tobymurray/express-typescript-babel.svg?branch=master)](https://travis-ci.org/tobymurray/express-typescript-babel)
+
+# ExpressJS, TypeScript 2 and Babel
+ExpressJS is one of the go-to technologies for Node JS servers. If you're looking for something to support an Angular client, it's a great choice. Unfortunately the associated generator project produces vanilla JavaScript, and coming from the TypeScript world of Angular, who wants vanilla ES5-ish JavaScript?
+
+## Build
+
+Start with `yarn run build`
+
+```
+$ yarn run build
+yarn run v0.20.3
+$ yarn run clean && yarn run tsc && yarn run babel && yarn run copy-files 
+yarn run v0.20.3
+$ rm -rf build && rm -rf dist 
+Done in 0.31s.
+yarn run v0.20.3
+$ node ./node_modules/.bin/tsc 
+Done in 1.74s.
+yarn run v0.20.3
+$ node ./node_modules/.bin/babel --presets es2015 build --out-dir dist --source-maps 
+build/app.js -> dist/app.js
+build/bin/www.js -> dist/bin/www.js
+build/models/http_error.js -> dist/models/http_error.js
+build/routes/index.js -> dist/routes/index.js
+build/routes/users.js -> dist/routes/users.js
+Done in 0.80s.
+yarn run v0.20.3
+$ cp package.json dist/ && cp -r public dist/ && cp -r node_modules dist/ 
+Done in 0.28s.
+Done in 4.11s.
+```
+
+## Run
+
+Run with `cd dist && yarn run start`
+
+```
+$ cd dist && yarn run start
+yarn run v0.20.3
+$ node ./bin/www 
+```

app.ts

@@ -0,0 +1,50 @@
+"use strict";
+
+import express from 'express';
+import path from 'path';
+import favicon from 'serve-favicon';
+import logger from 'morgan';
+import cookieParser from 'cookie-parser';
+import bodyParser from 'body-parser';
+
+import { HttpError } from './models/http_error'
+import { index } from './routes/index';
+import { users } from './routes/users';
+
+export default class App {
+  public app: express.Application;
+
+  constructor() {
+    this.app = express();
+
+    // uncomment after placing your favicon in /public
+    //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
+    this.app.use(logger('dev'));
+    this.app.use(bodyParser.json());
+    this.app.use(bodyParser.urlencoded({ extended: false }));
+    this.app.use(cookieParser());
+    this.app.use(express.static(path.join(__dirname, 'public')));
+
+    this.app.use('/', index);
+    this.app.use('/users', users);
+
+    // catch 404 and forward to error handler
+    this.app.use(function (req, res, next) {
+      var err = new HttpError('Not Found', 404);
+      next(err);
+    });
+
+    // error handler
+    this.app.use(function (err, req, res, next) {
+      // set locals, only providing error in development
+      res.locals.message = err.message;
+      res.locals.error = req.app.get('env') === 'development' ? err : {};
+
+      // render the error page
+      res.status(err.status || 500);
+      res.sendFile('error.html', {
+        root: (<any>global).appRoot + '/public/'
+      });
+    });
+  }
+}

bin/www.ts

@@ -0,0 +1,102 @@
+#!/usr/bin/env node
+
+/**
+ * As this is the entrypoint for the application, set a global variable for 
+ * the root path of the server. This makes it a little easier to serve static
+ * files as their path is relative to the root instead of the file that is 
+ * trying to serve them.
+ */
+
+var path = require('path');
+(<any>global).appRoot = path.join(__dirname, './..');
+
+/**
+ * Module dependencies.
+ */
+
+import App from '../app';
+import debug from 'debug';
+import http from 'http';
+
+/**
+ * Instantiate the application as it's a class now
+ */
+
+const application = new App();
+
+/**
+ * Get port from environment and store in Express.
+ */
+
+var port = normalizePort(process.env.PORT || '3000');
+application.app.set('port', port);
+
+/**
+ * Create HTTP server.
+ */
+
+var server = http.createServer(application.app);
+
+/**
+ * Listen on provided port, on all network interfaces.
+ */
+
+server.listen(port);
+server.on('error', onError);
+server.on('listening', onListening);
+
+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);
+}

models/http_error.ts

@@ -0,0 +1,10 @@
+export class HttpError extends Error {
+
+  private status: number;
+
+  constructor(message: string, status: number) {
+    super(message);
+
+    this.status = status;
+  }
+}

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "express-typescript-babel",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www",
+    "clean": "rm -rf build && rm -rf dist",
+    "tsc": "node ./node_modules/.bin/tsc",
+    "babel": "node ./node_modules/.bin/babel --presets es2015 build --out-dir dist --source-maps",
+    "copy-files": "cp package.json dist/ && cp -r public dist/ && cp -r node_modules dist/",
+    "build": "yarn run clean && yarn run tsc && yarn run babel && yarn run copy-files",
+    "package": "zip -r express-typescript-babel.zip dist",
+    "test": "echo 'no tests yet...'"
+  },
+  "dependencies": {
+    "body-parser": "~1.18.2",
+    "cookie-parser": "~1.4.3",
+    "debug": "~3.1.0",
+    "express": "~4.16.2",
+    "morgan": "~1.9.0",
+    "serve-favicon": "~2.4.5"
+  },
+  "devDependencies": {
+    "@types/body-parser": "^1.16.8",
+    "@types/cookie-parser": "^1.3.30",
+    "@types/debug": "^0.0.30",
+    "@types/express": "^4.0.35",
+    "@types/morgan": "^1.7.32",
+    "@types/node": "^8.0.53",
+    "@types/serve-favicon": "^2.2.28",
+    "babel-cli": "^6.23.0",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-stage-2": "^6.22.0",
+    "copyfiles": "^1.2.0",
+    "typescript": "^2.1.6"
+  }
+}

public/error.html

@@ -0,0 +1,11 @@
+<html>
+
+<head></head>
+
+<body>
+  <h1>Don't know the error message</h1>
+  <h2>Don't know the status code</h2>
+  <pre>Error: This is a static file - obviously at odds with dynamically filling in these contents without a bit of work.</pre>
+</body>
+
+</html>

public/index.html

@@ -0,0 +1,13 @@
+<html>
+
+<head>
+  <title>Express</title>
+  <link rel="stylesheet" href="/stylesheets/style.css">
+</head>
+
+<body>
+  <h1>Express</h1>
+  <p>Welcome to Express</p>
+</body>
+
+</html>

public/stylesheets/style.css

@@ -0,0 +1,8 @@
+body {
+  padding: 50px;
+  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+}
+
+a {
+  color: #00B7FF;
+}

routes/index.ts

@@ -0,0 +1,10 @@
+import express from 'express';
+var index = express.Router();
+
+index.get('/', function (req, res, next) {
+  res.sendFile('index.html', {
+    root: global["appRoot"] + '/public/'
+  });
+});
+
+export { index };

routes/users.ts

@@ -0,0 +1,8 @@
+import express from 'express';
+var users = express.Router();
+
+users.get('/', function (req, res, next) {
+  res.send('respond with a resource');
+});
+
+export { users };

tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "module": "es2015",
+        "target": "es2015",
+        "noImplicitAny": false,
+        "sourceMap": true,
+        "outDir": "build",
+        "allowSyntheticDefaultImports": true
+    },
+    "exclude": [
+        "node_modules"
+    ]
+}