CODEWITHSUNDEEP
proxygulpwindows-10wampbrowser-sync
Mark Phoenix
Mark Phoenix

Reputation: 117

BrowserSync proxy stuck loading

When I run Gulp the UI page works on http://localhost:3001, but on http://localhost:3000 the browser serves a blank page that is stuck loading, no console errors.

I'm using WAMP on Windows 10, Gulp version 3.9.1, BrowserSync version 2.24.4.

This setup was working fine until recently, this has me stumped.

gulpfile.js 

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var uglify = require('gulp-uglify');
var rename = require("gulp-rename");
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync').create();

gulp.task('sass', function(){
  return gulp.src('sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('css'))
    .pipe(browserSync.stream());
});

gulp.task('compress', function () {
  gulp.src('scripts/js/*.js')
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(rename({ suffix: '-min' }))
    .pipe(gulp.dest('scripts/minified/'));
});

gulp.task('browserSync', function() {
    browserSync.init({
        proxy: "experiments"
    });
});

gulp.task('watch',['browserSync', 'sass', 'compress'], function(){
    gulp.watch('sass/*.scss', ['sass']);
    gulp.watch('scripts/js/*.js', ['compress']);
    gulp.watch('*.php', browserSync.reload);
    gulp.watch('*.html', browserSync.reload);
    gulp.watch('scripts/minified/*.js', browserSync.reload);
})

Terminal output

[17:24:44] Using gulpfile ~\Documents\Web Design Local\host\experiments\gulpfile.js
[17:24:44] Starting 'browserSync'...
[17:24:44] Finished 'browserSync' after 9.99 ms
[17:24:44] Starting 'sass'...
[17:24:44] Starting 'compress'...
[17:24:44] Finished 'compress' after 2.2 ms
[Browsersync] 1 file changed (universal.css)
[17:24:45] Finished 'sass' after 174 ms
[17:24:45] Starting 'watch'...
[17:24:45] Finished 'watch' after 17 ms
[Browsersync] Proxying: http://experiments
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://redacted:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://redacted:3001
 --------------------------------------

Also looks like the ports are established correctly? Here's before the gulp task is run...

Command prompt output for netstat -ab before running gulp task

And after...

Command prompt output for netstat -ab after running gulp task

Upvotes: 6

Views: 7019

Answers (4)

Midz Elwekil
Midz Elwekil

Reputation: 441

After installing new windows I had the same issue where the browser keep loading without initialising the project.

the issue was Browser Sync package needed an update so I had done the following

run the terminal as administrator 
cd into the project folder
rm -rf node_modules (if you already have the package.json file)
npm install

also you might need to rebuild the node-sass so you could use the following

npm rebuild node-sass

then run the gulp project and everything should work fine

Upvotes: 1

Nadia
Nadia

Reputation: 122

This problem was driving me nuts too because recently my proxys stopped working as well. I was trying to think what I changed - finally I realized I upgraded MalwareBytes to the latest version and it's firewall settings were messing with my ports. I disabled it and now it is working.

I hope this can help someone!

Upvotes: 5

Mere Development
Mere Development

Reputation: 2519

I've set up gulp + browsersync as a test and I think – after some messing about and doc reading – you can change this:

gulp.task('browserSync', function() {
    browserSync.init({
        proxy: "experiments"
    });
});

to this:

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: 'experiments',
        host: 'experiments',
        open: 'external'
    });
});

...and it'll work.

Notes:

  • If unset, host defaults to null.
  • open is the browser action to take and defaults to true. Other options include false to NOT open a browser, and external as used here to open the URL specified in host.
  • I'd also suggest you use an extension, even if it is just for organisation in your Filesystem, vhosts setup and/or WAMP lists etc. .dev is useless over http in chrome these days, and .local messes with Multicast DNS services. I use .mere, you could use .pix ;) - your safest most future-proof bet is to use .test as per RFC 6761

Upvotes: 1

Daryl
Daryl

Reputation: 195

when you go to experiments in the browser does it work?

It could be a browser update rather than gulp

I would try changing your host to dev.experiments.co.uk

then change the proxy to dev.experiments.co.uk

Upvotes: 0

Related Questions