Mashup: Browser-Sync, Aurelia & VS 2015

I’ve been experimenting with (and loving) Aurelia’s skeleton navigation application (v 18.1 as of this post) and been working on merging it into a VS 2015 Web API Project. You can find it here.

One thing I stumbled on was getting browser-sync, as defined in the gulp task, to work in visual studio. (I wanted to try and see if I could make this work rather than the Browser Link built into VS).

A few quick changes…

The serve gulp task (serve.js) is where the configuration for browser-sync is defined. When it’s called from the watch task, it will reload the browser after the build tasks are run (btw this workflow with the tdd task running and browser-sync in the background is a tremendous improvement. I have instant feedback on terrible decisions).

Project properties

Verify your port matches what’s configured for browser-sync. In my case, 9000 matches what’s in my gulp task. Then uncheck the Launch Browser option:

2015-09-25 09_57_19

Unfortunately, after starting the watch task with the default configuration, I kept getting a 404  (Cannot GET /) error, so I ended up using http-proxy-middleware to get things running on my corporate intranet.

updated serve.js

var gulp = require('gulp');
var browserSync = require('browser-sync');
var proxyMiddleware = require('http-proxy-middleware'); 

// this task utilizes the browsersync plugin
var proxy = proxyMiddleware('**', { target: 'http://localhost:9000' });

gulp.task('serve', function (done) {
   
    browserSync({
        open: false, // Stop the browser from automatically opening
        port: 9000, // Use a specific port (instead of the one auto-detected by Browsersync) 
        server: {
            baseDir: ".",
            middleware: [proxy]
        }
    }, done);
});

Finally, start without debugging (or debug if you have breakpoints) and fire off the gulp watch task (if you don’t have vs running first you may get an access denied error)

The browser-sync instance will be running on port 9001.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s