Knowledgebase

If you want to speed up your SPA development process, it would be nice if you could reload all browser currently showing your SPA, when you press CTRL-S in Visual Studio 2013. The build-in Browserlink provides this feature for ASP .NET WebForms en ASP .NET MVC, but you could also use BrowserSync, which will work with any editor.

BrowserSync

1. Download node.js http://nodejs.org/download/

2. Install node.js (next – next – finish)

3. Open a command prompt (with administrator privileges) and enter:

4. npm install -g browser-sync

5. Change directory to the location of your Visual Studio solution file:

    – CD “C:\Projects\MyProject”

5. Start your web application in Visual Studio by pressing F5

    – Look at the browser address bar to get the URL to connect BrowserSync to, in my case localhost:50367

6. To start watching all files in all subfolders, at the command prompt enter:

    browser-sync start –proxy "localhost:50367" –files "**.*"

This will start a new instance of the default browser on an other port, showing your site connected to BrowserSync

In my case the new url was: http://localhost:3000/

Now when you edit a file in Visual Studio en press CTRL-S the browser at http://localhost:3000 will be refreshed.

BrowserLink

BrowserLink is provided in the box with Microsoft Visual Studio 2013, but OOB it will not work with SPA applications created with only html, JavaScript and CSS files.

To get BrowserLink working with those kind of web applications add the following to the web.config:

<system.webServer>
    <handlers>
            <add name="Browser Link for HTML" path="*.html" verb="*"
           type="System.Web.StaticFileHandler, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
           resourceType="File" preCondition="integratedMode" />
    </handlers>
  </system.webServer>

The good thing about BrowserLink that it is in the box and you don’t have to specify all subfolders you want to watch.

The downside is that you still have to use CTRL-S and CTRL-ALT-ENTER. This can be an upside if you want to edit multiple files en then refresh the connected browsers.

For now I will stick with BrowserLink, because it’s in the box.

Note: when using the “empty” asp .net template, I could not get BrowserLink to work, but when I used the web api template all was just fine.