CODEWITHSUNDEEP
google-chromegulpbrowser-sync
Michael Giovanni Pumo
Michael Giovanni Pumo

Reputation: 14784

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.

Upvotes: 5

Views: 31078

Answers (7)

Dannidona
Dannidona

Reputation: 13

Soo... I tried every method provided here but nothing worked. I was just messing with some different ways and finally got it to work

I just set a www in front of the domain like this

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

    // Browser sync config
    browserSync({
        port:3333,
        proxy: "http://www.name.local",
    });
});

Upvotes: 0

Neone
Neone

Reputation: 542

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

Upvotes: 0

gav_aus_web
gav_aus_web

Reputation: 199

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.

Upvotes: 3

StueyKent
StueyKent

Reputation: 347

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

Upvotes: 0

U r s u s
U r s u s

Reputation: 6978

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.

Upvotes: 1

Franz
Franz

Reputation: 86

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"

    });
});

Upvotes: 2

Michael Giovanni Pumo
Michael Giovanni Pumo

Reputation: 14784

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.

Upvotes: 17

Related Questions