Create Nuget package for dot net core project from static files

Question

I have created npm package which has js and css files just similar to bootstrap as folder structure. I want to ship same package for .Net mvc web applications so I created .nuspec file specifying files from build output and created Nuget package. Both the Nuget and NPM package working great.

Now I want to publish same package for dot net core project. When I install same Nuget package in dot net core web application it installed successfully but does not copied static files to project folders.

How to create/fix nugget package of static files for dot net core application. I don't want to create .net core project to ship static files. It would be great if I could add some configuration file like .nuspec for dot net core application as well.

I have searched but not able to get any help in regards, So any suggestion or reference would be appriciated.

myproject.nuspec

<?xml version="1.0"?>
<package >
  <metadata>
    <id>MyPackage</id>
    <version>1.0.1</version>
    <title>MyProject</title>
    <authors>Me</authors>
    <owners>Me</owners>
    <projectUrl>some url...</projectUrl>   
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <description>This is similar to bootstrap</description>
    <copyright>Copyright 2020</copyright>
    <tags></tags>
    <dependencies>
      <dependency id="jQuery" version="[3.0.0, 4.0.0)" />
    </dependencies>
  </metadata>
  <files>
    <file src="dist\css\**\*.*" target="content\Content\css" />
    <file src="dist\fonts\**\*.*" target="content\Content\fonts" />
    <file src="dist\js\mypackage.js" target="content\Scripts" />
    <file src="dist\images\**\*.*" target="content\Content\Images" />
  </files>
</package> 

Update : I tried solution given below by @thatguy it does copied the files in appropriate folders. I can see those in Visual Studio. But that newly created files and folder has arrow symbol on it while other files does not. I tried including css in page code but it does not found the newly created files.

What this arrow means and why its not finding the files ?

Answer 1

I just added the files to my project and added couple of lines in the .csproj file

Here Config_files is the place I added the static files and C2 is the path I declared to store in the folder, It can be of your choice

<ItemGroup>
    <Content Include="Config_Files\C2\**">
        <PackagePath>content\Config_Files\Get2</PackagePath>
        <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    </Content>
</ItemGroup>

Ref image:

enter image description here

Answer 2

In our organization, we wanted to share static files across different dotnet projects (css files, icons, fonts, js files). We created a NuGet package inspired by Mr Qian's answer.

Step 1: Nuspec file

First, create a file named ProjectName.nuspec with the following content

<?xml version="1.0"?>
<package xmlns="http://schemas.microsoft.com/packaging/2013/05/nuspec.xsd">
  <metadata>
    <id>ProjectName</id>
    <description>A NuGet package containing static files</description>
    <authors>AuthorName</authors>
    <version>1.0.0</version>
  </metadata>
  <files>
    <file src="dist\css\**" target="content\css" />
    <file src="dist\assets\**" target="content\assets" />
    <file src="build\ProjectName.props" target="build" />
    <file src="build\template.gitignore" target="content\.gitignore" />
  </files>
</package>

Here, the files we want to distribute are the css files in dist\css\ and some other files in dist\assets\.

Step 2: Props file

Then, create a file called ProjectName.props and place it in a folder called build. It should contain:

<Project>
  <Target Name="CopyFilesToProject" BeforeTargets="Build">
    <Message Text="Copy files to project" />
    <ItemGroup>
      <SourceScripts Include="$(MSBuildThisFileDirectory)..\content\**\*.* "/>
    </ItemGroup>
    <Copy SourceFiles="@(SourceScripts)" DestinationFiles="@(SourceScripts -> '$(MSBuildProjectDirectory)\wwwroot\ProjectName\%(RecursiveDir)%(Filename)%(Extension)')" />
  </Target>
</Project>

This script will copy over all the files to the folder ProjectName which is placed in wwwroot.

Step 3: .gitignore file

We want to also copy over a .gitignore file such that the files being copied over to the projects that use this NuGet package are not checked into git. The files will always be copied over to the project when building the project, so we want these files to be ignored by git.

Create a file called template.gitignore and place it in the build folder with the following content:

# This file is included in the NuGet package with the name .gitignore such that none of these files will
# be checked into projects that uses this package. The files are copied into the repository when building
# the project with the NuGet package.

# Ignore all files in the folder
*

Step 4: Pack NuGet package

You will need the NuGet client tool (nuget.exe): https://learn.microsoft.com/en-us/nuget/install-nuget-client-tools

Run nuget pack ProjectName.nuspec and you have your NuGet package.

Answer 3

Create Nuget package for dot net core project from static files

You should use <package_id>.props file.

1) create a folder in your MyPackage called build and then add a file called MyPackage.props file in it.

2) Then add these in it:

<Project>
  <Target Name="CopyFilesToProject" BeforeTargets="Build">
    <Message Text="Copy css files to project" />
    <ItemGroup>
      <SourceScripts Include="$(MSBuildThisFileDirectory)..\..\content\**\*.* "/> //file from the nuget package
    </ItemGroup>
    <Copy
       SourceFiles="@(SourceScripts)"
       DestinationFiles="@(SourceScripts -> '$(MSBuildProjectDirectory)\%(RecursiveDir)%(Filename)%(Extension)')"   
         />
  </Target>
  
</Project>

3) change to use this nusepc file:

<?xml version="1.0"?>
<package >
  <metadata>
    <id>MyPackage</id>
    <version>1.0.1</version>
    <title>MyProject</title>
    <authors>Me</authors>
    <owners>Me</owners>
    <projectUrl>some url...</projectUrl>   
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <description>This is similar to bootstrap</description>
    <copyright>Copyright 2020</copyright>
    <tags></tags>
    <dependencies>
      <dependency id="jQuery" version="[3.0.0, 4.0.0)" />
    </dependencies>
  </metadata>
  <files>
    <file src="dist\css\**\*.*" target="content\Content\css" />
    <file src="dist\fonts\**\*.*" target="content\Content\fonts" />
    <file src="dist\js\mypackage.js" target="content\Scripts" />
    <file src="dist\images\**\*.*" target="content\Content\Images" />
    <file src="build\MyPackage.props" target="build" />
  </files>
</package> 

4) repack your project MyPackage and then first uninstall the old nuget package MyPackage first in your main project.

Then, clean nuget caches first or delete all caches under C:\Users\xxx(current user)\.nuget\packages.

After that, install the new version MyPackage and then build your project first and you can see the files be copied under the main project.

In addition, there is a similar issue about your request and also this one.

==================================

Update 1

If you want these files only be copied on Net Core projects, you should abandon using content node in nupkg. It will automatically copy files into the NET Framework main project when you install the package.

Instead, you could put these files under a different folder called resource of the nupkg.

You could follow my steps:

1) change MyPackage.props file to:

<Project>
  <Target Name="CopyFilesToProject" BeforeTargets="Build">
    <Message Text="Copy css files to project" />
    <ItemGroup>
      <SourceScripts Include="$(MSBuildThisFileDirectory)..\..\resource\**\*.* "/> //file from the nuget package
    </ItemGroup>
    <Copy
       SourceFiles="@(SourceScripts)"
       DestinationFiles="@(SourceScripts -> '$(MSBuildProjectDirectory)\%(RecursiveDir)%(Filename)%(Extension)')"   
         />
  </Target>

</Project>

2) change xxx.nuspec file to:

<?xml version="1.0"?>
<package >
  <metadata>
    <id>MyPackage</id>
    <version>1.0.1</version>
    <title>MyProject</title>
    <authors>Me</authors>
    <owners>Me</owners>
    <projectUrl>some url...</projectUrl>   
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <description>This is similar to bootstrap</description>
    <copyright>Copyright 2020</copyright>
    <tags></tags>
    <dependencies>
      <dependency id="jQuery" version="[3.0.0, 4.0.0)" />
    </dependencies>
  </metadata>
  <files>
    <file src="dist\css\**\*.*" target="resource\Content\css" />
    <file src="dist\fonts\**\*.*" target="resource\Content\fonts" />
    <file src="dist\js\mypackage.js" target="resource\Scripts" />
    <file src="dist\images\**\*.*" target="resource\Content\Images" />
    <file src="build\MyPackage.props" target="build" />
  </files>
</package> 

3) then repack your project and install the new one, before it, you should clean nuget caches first.