How to redirect / proxy a relative url from browsersync using http-proxy-middleware?

Question

I have a setup where I'm using browsersync (with gulp) to test html templates. Now I have a html template which has a link tag with a relative path: ../css/style.css.

The template is located in the subfolder /service/iframe.

I would like to use the middleware (or another solution) to redirect the request from /service/css/style.css to /css/_selfservice/style.css. But I just can't figure out how this is done...

What I have at the moment:

...

var proxyOptions = proxyMiddleware('/service/css', {
    target: "/css/_selfservice",
    changeOrigin: true,
    pathRewrite: {
        '/service/css/' : ''      // remove old path
    }
});

...

browserSync( {

    server: {

        baseDir: './build',

        middleware: [ proxyOptions ]

    }


});

Any help would be much appreciated!

Answer 1

http-proxy-middleware is a proxy, which proxies (certain) requests to a target server. It offers some extra functionality to rewrite paths when needed.

Corrected your pathRewrite configuration. You'll only need set the correct target server. I used 'http://localhost:8000' in the example:

var proxyOptions = proxyMiddleware('/service/css', {
    target: 'http://localhost:8000',
    changeOrigin: true,
    pathRewrite: {
        '^/service/css/' : '/css/_selfservice'      // rewrite path
    }
});

Documentation / Recipe:

https://github.com/chimurai/http-proxy-middleware/blob/master/recipes/pathRewrite.md

---

Alternatively; If there's no need to proxy the request to another server you could use: https://www.npmjs.com/package/http-rewrite-middleware

var rewriteModule = require('http-rewrite-middleware');
var rewriteMiddleware = rewriteModule.getMiddleware([
    {from: '^/service/css/(.*)$', to: '/css/_selfservice/$1'}
]);