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.

Answer 2

I have had this problem for weeks! I finally figured out the direct combination to resolve this on: Mac Sierra 10.12.6.

Indeed, the answer above with the most points, is correct. However, i found i had to flush my DNS Cache directly after updating my host file, otherwise i would continue to get the white screen of death - DNS caching was my issue :/

Here are the steps that finally resolved this for me:

1. Disconnect any existing gulp servers (and in my case VPN connections that affiliate with the server you are trying to proxy)

2. In your 'hosts' file:

change

::1    localhost

to

#::1    localhost

then save that file

3. Open 'Terminal'

4. Copy / paste this into Terminal, then hit enter (these commands flush your DNS cache)

sudo dscacheutil -flushcache;sudo killall -HUP mDNSResponder;

5. Reconnect to VPN (if any), re-run your gulp browsersync command

And voila! You should be able to get past the white screen, and the forever spinning browser wheel.

Answer 3

I have similar problems before, I tried these combinations, sometimes just changing the paths helps.

gulp.task('browser-sync',['nodemon'], function() {
    browserSync.init(null, {
       // proxy:"http://localhost:3000"
       //server: "./server/app.js"
       proxy:"localhost:3001"

    });
});

Answer 4

I've been successfully using the following in my app.

From my gulpfile.js:

gulp.task('browserSync', function() {

  // Browser sync config
  browserSync({
      proxy: 'localhost:3000'
  });

});

Hope it helps.

Answer 5

Manually setting the browser property in the init function worked for me.

gulp.task('browserSync', () => {
        browserSync.init({
            server: {
                baseDir: task.dir.base,
                middleware: [
                    webpackDevMiddleware(bundler, {
                        publicPath: webpackConfig.output.publicPath,
                        stats: 'errors-only'
                    })
                  ]
            },
            browser: 'chrome'
        });
    });

I'm running windows 10 x64