Doesn't work when using the "proxy" config about lite-server

[cgmartin]

The proxy and server configs in browsersync are mutually exclusive. The current lite-server always uses server in the config, so browsersync fails when including proxy config.

When trying the following bs-config.json with Browsersync (without lite-server), it proxies as expected:

{ "proxy": "http://www.example.com/" }
$ browser-sync --config bs-config.json start

But as soon as you add server config, it fails with an error:

{ 
  "proxy": "http://www.example.com/",
  "server": { "baseDir": "./" } 
}
$ browser-sync --config bs-config.json start
Invalid config. You cannot specify both server & proxy options.

@maximedupre could you describe your use-case a bit more? Curious how beneficial it would be for lite-server to support proxy mode vs. using browsersync itself.

[cgmartin]

Glad it is working! BTW, there were some recent issues with proxy mode that are fixed in Browsersync 2.12.2+ (see #71).

To remove the request logging, there's an example in the README:

Another example: To remove one of the default middlewares, such as connect-logger, you can set it's array index to null:

module.exports = {
  server: {
    middleware: {      
      0: null     // removes default `connect-logger` middleware
    }
  }
};

[maximedupre]

I don't seem to get alternative number 1 to work. This is my middleware:

1: proxyMiddleware('/', {
    target: 'localhost:5000'
})

(My nodejs server handles both static file serving and AJAX API requests, which is why I redirect everything to localhost:5000).

When I start lite-server, it opens the browser and gives me this message:

Error occured while trying to proxy to: localhost:3000/

In the terminal:

[HPM] PROXY ERROR: EHOSTUNREACH. localhost:3000 -> localhost:5000/
16.04.10 17:59:28 500 GET /

However, I can access localhost:5000 just fine when I try manually. Maybe I'm doing something wrong, but I haven't figured it out yet.

As for alternative number 2, since browser-sync doesn't handle SPAs, wouldn't I lose most of the benefits?

Thank you for your help.

Update 1
Since my nodejs server already handles both static file serving and AJAX API request, I think these should be my configs:

var proxyMiddleware = require('http-proxy-middleware');
var fallbackMiddleware = require('connect-history-api-fallback');

module.exports = {
    files: ['front-end/**/*.*'],
    server: {
        middleware: {
            2: proxyMiddleware('/', {
                target: 'localhost:5000'
            })
        }
    }
};

However, it doesn't work, I still get the same error messages.

Update 2
Nevermind the update 1.

So I forgot to add "http" in "target: 'localhost:5000'". Now it woks very well!

I have a small question that isn't related to this ticket. Is there a way to remove all the request logs in the terminal?

e.g. 16.04.10 18:59:09 304 GET /assets/fankit

I passed logLevel: 'silent' in the configs, but it seems to have no effect. I can create another ticket for that if you want.

[maximedupre]

@cgmartin I was updating my initial post when you submitted your comment. Please see the update.

[cgmartin]

1. A fix should be possible for the lack of error logging. Good catch.
2. could you describe your use-case a bit more? Curious how beneficial it would be for lite-server to support proxy mode vs. using browsersync itself.

[maximedupre]

I am working on a SPA and my comprehension of lite-server is that it works well with SPAs, as opposed to browser-sync.

The reason I need to use a proxy is because I am developing the front and back ends at the same time. Since the (nodejs) server and lite-server can't have the same port, I need to use the nodejs server port as a proxy to lite-server. Essentially, I am doing this: https://gist.github.com/sogko/b53d33d4f3b40d3b4b2e

[cgmartin]

Makes sense. Would either of these alternative options be viable for your use-case?

• Use lite-server as the static file server, and proxy via middleware to the separate nodejs back-end server on different port (see example).
• Replace lite-server with your own server that handles both static file serving and AJAX API requests, and use browser-sync in proxy mode for development. The index.html fallback functionality from lite-server would just need to exist in your static file server.

[maximedupre]

Ah right! Adding logLevel: 'silent' actually works, but it's removing a different layer of logs. Setting the first middleware to 0 solves the problem. Thanks!