Proxy API calls to backend when running dev server

With this change one can run the backend and browser sync at the same
time. All API calls are proxied to the backend.

build/conf.js

@@ -44,6 +44,10 @@ export default {
      * Name of the test backend package that is used in go test command.
      */
     testPackageName: 'test/backend',
+    /**
+     * Port number of the development server started by Gulp.
+     */
+    devServerPort: 8080,
   },
 
   /**

build/script.js

@@ -32,7 +32,7 @@ import conf from './conf';
  *
  * Only dependencies of root application module are included in the bundle.
  */
-gulp.task('scripts', ['create-serve-folders'], function() {
+gulp.task('scripts', function() {
   let webpackOptions = {
     devtool: 'inline-source-map',
     module: {
@@ -125,11 +125,3 @@ gulp.task('angular-templates', function () {
     }))
     .pipe(gulp.dest(conf.paths.partials));
 });
-
-
-/**
- * Creates {conf.paths.serve} folder.
- */
-gulp.task('create-serve-folders', function () {
-  return gulp.src('').pipe(gulp.dest(conf.paths.serve));
-});

build/serve.js

@@ -19,7 +19,9 @@ import browserSync from 'browser-sync';
 import browserSyncSpa from 'browser-sync-spa';
 import child from 'child_process';
 import gulp from 'gulp';
+import url from 'url';
 import path from 'path';
+import proxyMiddleware from 'proxy-middleware';
 
 import conf from './conf';
 
@@ -39,9 +41,9 @@ let runningBackendProcess = null;
 
 
 /**
- * Initializes BrowserSync tool. Files are server from baseDir directory list. When
- * includeBowerComponents is true, requests for paths starting with '/bower_components' are
- * routed to bower components directory.
+ * Initializes BrowserSync tool. Files are served from baseDir directory list and all API calls
+ * are proxied to a running backend instance. When includeBowerComponents is true, requests for
+ * paths starting with '/bower_components' are routed to bower components directory.
  *
  * @param {!Array<string>|string} baseDir
  * @param {boolean} includeBowerComponents
@@ -52,14 +54,20 @@ function browserSyncInit(baseDir, includeBowerComponents) {
     selector: '[ng-app]',
   }));
 
+  let apiRoute = '/api';
+  let proxyMiddlewareOptions =
+      url.parse(`http://localhost:${conf.backend.devServerPort}${apiRoute}`);
+  proxyMiddlewareOptions.route = apiRoute;
+
   let config = {
     browser: [], // Needed so that the browser does not auto-launch.
     directory: false, // Disable directory listings.
     // TODO(bryk): Add proxy to the backend here.
-    startPath: '/',
     server: {
       baseDir: baseDir,
+      middleware: proxyMiddleware(proxyMiddlewareOptions),
     },
+    startPath: '/',
   };
 
   if (includeBowerComponents) {
@@ -110,7 +118,9 @@ gulp.task('serve:prod', ['build-frontend'], function () {
  * backend process is killed beforehand, if any.
  */
 gulp.task('spawn-backend', ['backend', 'kill-backend'], function () {
-  runningBackendProcess = child.spawn(path.join(conf.paths.serve, conf.backend.binaryName));
+  runningBackendProcess = child.spawn(
+      path.join(conf.paths.serve, conf.backend.binaryName),
+      [`--port=${conf.backend.devServerPort}`]);
 
   runningBackendProcess.on('exit', function() {
     // Mark that there is no backend process running anymore.

package.json

@@ -50,6 +50,7 @@
     "karma-sourcemap-loader": "~0.3.6",
     "lodash": "~3.10.1",
     "uglify-save-license": "~0.4.1",
+    "proxy-middleware": "~0.15.0",
     "webpack-stream": "~2.1.1",
     "wiredep": "~2.2.2",
     "wrench": "~1.5.8"