Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
2 contributors

Users who have contributed to this file

@chimurai @raduserbanescu
249 lines (192 sloc) 5.74 KB

Servers

Overview of http-proxy-middleware implementation in different servers.

Missing a server? Feel free to extend this list of examples.

Browser-Sync

https://github.com/BrowserSync/browser-sync GitHub stars

var browserSync = require('browser-sync').create();
var proxy = require('http-proxy-middleware');

var apiProxy = proxy('/api', {
  target: 'http://www.example.org',
  changeOrigin: true // for vhosted sites
});

browserSync.init({
  server: {
    baseDir: './',
    port: 3000,
    middleware: [apiProxy]
  },
  startPath: '/api'
});

Express

https://github.com/expressjs/express GitHub stars

var express = require('express');
var proxy = require('http-proxy-middleware');

var apiProxy = proxy('/api', {
  target: 'http://www.example.org',
  changeOrigin: true // for vhosted sites
});

var app = express();

app.use(apiProxy);
app.listen(3000);

Connect

https://github.com/senchalabs/connect GitHub stars

var http = require('http');
var connect = require('connect');
var proxy = require('http-proxy-middleware');

var apiProxy = proxy('/api', {
  target: 'http://www.example.org',
  changeOrigin: true // for vhosted sites
});

var app = connect();
app.use(apiProxy);

http.createServer(app).listen(3000);

lite-server

https://github.com/johnpapa/lite-server GitHub stars

File: bs-config.js

var proxy = require('http-proxy-middleware');

var apiProxy = proxy('/api', {
  target: 'http://www.example.org',
  changeOrigin: true // for vhosted sites
});

module.exports = {
  server: {
    // Start from key `10` in order to NOT overwrite the default 2 middleware provided
    // by `lite-server` or any future ones that might be added.
    // Reference: https://github.com/johnpapa/lite-server/blob/master/lib/config-defaults.js#L16
    middleware: {
      10: apiProxy
    }
  }
};

grunt-contrib-connect

https://github.com/gruntjs/grunt-contrib-connect GitHub stars

As an Array:

var proxy = require('http-proxy-middleware');

var apiProxy = proxy('/api', {
  target: 'http://www.example.org',
  changeOrigin: true // for vhosted sites
});

grunt.initConfig({
  connect: {
    server: {
      options: {
        middleware: [apiProxy]
      }
    }
  }
});

As a function:

var proxy = require('http-proxy-middleware');

var apiProxy = proxy('/api', {
  target: 'http://www.example.org',
  changeOrigin: true // for vhosted sites
});

grunt.initConfig({
  connect: {
    server: {
      options: {
        middleware: function(connect, options, middlewares) {
          // inject a custom middleware into the array of default middlewares
          middlewares.unshift(apiProxy);

          return middlewares;
        }
      }
    }
  }
});

grunt-browser-sync

https://github.com/BrowserSync/grunt-browser-sync GitHub stars

var proxy = require('http-proxy-middleware');

var apiProxy = proxy('/api', {
  target: 'http://www.example.org',
  changeOrigin: true // for vhosted sites
});

grunt.initConfig({
  // BrowserSync Task
  browserSync: {
    default_options: {
      options: {
        files: ['css/*.css', '*.html'],
        port: 9000,
        server: {
          baseDir: ['app'],
          middleware: apiProxy
        }
      }
    }
  }
});

gulp-connect

https://github.com/avevlad/gulp-connect GitHub stars

var gulp = require('gulp');
var connect = require('gulp-connect');
var proxy = require('http-proxy-middleware');

gulp.task('connect', function() {
  connect.server({
    root: ['./app'],
    middleware: function(connect, opt) {
      var apiProxy = proxy('/api', {
        target: 'http://www.example.org',
        changeOrigin: true // for vhosted sites
      });

      return [apiProxy];
    }
  });
});

gulp.task('default', ['connect']);

gulp-webserver

https://github.com/schickling/gulp-webserver GitHub stars

var gulp = require('gulp');
var webserver = require('gulp-webserver');
var proxy = require('http-proxy-middleware');

gulp.task('webserver', function() {
  var apiProxy = proxy('/api', {
    target: 'http://www.example.org',
    changeOrigin: true // for vhosted sites
  });

  gulp.src('app').pipe(
    webserver({
      livereload: true,
      directoryListing: true,
      open: true,
      middleware: [apiProxy]
    })
  );
});

gulp.task('default', ['webserver']);
You can’t perform that action at this time.