google-chromegulpbrowser-sync

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


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.


Solution

  • 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.