JumpStart # 41 – Browser Link in ASP.Net Core MVC Application

Browser Link is a feature of Visual Studio (from 2013) which will help in refreshing web application in different browsers at once in debug mode. Browser Link uses SignalR to establish a communication channel between Visual Studio and browser. When browser link is in use, Visual Studio acts as SignalR Server and browsers will act as clients and any new changes will be propagated to browsers just with a button click in VS.

NOTE: Updated this tutorial on 2/26/2017 with MSBuild based Dotnet SDK.

Create an ASP.Net Core Application using VS 2017. I am using following version of SDK which is based on MSBuild/CSProj (remember that previous versions of ASP.Net Core are based on Project.json/XProj.).

image

Lets see how Browser link is going to work in ASP.Net Core Application. In CSProj, under Package References we should have following package listed.

<PackageReference Include="Microsoft.VisualStudio.Web.BrowserLink" Version="1.0.1" />

In the configure method of Startup.cs, we should have following middleware. IsDevelopment() check is used to ensure that we have browser link only in development mode but not in any other environment (especially production).

if (env.IsDevelopment())
{
    app.UseBrowserLink();
}

Now whenever the content on cshtml changes, we can simply click below browser link button to refresh all the connected browsers.

image

If you look at the generated HTML of the page, we will have following JQuery code.

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"requestId":"d23e3eb60c894e7e912f9ab7293dbbfd","requestMappingFromServer":false}
</script>
<script type="text/javascript" src="http://localhost:61416/a2d10da789f345318c752346c4018a10/browserLink" async="async"></script>
<!-- End Browser Link -->

If we look at the code, Visual Studio hosts the browserLink script at 61417 port (this is going to change for different applications on different machines) which will hold the SignalR channel to Visual Studio. when some content changes at Application, following request will be made by Visual Studio.

image

In return SignalR hub will communicate the associated browsers to reload the content.

image

That’s it for now. Happy Coding and Stay Tuned!!!

You may also like...