creation of signalr.js file, when installing through npm

Question

I'm trying to follow this documentation for setting up the clientside of a project using signalr. So I have a asp.net core mvc project, and I start by running these commands in the nuget package manager command line:

npm init -y
npm install @microsoft/signalr

After doing this, the documentation has this text:

npm installs the package contents in the node_modules\@microsoft\signalr\dist\browser folder. 
Create a new folder named signalr under the wwwroot\lib folder. Copy the signalr.js file to the 
wwwroot\lib\signalr folder.

This part is super confusing to me. I don't know where node_modules\@microsoft\signalr\dist\browser directory is, I cannot find anything called node_modules. Then it also says that I should Copy the signalr.js file, that's also confusing. I have no such file anywhere in the project, I don't know where to copy from.

After this, the documentation says another thing which is pretty confusing:

Reference the SignalR JavaScript client in the <script> element. For example:
     <script src="~/lib/signalr/signalr.js"></script>

This does'nt make to much sense to me. Where should I put this tag? In all view files in my project? perhaps in a word file on my local pc?

I really hope someone can help clearing these things up.

score 0 · Accepted Answer · answered Jun 25 '21 at 02:20

I don't know where node_modules@microsoft\signalr\dist\browser directory is, I cannot find anything called node_modules.

You can run npm list -g to see which global libraries are installed and where they're located.

You can run npm list to see the installed non-global libraries for your current location.

I suppose you use Windows system. If you install signalr package globally, you will find the installed folder in: %USERPROFILE%\AppData\Roaming\npm\node_modules.

If you install non-global library, you will find the installed folder in your solution folder (not project folder).

For example, I create the solution in D:\repos\MvcProjct, the node_modules\@microsoft\signalr\dist\browser will exist in it(D:\repos\MvcProjct\node_modules\...).

More details you could refer to the following link:

https://stackoverflow.com/a/5926706/11398810

This does'nt make to much sense to me. Where should I put this tag? In all view files in my project? perhaps in a word file on my local pc?

It depends on you. If you want to globally use this js file, you could put it in _Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Dotnetcore5</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        //...
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()

        </main>
    </div>    
    <footer class="border-top footer text-muted">
        //..
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
 //add here....
    <script src="~/lib/signalr/signalr.js"></script>
    
    @await RenderSectionAsync("Scripts", required: false)

</body>
</html>

If you only want to use in specific view, you just put it in the specific view:

@section Scripts
{
    <script src="~/lib/signalr/signalr.js"></script>
}

creation of signalr.js file, when installing through npm

1 Answers1