Pretty URLs with Node.js/Gulp using .htaccess? - node.js

Question

I am deploying a static website with remote shared hosting. Each page has a .html extension, which I wanted to remove from the URLs to make them prettier.
So I added the following .htaccess file to the root of the website directory on the hosting server:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.html [NC,L]
This works perfectly on the hosting website, i.e. when I type in the url mywebsite.com/page, the server displays mywebsite.com/page.html without showing it in the URL.
The problem I have is that I am developing the website using Gulp with LiveReload. This is my gulpfile.js:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var pkg = require('./package.json');
// Copy vendor files from /node_modules into /vendor
// NOTE: requires `npm install` before running!
gulp.task('copy', function() {
gulp.src([
'node_modules/bootstrap/dist/**/*',
'!**/npm.js',
'!**/bootstrap-theme.*',
'!**/*.map'
])
.pipe(gulp.dest('vendor/bootstrap'))
gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
.pipe(gulp.dest('vendor/jquery'))
gulp.src(['node_modules/popper.js/dist/umd/popper.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
.pipe(gulp.dest('vendor/popper'))
gulp.src(['node_modules/jquery.easing/*.js'])
.pipe(gulp.dest('vendor/jquery-easing'))
})
// Default task
gulp.task('default', ['copy']);
// Configure the browserSync task
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: ''
},
notify: false
})
})
// Dev task with browserSync
gulp.task('dev', ['browserSync'], function() {
// Reloads the browser whenever HTML or CSS files change
gulp.watch('css/*.css', browserSync.reload);
gulp.watch('js/*.js', browserSync.reload);
gulp.watch('*.html', browserSync.reload);
});
Now, when I launch the development environment with gulp dev, all links that point to mywebsite.com/page are broken. So the Gulp development server does not append .html to the URLs like my hosting server does.
Is there any way to modify the development environment so the prettified URLs also work when I use gulp dev?

Answer 1

This can be done easily (without MAMP or mod_rewrite) using BrowserSync Options:
server: {
baseDir: "app",
routes: {
"/some_page": "app/some_page.html"
}
}
Found here.