Article
0 comment

Speed up development in ‘Yo Office’ through browser-sync

Use browser-sync with yo office

Last June all default yeoman webapp generator got a new web server component named browsersync.io.
While the web server component of those generators used components such as connect, ‘gulp-webserver’ and ‘live reload’. Browser-sync overs similar and maybe better development support at once. Making configuration and integration easier.


In addition browser sync offers additional support for advanced debugging, such as bandwidth simulation, CSS outlining and test multiple browsers at once, by syncing call the actions done on the user interface across multiple browser instances.
Sounds good to you? Well, I have used this tool a lot since June in a couple of projects and I find it really useful because it allows you to accomplish things much faster and more accurate.
Let me guide you how browser-sync can be integrated into your ‘yo Office!’ project.

Problem with current ‘Yo Office!’

Whenever you change your code of an Office add-in you have to refresh the add-in manually. Opening the add-in and closing the add-in or maybe close the Office application can be very time consuming. Browser-sync can help because whenever you change something your code this change will be detected automatically and the web site will be automatically refreshed.

Install browser-sync

First, create a new project instance of ‘Yo Office!’ once this has been accomplished many files was copied to your project directory and many components have been downloaded through the ‘Node Package Manager’ (npm). To add browser-sync to these lists of components you simply need to execute the following command.

npm install browser-sync --save-dev

The ‘–save-dev’ option will save browser-sync to the list of required packages. Those packages are stored in a file named ‘package.json’ and can be found in the root of your project.
In future if you download the source code from your TFS or your Git repository this component will be automatically installed too through npm install.
If you use this generator on Windows you might have some troubles installing browser-sync. If you use it on another system, then you can skip the next section.

Install browser-sync on Windows

Sadly, Windows has a bit different story. When you have Visual Studio installed, you might be able to install browser-sync without any error.
Sometimes it works when you just have Visual C++ installed and sometime you need to install Python. This is something that no one can tell you for sure.
There is one successful way to get browser sync running by executing the following command.

npm install browser-sync --save-dev --no-optional

This --no-optional will install only the native Nodejs components. The performance optimized Version of browser-sync will use a C++ compiled component, that needs to be compiled on each client during installation. So in case of Windows the --no-optional option is, what I found out, the only fail safe method for the user.

Modify gulpfile.json

Once the new web server has been installed, they need to be added in the so called task runner of ‘Yo Office!’. Most options of this generator are stored in the file ‘gulpfile.js’ and can be found in the root folder of the generator.
The first thing that needs to be done is to reference ‘browser-sync’ on top of the generator. This works similar like adding a reference in C#. Create a new variable named ‘browserSync’ right below the already defined variables.

'use script';

var gulp = require('gulp');
var fs = require('fs');
var minimist = require('minimist');
var xmllint = require('xmllint');
var chalk = require('chalk');
var $ = require('gulp-load-plugins')({ lazy: true });
var del = require('del');
var runSequence = require('run-sequence');
var Xml2Js = require('xml2js');

// Import browser sync
var browserSync = require('browser-sync');

// Issue reload on changes
var reload = browserSync.reload;

Next I defined another variable named ‘reload’ that references the function of ‘browserSync.reload()’. This is just for convenience because I can now simply use ‘reload’ throughout the gulp file. By calling this function all attached front end devices connected to the add-in will be automatically refreshed.

Change gulp task ‘serve-static’

The next thing that needs to be done is to integrate ‘browser-sync’ as the new web server because the previously used web server is not needed anymore. Instead the following code needs to be inserted in the ‘serve-static’ gulp task.

gulp.task('serve-static', function () {

    // init browser sync
    browserSync({
        notify: false,
        port: 8443,
        server: {
            baseDir: ['.'],
            directory: true,
            routes: {
                '/bower_components': 'bower_components'
            }
        },
        https: true
    });

});

The first part is the overall configuration of ‘browser-sync’. ‘notify’ generates a bubble on the web site when the page refreshes. The ‘port’ define the tcp port the web server is running on.
In the server section some additional configurations of the web server are specified. ‘BaseDir’ define the root of the web server. Directory set to true to enable directory listing and finally the folder of the bower_components will be mapped directly on the web server under ‘/bower_components’.

Watch file changes to automatically refresh the user interface

The second and last part of the configuration in the gulp task ‘server-static’. Implement a watch for file changes that end with ‘.js’, ‘.css’ or ‘.html’. When a change is detected web server forces a refresh of the web site for all clients.

gulp.task('serve-static', function () {

    // init browser sync
    browserSync({
        notify: false,
        port: 8443,
        server: {
            baseDir: ['.'],
            directory: true,
            routes: {
                '/bower_components': 'bower_components'
            }
        },
        https: true
    });

    // reload if any of those file changes
    gulp.watch([
            './**/*.js',
            './**/*.html',
            './**/*.css'
        ])
        .on('change', reload);

});

After that the configuration has been completed and you can now start your web server as you normally would do.

Demo the changes

Finally, let me show you how this all fits together an work in practice. I recorded this small screencast to give you a better overview of the changes and how they work.

[youtube https://www.youtube.com/watch?v=YFvlJNWS-Qo]

Final considerations

I think it is a really good addition to the Office generator, because it allows developers to implement things faster and in a more convenient way.
In this blog post I just scratched the surface of what you can do with browser sync. The next blog post will contain more advanced techniques that you can use to test you add-ins better.

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.