Add a Proxy to browsersync

If you have an API Server running on a different port, you may want to proxy requests from you application to your api.

You can do this by adding a middleware to browsersync. (Shortcut)

One way to do this is by installing the proxy-middleware.

npm install proxy-middleware --save-dev

Then open the file tools/config/project.config.ts.

At the top of the file you include the proxy-middleware by

const proxy = require('proxy-middleware');

As the default browsersync config is defined in tools/config/seed.config.ts we would overwrite it in our project specific settings (tools/config/project.config.ts):

So, you could simply copy the default plugin config:

PLUGIN_CONFIGS: any = {
  /**
   * The BrowserSync configuration of the application.
   * The default open behavior is to open the browser. To prevent the browser from opening use the `--b`  flag when
   * running `npm start` (tested with serve.dev).
   * Example: `npm start -- --b`
   * @type {any}
   */
  'browser-sync': {
    middleware: [require('connect-history-api-fallback')({ index: `${this.APP_BASE}index.html` })],
    port: this.PORT,
    startPath: this.APP_BASE,
    open: argv['b'] ? false : true,
    injectChanges: false,
    server: {
      baseDir: `${this.DIST_DIR}/empty/`,
      routes: {
        [`${this.APP_BASE}${this.APP_SRC}`]: this.APP_SRC,
        [`${this.APP_BASE}${this.APP_DEST}`]: this.APP_DEST,
        [`${this.APP_BASE}node_modules`]: 'node_modules',
        [`${this.APP_BASE.replace(/\/$/, '')}`]: this.APP_DEST
      }
    }
  },
  //...

and place it in the project config:

export class ProjectConfig extends SeedConfig {
  constructor() {
    this.PLUGIN_CONFIGS['browser-sync'] = {
      middleware: [require('connect-history-api-fallback')({ index: `${this.APP_BASE}index.html` })],
      port: this.PORT,
      startPath: this.APP_BASE,
      open: argv['b'] ? false : true,
      injectChanges: false,
      server: {
        baseDir: `${this.DIST_DIR}/empty/`,
        routes: {
          [`${this.APP_BASE}${this.APP_SRC}`]: this.APP_SRC,
          [`${this.APP_BASE}${this.APP_DEST}`]: this.APP_DEST,
          [`${this.APP_BASE}node_modules`]: 'node_modules',
          [`${this.APP_BASE.replace(/\/$/, '')}`]: this.APP_DEST
        }
      };
  }
}

But first, we need to change a few things here:

1. Move the top-level middleware property inside the server property.
2. Then, add the proxy as first middleware before the connect-history-api-fallback.

Place the following snippet right after the super() call in the constructor():

export class ProjectConfig extends SeedConfig {
  constructor() {
    this.PLUGIN_CONFIGS['browser-sync'] = {
      middleware: [
        proxy({
          protocol: 'http:',
          hostname: 'localhost',
          port: 8080,
          pathname: '/api',
          route: '/api'
        }),
        require('connect-history-api-fallback')({index: `${this.APP_BASE}index.html`})
      ],
      port: this.PORT,
      startPath: this.APP_BASE,
      open: argv['b'] ? false : true,
      injectChanges: false,
      server: {
        baseDir: `${this.DIST_DIR}/empty/`,
        routes: {
          [`${this.APP_BASE}${this.APP_SRC}`]: this.APP_SRC,
          [`${this.APP_BASE}${this.APP_DEST}`]: this.APP_DEST,
          [`${this.APP_BASE}node_modules`]: 'node_modules',
          [`${this.APP_BASE.replace(/\/$/, '')}`]: this.APP_DEST
        }
      };
  }
}

This configuration will proxy all requests starting with /api (route-property) to another server on localhost:8080/api.

Shortcut

This is the shortcut version to add a proxy to localhost:8080 for any requests on /api

npm install proxy-middleware --save-dev

replace tools/config/project.config.ts with the gist here