Use BrowserSync with Visual Studio

BrowserSync is a synchronized browser testing tool with an ever-expanding suite of features. Fundamentally, BrowserSync will watch files for changes, alleviating the need to manually refresh the browser. In this tutorial I’ll explain how to integrate BrowserSync with Visual Studio.

Installation

You can find [instructions for installing Node.js and the BrowserSync module](You can find instructions for installing Node.js and the BrowserSync module at the BrowserSync website. The fun begins with configuring BrowserSync to start in proxy mode so it can find the IIS Express server Visual Studio starts when you run a web project.) at the BrowserSync website. The fun begins with configuring BrowserSync to start in proxy mode so it can find the IIS Express server Visual Studio starts when you run a web project.

Configuration

With the BrowserSync module successfully installed, open a Visual Studio web project and double-click on the project’s Properties in the Solution Explorer. In the properties window under Web, set the Start Action to Don't open a page. Wait for a request from an external application. We don’t need Visual Studio to open a page for us since we’ll have BroswerSync do that.

Under Servers, note the port on which IIS Express is serving your project. This value is located in the Project URL field. It will be in the format, http://localhost:59181/, with the 59181 being a port unique to the particular project.

Run you project, either with or without debugging. Unless I’m using breakpoints, I usually run without debugging so I can change and re-build compiled files without having to restart BrowserSync.

Open the terminal and run the command below (be sure to replace the port value). This command opens your browser and refreshes the page whenever you make changes matching the specified directories and file types.

browser-sync start --proxy localhost:59181 --files "content/_.css, scripts/_.js, views/\*_/_.cshtml"

Grunt Integration

To optimize your workflow a step further, you can integrate BrowserSync with the Grunt task runner. For the purpose of this tutorial, I’ll assume you already have Grunt up and running.

Open the terminal in your project directory, and install BrowserSync’s Grunt plugin to your project:

npm install grunt-browser-sync --save-dev

Next, add the BrowserSync configuration section to your Gruntfile.js. Note that I’m using another watch task to compile my Sass files, so I’ve set an option in the BrowserSync configuration to handle this. If you have other watch tasks, be sure to add this watchTask option and call other watch tasks after the BrowserSync task.

module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),

        browserSync: {
            dev: {
                bsFiles: {
                    src: [
                        '../css/*.css',
                        '../**/*.cshtml',
                        '../scripts/app.js'
                    ]
                },
                options: {
                    watchTask: true,
                    proxy: 'localhost:59181'
                }
            }
        },

        sass: {
            options: {
                includePaths: ['bower_components/foundation/scss']
            },
            dist: {
                options: {
                    outputStyle: 'nested'
                },
                files: {
                    '../css/app.css': '../scss/app.scss'
                }
            }
        },

        watch: {
            grunt: { files: ['Gruntfile.js'] },

            sass: {
                files: '../scss/**/*.scss',
                tasks: ['sass']
            }
        }
    });

    grunt.loadNpmTasks('grunt-browser-sync');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-sass');

    grunt.registerTask('default', ['browserSync', 'watch']);

}

With this configuration in place, run your project. Finally, open the terminal and run grunt from the directory of your Gruntfile.js to get started with BrowserSync.

Optimization Grunt