Adding Express Server Monitoring to an Aurelia.js Gulp+BrowserSync Environment

Trying to Run Aurelia.js in a Node.js and Express Environment -- Part 5

Trying to Run Aurelia.js in a Node.js and Express Environment -- Part 1

Trying to Run Aurelia.js in a Node.js and Express Environment -- Part 2

Trying to Run Aurelia.js in a Node.js and Express Environment -- Part 3

Trying to Run Aurelia.js in a Node.js and Express Environment -- Part 4

The local development environment for Aurelia.js packages is set up to use BrowserSync, allowing you to immediately see source code changes without manually refreshing the browser.

This time, I want to try adding monitoring for Express changes to Aurelia's Gulp and BrowserSync environment.

I searched to see if anyone else was doing something similar and found the following site, which I used as a reference.

⇒ Reference: Let's Use BrowserSync with Gulp + Node + Express

INSTALLING GULP-NODEMON TO CHECK FOR SERVER CHANGES

First, we'll install `gulp-nodemon`, which restarts the server when changes are detected in Express or other related files.

⇒ Reference: https://www.npmjs.com/package/gulp-nodemon

npm install --save-dev gulp-nodemon

CREATING A NODEMON TASK

We'll add the nodemon task to `serve.js`, which is loaded when `gulp watch` is run, so that it executes together when BrowserSync starts.

var gulp = require('gulp');
var runSequence = require('run-sequence');
var nodemon = require('gulp-nodemon');
var browserSync = require('browser-sync');

function reload() {
  browserSync.reload({ stream: false });
};

// this task utilizes the browsersync plugin
// to create a dev server instance
// at http://localhost:9000
gulp.task('browsersync', function() {
  browserSync({
    online: false,
    open: false,
    proxy: 'http://localhost:5000',
    port: 9000
  });
});

gulp.task('nodemon', function () {
  nodemon({ 
    script: 'app.js',
    ext: 'js html css',
    ignore: [
      'build',
      'dist',
      'doc',
      'jspm_packages',
      'node_modules',
      'src',
      'styles',
      'test'
    ],
    env: {
      'NODE_ENV': 'development'
    }
  }).on('restart', function() {
        reload();
  });
});

gulp.task('serve', function(callback) {
  return runSequence(
    'build',
    'browsersync',
    'nodemon',
    callback
  );
});

var runSequence = require('run-sequence');
var nodemon = require('gulp-nodemon');

This time, we'll use `runSequence` to define the task execution order, so we need to `require` it along with `gulp-nodemon`.

gulp.task('browsersync', function() {
  browserSync({
    online: false,
    open: false,
    proxy: 'http://localhost:5000',
    port: 9000
  });
});

We configure BrowserSync to use a proxy server.

For this setup, the port `app.js` will run on is 5000.

The `server` option cannot be used simultaneously with `proxy`, so we will remove it.

gulp.task('nodemon', function () {
  nodemon({ 
    script: 'app.js',
    ext: 'js html css',
    ignore: [
      'build',
      'dist',
      'doc',
      'jspm_packages',
      'node_modules',
      'src',
      'styles',
      'test'
    ],
    env: {
      'NODE_ENV': 'development'
    }
  }).on('restart', function() {
        reload();
  });
});

When the server restarts, `reload();` is configured to run.

This setup is based on the Aurelia skeleton navigation project.

Startup file (if you're using `express-generator`, the startup file will be located at `bin/www`)

Below, `runSequence` is used to define the order of task execution when the `serve` task is run.

gulp.task('serve', function(callback) {
  return runSequence(
    'build',
    'browsersync',
    'nodemon',
    callback
  );
});

TRYING TO RUN GULP WATCH

gulp watch

For example, if you change the 'Example app listening' text output by `console.log`, you should see that after saving the changes, the server restarts and the browser reloads.

※ Note: If `gulp bundle` has been run, changes will not be reflected because it references the bundled JS and HTML.

When working, use `gulp unbundle` so that it directly reads your working files.

※ While unbundled, work by modifying the JS and HTML files in the `src` folder.