How to include a JS file in a NuGet package

Question

I need to create a .NET Standard 2.1 NuGet package that contains a JavaScript file which will be added to my consuming application in the following path:

/wwwroot/js/myFileFromNugetPackage.js

(the consuming application happens to be a Blazor Server app)

I followed one example which used a *.targets file, but it didn't work for me.

The closest I got was to set up my NuGet project as follows:

1. Create a top level folder named "wwwroot"
2. Add the file "wwwroot/js/myFileFromNugetPackage.js"
3. In the properties for that JS file, set "Build Action = Content" and "Copy to Output Directory" = "Copy Always"

I publish this to my private NuGet library.

I then add that package to my Blazor (.Net Core 3.1) application.

When I look in Visual Studio's Solution Explorer, what I see looks promising:

/wwwroot/js/myFileFromNugetPackage.js

However...

If I manually create a new file in the same directory, so I now have:

/wwwroot/js/manuallyAddedFile.js /wwwroot/js/myFileFromNugetPackage.js

When I go to the properties of the two files, I see different paths:

C:{some path}\MyApplication\wwwroot\js\manuallyAddedFile.js

and

C:\Users\{me}\.nuget\packages\{myNuGetPackage}\{version}\contentFiles\any\netstandard2.1\wwwroot\js\myFileFromNugetPackage.js

And unsurprisingly, when I attempt to use either of those JS file using Blazor's JS Interop, I can use the one I manually entered, but it can't find the one from my NuGet package. The F12 developer tools show only the manually created one present on the Client.

So, my question is: How do I set up my NuGet project to write a JS file so that it ends up in the correct directory?

Answer 1

And unsurprisingly, when I attempt to use either of those JS file using Blazor's JS Interop, I can use the one I manually entered, but it can't find the one from my NuGet package.

Because you can only in Blazor application (new SDK format) using packagesreference nuget management format, so you import package can only by reference links will be in the form of your files into the project in a package, so myFileFromNugetPackage. Js properties displayed in the path ../. Nuget/packages .

This is also a feature of the pacakgesreference nuget management format. By the way, this is not such case with packagesconfig nuget management format.

When you add a new item which means that you have created a file under your current solution, so you can find the new file under the solution.

I followed one example which used a *.targets file, but it didn't work for me. So, my question is: How do I set up my NuGet project to write a JS file so that it ends up in the correct directory?

Solution

To solve your problem you can add a target file to the nuget package which copys the actual file to the project so that it will be referenced in the main project and not referenced in the link.

I tried your link demo and it can successfully achieve your goal. The core is this paragraph

 <ItemGroup>
        <SourceScriptFiles Include="$(MSBuildThisFileDirectory)..\content\scriptsToGenerate\*.js" />
    </ItemGroup>
    <Target Name="CopyScriptsToProject" BeforeTargets="Build">
        <Copy SourceFiles="@(SourceScriptFiles)" DestinationFolder="$(ProjectDir)\wwwroot\js\scriptsToGenerate\"
        />
    </Target>

Note:

In some cases, you might want to add custom build targets or properties in projects that consume your package, such as running a custom tool or process during build. You do this by placing files in the form <package_id>.targets or <package_id>.props (such as Contoso.Utility.UsefulStuff.targets) within the \build folder of the project.

This pre-processing target can only be executed at build time, So I suspect you can't find the JS file in the main project without building the project. Hope it could help you.