Что делаю не так при настройке gulp browser-sync?

Это мой первый опыт работы с gulp.
У меня получилось настроить все необходимые плагины за исключением "browser-sync".
При запуске у меня на 3000 порту появляется содержимое каталога, а 3001 как должно настройки. Но сам сайт не появляется. и даже если пройти по каталогу до index.html то выдает ошибку "Cannot GET /app/index.html"
Так же в пути я указываю папку "app" как корень но он все равно стартует с папки проекта.(папка "app" лежит внутри проекта) Прочел много статей и просмотрел много видео как его запустить, но при повторении появляются два варианта проблем о первой уже описал, а вторая заключается в том что если я добавляю например

"gulp.watch('./app/*.html').on('change', browserSync.reload);"

то появляется ошибка "ReferenceError: browserSync is not defined" и ссылается на место "ge', bro".
И еще момент на всех видео я видел что после запуска автоматически появляется новое окно браузера. У меня такого не происходит.
Что установлено:
"devDependencies": {
"autoprefixer": "^9.6.1",
"browser-sync": "^2.26.7",
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
"gulp-csso": "^3.0.1",
"gulp-uglify-es": "^1.0.4",
"html-minifier": "^4.0.0"
},
"dependencies": {
"del": "^5.1.0"
}
Теперь код:

// Лишнее я убрал, но пробовал разные варианты. Я так понял что этот код должен работать при любых обстоятельствах.
const brSync    = require('browser-sync').create();

function watchB(){
	brSync.init({
		sever: "./app"
	});
	//gulp.watch('./app/*.html').on('change', browserSync.reload);
	//watch('app/css/*.css').on('change', browserSync.reload);
	//watch('app/js/*.js').on('change', browserSync.reload);
}

exports.w   = series(watchB);

Данный код запускает сервер, но я получаю первую проблему. Еще я пробовал 2 варианта ниже которые дают такой же результат.

gulp.task('s', function () {
	brSync.init({
		sever: {
			baseDir: "./app"
		},
		notify: false
	});
	//gulp.watch('./app/**/*.html').on('change', browserSync.reload);
	//gulp.watch('app/css/*.css').on('change', browserSync.reload);
	//gulp.watch('app/js/*.js').on('change', browserSync.reload);
});

gulp.task('s', function () {
	browserSync.init({
        server: "./app"
    });
	//gulp.watch('./app/**/*.html').on('change', browserSync.reload);
	//gulp.watch('app/css/*.css').on('change', browserSync.reload);
	//gulp.watch('app/js/*.js').on('change', browserSync.reload);
});

Если я раскоментирую любую строку с "gulp.watch" то получаю ошибку. Так же описную выше.