Chrome can't open localhost:3000 with Gulp / BrowserSync

Question

For some reason, no matter what I try, Google Chrome never seems to be able to display http://localhost:3000 (or any other specified port number for that matter) when starting up a server with BrowserSync through Gulp.

Navigating to the same URI in Firefox, shows that it works and that BrowserSync is connected.

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: './'
        },
        port: 8080
    });
});

I'm specifying port 8080 above as an alternative, but even using the default 3000 does not work in Chrome. Firefox seems to be able to work with either.

I've been to: chrome://net-internals/#dns and cleared the host cache, restarted, etc. Nothing works.

In Chrome I simply get the message: ERR_CONNECTION_REFUSED

Any ideas? Thanks.

PS - Also works in Safari.

Answer 1

I figured out the issue if this helps anybody.

Accessing the site through the public IP that BrowserSync gives worked, but I still needed localhost:3000, so I investigated further into the hosts file on Mac.

By default it seems this line was the one affecting the connection:

::1    localhost

All you have to do is comment this line out and all should be fine:

#::1    localhost

Hope this helps someone with a similar issue using Gulp and BrowserSync with Chrome on a Mac.