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.

See [this question](http://stackoverflow.com/questions/30233218/browser-sync-is-blocked-by-chrome-csp). — U r s u s, Aug 23 '15 at 22:28
@Ursus It was to do with a default entry in the hosts file on a Mac. Answered below! — Michael Giovanni Pumo, Sep 28 '15 at 08:16
Clearing the host cache solved the issue for me for now. I'll report back if this fix is only temporary, which I suspect it to be. — Bonk, Aug 25 '16 at 15:16
As suspected it was only a temporary fix. The accepted answer seems to have fixed it. I was worried about editing that file since it was written inside not to change it. Caution be danged. — Bonk, Aug 25 '16 at 18:35
Out of curiosity, how were you running the command to stand up the server? For me, I had to add 'serve' to the end of my command - 'npm run dev serve' did the trick. — tklives, Sep 27 '16 at 15:07

score 16 · Accepted Answer · answered Sep 28 '15 at 08:13

16

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.

answered Sep 28 '15 at 08:13

Michael Giovanni Pumo

14,338
18
91
140

2

@thomas This depends on what OS you're using. Every machine has one. I would suggest Googling 'where is the hosts file on [ Windows | Mac | Linux ]' etc, depending on what's relevant to you. The exact location sometimes differs between OS versions too. On my Mac running Yosemite, it's at: /private/etc/hosts - to get there, use the 'Go to folder...' option in Finder under the 'Go' tab. – Michael Giovanni Pumo Jan 06 '16 at 15:35
For some reason, this made it work on my system. Hosts file at /etc/hosts – Ole Jan 21 '16 at 12:37
This should be carved in stone on the BrowserSync home page. Lost an entire day on this. Linux here btw – gpasci Jun 27 '18 at 20:55

gav_aus_web · Answer 2 · 2018-04-28T18:32:49.943

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.

score 2 · Answer 3 · edited Nov 07 '15 at 14:09

2

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"

    });
});

edited Nov 07 '15 at 14:09

Tunaki

132,869
46
340
423

answered Nov 07 '15 at 13:44

Franz

86
2
6

score 1 · Answer 4 · edited May 06 '17 at 21:39

1

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.

edited May 06 '17 at 21:39

Tyrone Wilson

4,328
2
31
35

answered Aug 23 '15 at 21:58

U r s u s

6,680
12
50
88

1

No joy for me there. Since it works in Firefox and Safari but not Chrome, I feel there must be something more going on with Chrome itself. – Michael Giovanni Pumo Aug 23 '15 at 22:21

score 0 · Answer 5 · answered Nov 15 '17 at 21:07

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

score 0 · Answer 6 · answered Nov 07 '22 at 12:28

In Windows 11, I've edited my hosts file at Windows/System32/drivers/etc, by adding new mapping for 127.0.0.1 to my project external URL and now it works!

127.0.0.1   www.myname.test
127.0.0.1   myname.test

I'm using tailpress theme builder for wordpress which includes browsersync support :) Thanks for michael-giovanni-pumo for providing me with idea

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

6 Answers6

Linked