adds server-config option to ng serve

README.md

@@ -229,6 +229,26 @@ and then we edit the `package.json` file's start script to be
 
 now run it with `npm start`
 
+### Mocking a Static Backend
+Webpack dev server allows us to modify the ExpressJS `app` object using the `setup` method.
+We do this by passing a file to `--server-config`
+
+We create a file next to the projects `package.json` called `server.conf.js` with the content
+
+```json
+module.exports = function(app){
+   app.get('/api/*', function(req, res){
+    res.sendFile(req.originalUrl, {root: __dirname + '/mocks/'});
+  });
+};
+
+```
+
+now run it with `ng serve --server-config server.conf.json`
+
+Thus fetches to `/api/foo` will return flat json from `/mocks/api/foo`
+
+
 ### Deploying the app via GitHub Pages
 
 You can deploy your apps quickly via:

packages/angular-cli/commands/serve.ts

@@ -15,6 +15,7 @@ export interface ServeTaskOptions {
   port?: number;
   host?: string;
   proxyConfig?: string;
+  serverConfig?: any;
   watcher?: string;
   liveReload?: boolean;
   liveReloadHost?: string;
@@ -53,6 +54,7 @@ const ServeCommand = Command.extend({
       description: 'Listens only on localhost by default'
     },
     { name: 'proxy-config',         type: 'Path',                          aliases: ['pc'] },
+    { name: 'server-config',        type: 'Path',                          aliases: ['sc'] },
     { name: 'watcher',              type: String,  default: 'events',      aliases: ['w'] },
     { name: 'live-reload',          type: Boolean, default: true,          aliases: ['lr'] },
     {

packages/angular-cli/custom-typings.d.ts

@@ -4,6 +4,7 @@ interface IWebpackDevServerConfigurationOptions {
   historyApiFallback?: {[key: string]: any} | boolean;
   compress?: boolean;
   proxy?: {[key: string]: string};
+  setup?: any;
   staticOptions?: any;
   quiet?: boolean;
   noInfo?: boolean;

packages/angular-cli/tasks/serve-webpack.ts

@@ -69,6 +69,17 @@ export default Task.extend({
       }
     }
 
+    let serverConfig = {};
+    if (serveTaskOptions.serverConfig) {
+      const serverConfigPath = path.resolve(this.project.root, serveTaskOptions.serverConfig);
+      if (fs.existsSync(serverConfigPath)) {
+        serverConfig = require(serverConfigPath);
+      } else {
+        const message = 'Server config file ' + serverConfigPath + ' does not exist.';
+        return Promise.reject(new SilentError(message));
+      }
+    }
+
     let sslKey: string = null;
     let sslCert: string = null;
     if (serveTaskOptions.ssl) {
@@ -95,6 +106,7 @@ export default Task.extend({
       stats: statsConfig,
       inline: true,
       proxy: proxyConfig,
+      setup: serverConfig,
       compress: serveTaskOptions.target === 'production',
       watchOptions: {
         poll: CliConfig.fromProject().config.defaults.poll

tests/e2e/tests/misc/static-server.ts

@@ -0,0 +1,30 @@
+import { writeFile } from '../../utils/fs';
+import { request } from '../../utils/http';
+import { killAllProcesses, ng } from '../../utils/process';
+import { ngServe } from '../../utils/project';
+import { expectToFail } from '../../utils/utils';
+
+
+export default function() {
+  // const app = express();
+  const serverConfigFile = 'server.config.js';
+  const serverConfig = `module.exports = function(app){ 
+    app.get('/api/test', function(req, res){
+      res.json({ status:'TEST_API_RETURN' });
+    });
+  };`;
+
+  return Promise.resolve()
+    .then(() => writeFile(serverConfigFile, serverConfig))
+    .then(() => ngServe('--server-config', serverConfigFile))
+    .then(() => request('http://localhost:4200/api/test'))
+    .then(body => {
+      if (!body.match(/TEST_API_RETURN/)) {
+        throw new Error('Response does not match expected value.');
+      }
+    })
+    .then(() => killAllProcesses(), (err) => { killAllProcesses(); throw err; })
+
+    // A non-existing proxy file should error.
+    .then(() => expectToFail(() => ng('serve', '--server-config', 'config.non-existent.js')));
+}