What am I doing wrong when setting up gulp browser-sync?

Question

gulp.js

This is my first experience with gulp.
I managed to set up all the necessary plugins except for "browser-sync".
When I start it, the contents of the directory appear on port 3000, and 3001 as the settings should. But the site itself does not appear. and even if you go through the directory to index.html, it gives the error "Cannot GET /app/index.html"
Also in the path I specify the "app" folder as the root, but it still starts from the project folder. (The "app" folder lies inside the project) I read a lot of articles and watched a lot of videos on how to start it, but when I repeat it, two variants of problems appear about the first one already described, and the second is that if I add for example

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

then the error "ReferenceError: browserSync is not defined" appears and refers to the location "ge', bro".
And another moment on all the videos I saw that after launch, a new browser window automatically appears. This doesn't happen to me.
What is installed:
"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.

// Лишнее я убрал, но пробовал разные варианты. Я так понял что этот код должен работать при любых обстоятельствах.
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);

The given code starts the server, but I get the first problem. I also tried the 2 options below which give the same result.

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);
});

If I uncomment any line with "gulp.watch" I get an error. I'll describe it the same way above.

Answer 1

const brSync = ...
I think, without further ado, it is obvious
and more:

brSync.init({
  sever: {  // sever?
    baseDir: "./app"
  },
  notify: false
});