SignalR tutorial: Client Side Library Install

[mdladue]

Description

Hi, I'm thinking it might be good to mention an alternate way of adding a client-side library via the file system. This can be helpful for users who may want to use npm instead of unpkg to install SignalR. However, it doesn't work if I only add files from the dist/browser folder so I have to include all library files, and in fact that doesn't always seem to work either. Alternatively the user could just manually copy the entire signalr folder into the js folder, and then Visual Studio seems to add the folder to the project automatically at some point after building or running it; I'm thinking this could also be a bug in Visual Studio.

Also, if I only add the mentioned files from unpkg I get warnings in the console about other debugging files like map files not being present.

Page URL

https://learn.microsoft.com/en-us/aspnet/core/tutorials/signalr?view=aspnetcore-9.0&tabs=visual-studio

Content source URL

https://github.com/dotnet/AspNetCore.Docs/blob/main/aspnetcore/tutorials/signalr.md

Document ID

5e3fbe1d-c97f-9940-4f0c-067d4b2112b1

Article author

@bradygaster

Related Issues

[wadepickett]

@qstli, thanks for your suggestion! I appreciate your input in providing an alternative method for adding the client-side library via the file system. However, we do try to keep these get started "first app" tutorials as reasonably simplistic as we can so beginners quickly understand the minimum needed to get going. Adding the alternative I think would deviate from that goal a bit too much for beginners.

That said, I do agree that we could include the map files along with a very brief note on their purpose. The enhanced debugging experience would make it easier to follow and understand the code without adding much complexity to this beginner level tutorial.

Here’s an example draft update for that section I'll refer to when I'm able to address this issue in an upcoming doc update sprint:

Add the SignalR client library

The SignalR server library is included in the ASP.NET Core shared framework. The JavaScript client library isn't automatically included in the project. For this tutorial, use Library Manager (LibMan) to get the client library from unpkg. unpkg is a fast, global content delivery network for everything on npm.

Visual Studio Visual Studio Code Visual Studio for Mac In Solution Explorer, right-click the project, and select Add > Client-Side Library.

In the Add Client-Side Library dialog:

Select unpkg for Provider.
Enter @microsoft/signalr@latest for Library.
Select Choose specific files, expand the dist/browser folder, and select:

• signalr.js
• signalr.min.js
• signalr.js.map
• signalr.min.js.map.

Set Target Location to wwwroot/js/signalr/.
Select Install.

LibMan creates a wwwroot/js/signalr folder and copies the selected files to it.

The signalr.js.map and signalr.min.js.map files are source map files. They map the minified code back to the original source code, which is helpful for debugging. Including these files allows your browser's developer tools to show the original source code instead of the minified version, making it easier to debug and understand the code.