Browser-sync: How to have both static server and proxy in grunt

[gmarziou]

Hello,

I'm trying to setup a configuration in grunt that use a static server for frontend code and a proxy for backend REST API, I can make it work one or the other but not both at same time, it just fails silently.

Ideally I'd like to be able to setup routes or regex to dispatch between the static server and the proxy: by default go to static server and for /api and few other URIs go through proxy.

browserSync: {
    dev: {
        bsFiles: {
            src : [
                'src/main/webapp/**/*.html',
                'src/main/webapp/**/*.json',
                'src/main/webapp/bower_components/**/*.{js,css}',
                '{.tmp/,}src/main/webapp/assets/styles/**/*.css',
                '{.tmp/,}src/main/webapp/scripts/**/*.js',
                'src/main/webapp/assets/images/**/*.{png,jpg,jpeg,gif,webp,svg}'
            ]
        }
    },
    options: {
        watchTask: true,
            server: {
            baseDir: [".tmp", "src/main/webapp"]
        },
        //            proxy: "localhost:8080"
    }
},

[shakyShane]

You achieve this with middlewares.

    browserSync: {
        dev: {
            bsFiles: {
                src : [
                    'src/main/webapp/**/*.html',
                    'src/main/webapp/**/*.json',
                    'src/main/webapp/bower_components/**/*.{js,css}',
                    '{.tmp/,}src/main/webapp/assets/styles/**/*.css',
                    '{.tmp/,}src/main/webapp/scripts/**/*.js',
                    'src/main/webapp/assets/images/**/*.{png,jpg,jpeg,gif,webp,svg}'
                ]
            }
        },
        options: {
            watchTask: true,
            server: {
                baseDir: [".tmp", "src/main/webapp"]
            },
            middleware: function (req, res, next) {
                if (req.url.match(/^\/api/)) {
                    // do whatevs here
                }
            }
        }
    }

[gmarziou]

Thanks a lot.
I'm new to this middleware option, does it mean that I have to use grunt-connect-proxy middleware?

[gmarziou]

I could not make it work with connect-proxy but I found an example using http-proxy and got it working:

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

var proxy = httpProxy.createProxyServer({
   target: 'http://localhost:8080/'
 });

var proxyMiddleware = function(req, res, next) {
   if (req.url.indexOf('api') != -1) {
     proxy.web(req, res);
   } else {
     next();
   }
};


....
        browserSync: {
            dev: {
                bsFiles: {
                    src : [
                        'src/main/webapp/**/*.html',
                        'src/main/webapp/**/*.json',
                        'src/main/webapp/bower_components/**/*.{js,css}',
                        '{.tmp/,}src/main/webapp/assets/styles/**/*.css',
                        '{.tmp/,}src/main/webapp/scripts/**/*.js',
                        'src/main/webapp/assets/images/**/*.{png,jpg,jpeg,gif,webp,svg}'
                    ]
                }
            },
            options: {
                watchTask: true,
                server: {
                   baseDir: [".tmp", "src/main/webapp"],
                   middleware: proxyMiddleware
                }
            }
        },

[shakyShane]

@gmarziou - Great stuff!

Should you have free time, we would love to have your example here https://github.com/BrowserSync/recipes

:)

[shakyShane]

Guide here https://github.com/BrowserSync/recipes#how-to-contribute-an-example

[gmarziou]

Thanks Shane,
I'm new to node so I would not want to lead others into bad directions but I will contribute and hopefully someone more knowledgeable will correct me :)

[cliren]

The above proxyMiddleware solution works fine but it I get 403 when the target api requires cookies. How can I simulate apache/nginx style rewrites?

[chimurai]

@cliren

You might want to check out https://github.com/chimurai/http-proxy-middleware
Its a small middleware around node-http-proxy.

Let me know whether it works with cookies.

[cliren]

@chimurai awesome! That works great! Now I don't need an external proxy like nginx. Thanks!

[shinnn]

@cliren Close #481.

[yieldinov]

@cliren how did you managed to add cookies to your request?

[cliren]

Here is my browserSync config task. The app checks to see if authentication is available, if not redirects to /auth page where user performs login. If the auth page is smart it redirects the user back to the original location, this time the auth cookie is present so starts calling /api. I haven't done anything manually to add cookies, its behaving like it should in a production environment. I noticed one thing though, it doesn't work over https but when I am running this locally, its all http.

var proxyMiddleware = require('http-proxy-middleware');
var proxyURL = 'http://localhost:8080';

gulp.task('browserSync', ['webpack', 'markup'], function() {
  var authProxy = proxyMiddleware('/auth', {target: proxyURL});
  var apiProxy = proxyMiddleware('/api', {target: proxyURL});

  config.server.middleware = [authProxy, apiProxy];

  browserSync(config);
});

[mohanrao]

Hi,

I am using browser-sync with proxy-middleware.

My Proxy redirect some requests. I want to avoid the redirect of the url and also from http to https. How to achived that?