Browser Sync in Visual Studio

Standard

One may use Browser Sync node plugin in order to keep multiple browsers & devices in sync when building websites.

Installation:

  • install NodeJS
  • install Browser Sync by typing below command in CMD
        npm install -g browser-sync

    Setting in Visual Studio:

    • Open your project in VS (I am using VS2013 for tutorial, have successfully tested on VS2012 and VS 2015)
    • Right Click on web project and select Properties option11
    • Select Web Tab from properties window12
    • Choose Dont open a page. Wait for a request from an external application from Start Action sub menu, then note the port number from project URL text box and save the properties file (ctrl + s)13
    • Now right click on project, Select Power Commands and click on Open Command prompt14 
    • Execute below command in CMD, Change port number which you copied earlier from Project URL textbox, mention path of files which you want to monitor like css, js, html, cshtml etc.
      Please note in CMD always make sure it is pointing towards your project (for example in this case c:\Users\hassan.muhammad\Desktop\MS\bing\Bing.Web>, otherwise browser will look for js,css and html files from root folder and will not reload changes on browser. 
       browser-sync start --proxy localhost:3495 --files "content/*.css, scripts/*.js, views/**/*.cshtml"

      15

    • As soon you execute above statement in CMD, this will trigger browser-sync and it will load your project in browser16 
    • Browser-sync notification will also be available on your browser for a while confirming any changes you made to these files will be reloaded on browser automatically17 

      [In order to use browser-sync as part of your automation workflow with GulpJS]

Advertisements

One thought on “Browser Sync in Visual Studio

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