matchai matchai - 5 months ago 84
Node.js Question

Gulp Browsersync + Babel Express server waiting for localhost indefinitely

I'm running a basic static server with Express in a separate server file.
In my Gulpfile, I use nodemon to run the server file and then pass its address to browsersync to proxy through.

When the browser navigates to the webpage, I am presented with an infinitely loading page which is "Waiting for localhost:3000". The website loads instantly after refreshing the page.

Below are my express server and gulpfile:

// server.js

import express from 'express';
const app = express();

app.use(express.static('build'));
app.listen(4000);


// gulpfile.babel.js

import browser from 'browser-sync';
import gulp from 'gulp';
import plugins from 'gulp-load-plugins';

const $ = plugins();

gulp.task('default',
gulp.series(server, browsersync, watch));


// Start the server with nodemon
function server(done) {
return $.nodemon({
script: 'server.js',
exec: 'babel-node',
})
.on('start', () => {
done();
});
}

// Proxy the server with browsersync
function browsersync(done) {
browser.init({
proxy: 'http://localhost:4000',
});
done();
}

// Watch for file changes
function watch() {
gulp.watch('scripts/**/*.js').on('change', gulp.series(browser.reload));
}

Answer

This issue was unfortunately caused by babel-node.