Browser Sync proxy not working

Question

I'm using Gulp with Browser Sync and XAMPP to work on a Wordpress website I'm building.

Here's my Gulp setup:

var gulp = require('gulp');
var sass = require('gulp-sass');
var gulpif = require('gulp-if');
var useref = require('gulp-useref');
var browserSync = require('browser-sync').create();
var uglify = require('gulp-uglify');
var cssnano = require('gulp-cssnano');

gulp.task('sass', function() {
    return gulp.src('assets/css/dev/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./'))
    .pipe(browserSync.reload({
        stream: true
    }))
});

gulp.task('browserSync', function() {
    browserSync.init({
        server: {
            proxy: 'http://localhost/turner/',
        },
        port: 80,
        logLevel: 'debug',
    })
});

gulp.task('watch', ['browserSync', 'sass'], function() {
    gulp.watch('assets/css/dev/**/*.scss', ['sass']);
});

The problem I'm having is that my localhost is working on port 80 and browser-sync tries to open the 81 port instead. See screenshot attached.

I disabled Skype from using the 80 port, checked the Windows processes and only Apache is using this port.

No matter what I do, browser-sync always tries to open localhost:81 instead of 80 and so I can't use it. Note that gulp, browser-sync and all other things are up to date, installed the latest versions.

Thanks!

score 0 · Answer 1 · answered Mar 23 '17 at 13:54

Browser-sync can’t work on the same port with the web-server. Browser-sync increments port number automatically because the port is occupied by your web-server. Don’t use port option at all. And since you run your webserver on port 80, you don’t need to specify it in proxy. Therefore this should work:

gulp.task('browserSync', function() {
    browserSync.init({
        server: {
            proxy: 'http://localhost',
        },
       logLevel: 'debug',
    })
});

Browser Sync proxy not working

1 Answers1