express / proxy, middleware - manipulate and map target requests and responses

proxy.js

/**
 * express / proxy, middleware
 * manipulate and map target requests and responses
 *
 * - inject assets to test / develop features, fixes ...
 * - overwrite JavaScript and CSS served by the target
 */

/**
 * Module dependencies.
 */

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

/**
 * Configure proxy middleware
 */

// context to serve from target
const context = [
  '/**',
  '!/assets/backend/path/js/*.js',
  '!/assets/backend/path/css/*.css',
];

// options to serve target
const options = {
  target: 'https://backend.local',
  changeOrigin: true, // for vhosted sites, changes host header to match to target's host
  secure: false, // if the target serve via https
  logLevel: 'debug',
};

// connect target
const backend = createProxyMiddleware(context, options);

// serve app
const app = express();

/**
 * Add the proxy to express
 */
app.use('/', backend);

/**
 * Manipulate request / response
 */

// rewrite vendor|app css|js
app.use(function (req, res, next) {
  // rewrite files
  const re = /(vendor|app)\.[0-9]{12}\.(js|css)/;

  if (req.url.match(re)) {
    res.setHeader('x-middleware-rewrite', 'true');
    res.setHeader('x-middleware-rewrite-match', re);
    res.setHeader('x-middleware-rewrite-origin', req.url);
    // rewrite req.url from, to
    req.url = req.url.replace(re, '$1\.min\.$2');
    res.setHeader('x-middleware-rewrite-status', 'done');
  }

  next();
});

/**
 * Add static assets
 */

// backend path overwrite with static vendor|app css|js
app.use('/assets/backend/path/js/', express.static('dist/static/js'));
app.use('/assets/backend/path/css/', express.static('dist/static/css'));

app.listen(3000);

console.log('[DEMO] Server: listening on port 3000');
console.log('[DEMO] Opening: http://localhost:3000/');

require('open')('http://localhost:3000/');