servers.md

Servers

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

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

• http.createServer
• Express
• Connect
• Next.js
• fastify
• Browser-Sync
• Polka
• lite-server
• grunt-contrib-connect
• gulp-connect
• grunt-browser-sync
• gulp-webserver

http.createServer

Vanilla http server implementation with http.createServer

const http = require('node:http');
const { createProxyMiddleware } = require('http-proxy-middleware');

/**
 * Configure proxy middleware
 */
const apiProxy = createProxyMiddleware({
  target: 'http://www.example.com',
  changeOrigin: true, // for vhosted sites, changes host header to match to target's host
});

const server = http.createServer(jsonPlaceholderProxy);

server.listen(3000);

Express

https://github.com/expressjs/express

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

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

const app = express();

app.use('/api', apiProxy);
app.listen(3000);

Connect

https://github.com/senchalabs/connect

const http = require('http');
const connect = require('connect');
const { createProxyMiddleware } = require('http-proxy-middleware');

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

const app = connect();
app.use('/api', apiProxy);

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

Next.js

https://github.com/vercel/next.js

See working Next.js example in /examples/next-app/pages/api/users.ts

// Next project: `/pages/api/users.proxy.ts`
import { createProxyMiddleware } from 'http-proxy-middleware';

// singleton
export const proxyMiddleware = createProxyMiddleware<NextApiRequest, NextApiResponse>({
  target: 'http://jsonplaceholder.typicode.com',
  changeOrigin: true,
  pathRewrite: {
    '^/api/users': '/users',
  },
});

// Next project: `/pages/api/users.ts`

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next';
import { proxyMiddleware } from './users.proxy';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  proxyMiddleware(req, res, (result: unknown) => {
    if (result instanceof Error) {
      throw result;
    }
  });
}

export const config = {
  api: {
    externalResolver: true,
    // Uncomment to fix stalled POST requests
    // https://github.com/chimurai/http-proxy-middleware/issues/795#issuecomment-1314464432
    // bodyParser: false,
  },
};

// curl http://localhost:3000/api/users

fastify

https://github.com/fastify/fastify

See working example in /examples/fastify/index.js

const fastify = require('fastify')({ logger: true });
const { createProxyMiddleware } = require('http-proxy-middleware');

(async () => {
  await fastify.register(require('@fastify/express'));

  const proxy = createProxyMiddleware({
    target: 'http://jsonplaceholder.typicode.com',
    changeOrigin: true,
  });

  fastify.use(proxy);

  fastify.listen({ port: 3000 }, (err, address) => {
    if (err) throw err;
    fastify.log.info(`server listening on ${address}`);
  });
})();

// curl http://localhost:3000/users

Browser-Sync

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

const browserSync = require('browser-sync').create();
const { createProxyMiddleware } = require('http-proxy-middleware');

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

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

Polka

https://github.com/lukeed/polka

const polka = require('polka');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = polka();

app.use(
  createProxyMiddleware({
    target: 'http://www.example.org',
    changeOrigin: true,
  }),
);

app.listen(3000);

lite-server

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

File: bs-config.js

const { createProxyMiddleware } = require('http-proxy-middleware');

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

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

As an Array:

const { createProxyMiddleware } = require('http-proxy-middleware');

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

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

As a function:

const { createProxyMiddleware } = require('http-proxy-middleware');

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

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;
        },
      },
    },
  },
});

gulp-connect

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

const gulp = require('gulp');
const connect = require('gulp-connect');
const { createProxyMiddleware } = require('http-proxy-middleware');

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

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

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

grunt-browser-sync

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

const { createProxyMiddleware } = require('http-proxy-middleware');

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

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

gulp-webserver

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

const gulp = require('gulp');
const webserver = require('gulp-webserver');
const { createProxyMiddleware } = require('http-proxy-middleware');

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

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

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