Browser Link in .Net Core: A nice example of SignalR

In this post, we will see Browser link feature of the Visual studio with Net Core.

This feature is quite old so you might know this but to all those who do not know about browser link.

Browser Link is a feature in Visual Studio that creates a communication channel between the development environment and one or more web browsers

In simple words:

• You implemented a feature during your development and you want to test this feature in multiple browsers
• In such case, you first run your application in Chrome – you need to make some changes in code and want to test it again in the Chrome
• What if you want to test your changes in multiple browsers at the same time? – For example in Chrome, Firefox, IE all at the same time
• In such cases, you can use the browser link which can be used to refresh your web application in several browsers at once, which is useful for cross-browser testing

Browser Link in .Net Core

From .Net Core 2.0 onwards, you are not required to do anything to use Browser Link feature because Browser link Nuget package Microsoft.VisualStudio.Web.BrowserLink is part of the global package Microsoft.AspNetCore.All.

In .Net Core 2.0 default code, you can see below line to enable Browser link in the development environment. It is added by default so you are not required to do anything to enable Browser link from .Net Core 2.0 onwards.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseBrowserLink();
app.UseDeveloperExceptionPage();
}

//// Other code

}

But if you are using .Net Core lower than 2.0 then you are required to install NuGet package: Microsoft.VisualStudio.Web.BrowserLink

Let us take a sample project to test this

You can create a new project with .Net Core 2.0 selected.

For now, let us take the project which we created during Twitter authentication demo.

Open Startup.cs class, you can find app.UseBrowserLink(); under Configure method. This code is added by default when you create a new project with .Net Core 2.0 template.

Next step is to Make sure Enable Browser Link is selected:

That is it. In short from .Net Core 2.0 onwards, you are not required to do anything to use Browser link, you can use it without doing any configuration.

Let us run our application in different browsers to test browser link:

Here we are running the application on Chrome and IE.

Now go back to the code and make any random changes in the code.

For example, I am changing something in Index.cshtml and after updating click on Browser link as shown below:

As soon as you click on Browser link, all the browsers which are open will be reflected with the changes automatically, I changed the text from Application uses to Neel’s Browser link demo:

How does the Browser link work?

The browser link uses SignalR.

• A communication channel is created between Visual Studio and different browsers
• So, the Visual Studio acts as a SignalR server which has multiple clients like the browsers
• Once we register Browser link in the middleware using app.UseBrowserLink();, a <script> reference is injected into every page from the server
• For example, in our demo app – the <script> tag is added to the body as shown below:

• Once something is changed in the Visual Studio, a request will be generated by the Visual Studio
• SignalR hub will communicate with the clients(browsers) to reload the content

It is a very nice example of SignalR.

I hope it helps.