Add the Required SignalR Client Library

We now need to add the JavaScript client library to the project. This isn’t automatically included in the project.

Figure 18: Looking at the js Folder

If you expand the wwwroot folder of your project, you will see a js folder. This is where we want to add the required JavaScript client library files.

Note: The SignalR server library is automatically included in the ASP.NET Core 3.0 framework.

Right-click your project and select Add > Client-Side Library from the context menu (Figure 19).

Figure 19: Add a Client-Side Library

From the Add Client-Side Library form that is displayed, ensure that you make the following selections:

• Set the Provider to unpkg.
• Enter @microsoft/signalr@latest in the Library field.
• Select the Choose specific files radio button, expand the tree to dist/browser, and select signalr.js and signalr.min.js.
• Change the Target Location path to wwwroot/js/signalr.

The target location is the folder in the project’s wwwroot to which the js files will be copied (refer to Figure 20).

Figure 20: Adding signalr.js Files

Once you are ready, click Install. It might not immediately be obvious that Visual Studio is doing something, but after a few seconds, you will see the SignalR client library files added to your wwwroot folder.

Figure 21: Viewing the signalr.js Files Added

After expanding the js/signalr folder, you will see the signalr.js and signalr.min.js files.

Tip: The signalr.min.js is a minified file. When it comes to web browsers, you probably know that they don’t care about the readability of code. Minification takes out all the whitespace and unnecessary carriage returns in your file. This creates a smaller file size, resulting in faster response times and lower bandwidth usage.

We are now ready to start working on the SignalR hub. Let’s do that next.