gulp + browser-sync Cannot GET / error

Question

I am learning the front-end build system currently gulp, i want to use brower-sync and the problem is it is not throwing an error in the commad line but instead when it brings up the browser it will not display my html file and it will say "Cannot GET /" error in the browser window. This is my gulpfile.js code

var gulp = require('gulp'),
   uglify = require('gulp-uglify'),
   compass= require('gulp-compass'),
   plumber = require('gulp-plumber'),
   autoprefixer = require('gulp-autoprefixer'),
   browserSync = require('browser-sync'),
   reload = browserSync.reload,
   rename = require('gulp-rename');


gulp.task('scripts', function() {
   gulp.src(['public/src/js/**/*.js', '!public/src/js/**/*.min.js'])
      .pipe(plumber())
      .pipe(rename({suffix: '.min'}))
      .pipe(uglify())
      .pipe(gulp.dest('public/src/js/'));
});

gulp.task('styles', function() {
   gulp.src('public/src/scss/main.scss')
      .pipe(plumber())
      .pipe(compass({
          config_file: './config.rb',
          css: './public/src/css/',
          sass: './public/src/scss/'
      }))
     .pipe(autoprefixer('last 2 versions'))
     .pipe(gulp.dest('public/src/css/'))
     .pipe(reload({stream:true}));
});


gulp.task('html', function() {
  gulp.src('public/**/*.html');
});  

gulp.task('browser-sync', function() {
    browserSync({
      server: {
         baseDir: "./public/"
      }
   });
});

gulp.task('watch', function() {
   gulp.watch('public/src/js/**/*.js', ['scripts']);
   gulp.watch('public/src/scss/**/*.scss', ['styles']);
   gulp.watch('public/**/*.html', ['html']);
});

gulp.task('default', ['scripts', 'styles', 'html', 'browser-sync', 'watch']);

i am using windows and git bash and version is "browser-sync": "^2.12.5" so what is the problem and try to explain for me in order to get something out of it.

Have you tried changing the baseDir for browser-sync ? try ../ or similar stuff — Manmeet S. Oberoi, May 02 '16 at 21:07
Have you tried changing the definition of browsersync variable, like so `var browsersync = require('browser-sync').create()`? — Alex Ljamin, Dec 09 '17 at 06:05

lofihelsinki · Answer 1 · 2019-02-26T19:14:37.427

Is there an index.html file in your ./public/ folder? If not, you need to tell browserSync what is your start page. You can also get browserSync to show the listing of the base directory, see update below.

You could also try to use public without the leading dot.

Edit: The startPath config directive does not seem to work, use index instead

...
gulp.task('browser-sync', function() {
   browserSync({
     server: {
        baseDir: "public/",
        index: "my-start-page.html"
     }
   });
});
...

Update: Actually you can get directory listing with browserSync. That way it would show a list of files in public, not the Cannot Get error

...
gulp.task('browser-sync', function() {
   browserSync({
     server: {
        baseDir: "public/",
        directory: true
     }
   });
});
...

Do you have the actual file on the server you're pointing to with `index`? — lofihelsinki, Sep 04 '20 at 04:15

score 6 · Answer 2 · answered Mar 02 '17 at 18:31

6

I got this to work when the index.html file was inside the same folder:

    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

answered Mar 02 '17 at 18:31

mediaguru

1,807
18
24

my gulp 3 gulpfile had an empty string as baseDir, changing from '' to '.' solved it in gulp4 and latest browserSync. Before change no HTML file could be loaded. Directory browsing worked just not individual file access. – Tyeth Mar 24 '20 at 12:06

score 4 · Answer 3 · answered Nov 01 '17 at 20:46

4

gulp.task('browser-sync', function() {
    browserSync({

      server: {
            baseDir: "./"
            },

            port: 8080,
            open: true,
            notify: false
    });
});

answered Nov 01 '17 at 20:46

Artem O

41
1

1

Please, describe the changes that you made so that other readers can benefit more from your answer – Dethariel Nov 01 '17 at 21:10

score 1 · Answer 4 · edited Oct 14 '17 at 16:06

1

gulp.task('serve',['sass'], function() {
    bs.init({
        server: "./app",
        startPath: "/index.html", // After it browser running
        browser: 'chrome',
        host: 'localhost',
        port: 4000,
        open: true,
        tunnel: true
    });

edited Oct 14 '17 at 16:06

Martin Evans

45,791
17
81
97

answered Oct 14 '17 at 15:33

user8776341

11
1

score 0 · Answer 5 · answered Oct 06 '16 at 09:38

I solved my "Cannot GET" errors in browser-sync by always pointing to a .html file in code, or by having a folder structure ending with and index.html

<a href="/about">About</a> <!-- Cannot GET error-->
<a href="/about">About</a> <!-- same code as above, but works if your site structure is:  ./about/index.html-->
<a href="/about.html">About</a> <!-- OK -->

My Gulp file for reference (using browser-sync with jekyll, so everything is in the ./_site folder, and the gulpfile is in ./)

var gulp = require('gulp');
var shell = require('gulp-shell');
var browserSync = require('browser-sync').create();

gulp.task('build', shell.task(['jekyll build --watch']));

// serving blog with Browsersync
gulp.task('serve', function () {
    browserSync.init(
        {
            server: {baseDir: '_site/'}
        }
    );

    // Reloads page when some of the already built files changed:
    gulp.watch('_site/**/*.*').on('change', browserSync.reload);
});

gulp.task('default', ['build', 'serve']);

Hope it helps.

Michelangelo

score 0 · Answer 6 · answered Feb 26 '17 at 13:26

0

May be you have not index.html in baseDir: '_site/'? In order to see your static web-page in the web-browser instead of that annoying message you have to rename a file your_file.html to index.html. This will solve Cannot GET/ problem.

answered Feb 26 '17 at 13:26

asvetly

1,739
16
17

score 0 · Answer 7 · edited Oct 29 '19 at 21:09

0

In my case, this helped me:

server: {
            baseDir: '.',
            index: "index.html"
        }

edited Oct 29 '19 at 21:09

Das_Geek

2,775
7
20
26

answered Oct 29 '19 at 20:42

Dariusz Bączyk

1

score 0 · Answer 8 · edited Nov 24 '19 at 01:44

gulp.task('server', function()
{
        browserSync.init(["public/src/css/","public/src/js"],{ 
            server: "./",
            startPath: "./index.html", // After it browser running
            //    browser: 'chrome',
            host: 'localhost',
            //       port: 4000,
            open: true,
            tunnel: true    }); 
});

gulp.task('default', ['scripts', 'styles', 'html', 'server', 'watch']);

gulp + browser-sync Cannot GET / error

8 Answers8

Linked