Proxy URL not working with BrowserSync Gulp task

Question

Can someone tell me why my proxy URL isn't working with BrowserSync and Gulp? Instead, it just keeps using http://localhost:3000 as the dev URL.

gulp.task('watch', ['bs'], function() {
  gulp.watch('scss/*.scss', ['scss', browserSync.reload]);
});

gulp.task('bs', function() {
    browserSync.init(['css/style1.css', 'css/style2.css'], {
      proxy: 'dev.site.com'
    });
});

gulp.task('default', ['scss', 'watch']);

Your syntax looks off compared to docs -> http://www.browsersync.io/docs/api/#api-browserSync — Heikki, Feb 17 '15 at 17:31
Correct. It just completely ignores the dev URL I'm trying to use. (that matches my local WordPress site) — Cofey, Feb 17 '15 at 17:36
i've configurated some custom urls to my vhost and after some updates (imho) some internal configuration is changed. so now i set the `port` as configured on my vhost (port 80). now is working fine. hope help — Martino, Oct 31 '18 at 10:13

score 6 · Answer 1 · answered Nov 05 '15 at 00:32

6

I had the same problem and did the following to stop browser-sync from using the default adress/port:

gulp.task('bs', function () {
    browserSync.init(null, {
        proxy: 'localhost:8080', // 'dev.site.com' in your example
        port: 5000
    });
});

This worked for me and change the browser-scyn adress to localhost:5000

answered Nov 05 '15 at 00:32

Maximilian Lindsey

809
4
18
35

Hey, i m using like this `.browserSync({ files: [ 'public/**/*.js', 'public/**/*.css', './resources/**/*.php', './resources/**/*.less' ], proxy: '0.0.0.0:8181', port: 8282, ghostMode: { scroll: true } })` not working for me. but proxy port is working fine – Jyupin Oct 19 '16 at 08:24

score 1 · Answer 2 · answered Jan 14 '21 at 20:47

//Finally what worked for me:

gulp.task("serve", () => {
  browserSync.init(null, {
    proxy: "127.0.0.1:8000/",
    open: true,
  });
  gulp.watch(["src/templates/**/**/*.html"], gulp.series("html"));
});

gulp.task("default", gulp.series("html", "serve"));

score 0 · Answer 3 · answered Apr 12 '21 at 22:04

You need to use the port at the end of the proxy URL. The default is 3000, but you can specify one in the config. If you don't add the port at the end of the url, BrowserSync will not reload the page. This is what worked for me.

function server() {
  browserSync.init({
    proxy: 'dev.site.com', //alias
    port: 8080, //<-- changed default port (default:3000);
    open: false //<-- set false to prevent opening browser
  });
}

So in your browser you will visit: http://dev.site.com:8080

score -2 · Answer 4 · answered Jul 04 '16 at 14:28

To solve this issue when I was trouble in a similar scenario, I had to include the port option (which @maximilian mentioned in his answer) , and also the files option was needed as well.

gulp.task('bs', function() {
    browserSync.init({
        proxy: 'dev.site.com',
        port: 4040,
        files: ['*.html', '**/*.css', '**.*.js']
    });
});

score -6 · Accepted Answer · answered Feb 17 '15 at 17:43

-6

I think it works as expected.

Proxy an EXISTING vhost. BrowserSync will wrap your vhost with a proxy URL to view your site.

http://www.browsersync.io/docs/options/#option-proxy

answered Feb 17 '15 at 17:43

Heikki

15,329
2
54
49

11

I don't understand this answer. I'm getting the same problem as Cofey. Please can you elaborate at all? I need it to open http://test.dev rather than http://localhost:3000 :( – Karlgoldstraw Jul 13 '15 at 17:22
Can you elaborate on this? Why would anyone wrap the existing vhost instead of just accessing `localhost:3000` either way? – Jake Wilson Jun 21 '16 at 05:33
1

When the stuff they need to access is not in `localhost:3000`? – Heikki Jun 21 '16 at 09:08

Proxy URL not working with BrowserSync Gulp task

5 Answers5