How to Implement DocuVieware as a NuGet
Table of contents
Install the NuGet Package
First of all, we need to install the NuGet Package.To do that, we have two choices.
Command-line
You can install the DocuVieware NuGet through the Package Manager console by simply tipping this command:
Package Manager
Install-Package DocuVieware.NET CLI
dotnet add package DocuViewareYou will find the NuGet package of DocuVieware here:
UI
Within the NuGet Package Manager view, you will find DocuVieware in the Browse tab.
Configure Server-Side
On the server side, it is necessary to configure the .csproj to implement DocuVieware properly.The PkgDocuVieware will be generated by the compiler and refers to the NuGet folder of DocuVieware.It will take the related minified javascript and CSS libraries of the DLL version, so you will always have files of the same version when updating the SDK.
Project.csproj
<ItemGroup> <Content Remove="$(PkgDocuVieware)\contentFiles\any\any\wwwroot\css\docuvieware-min.css" /> <Content Remove="$(PkgDocuVieware)\contentFiles\any\any\wwwroot\js\docuvieware-min.js" /></ItemGroup>
<ItemGroup> <PackageReference Include="DocuVieware" Version="3.1.0.153" GeneratePathProperty="true" /></ItemGroup>
<Target Name="CopyDocuViewareAssets" BeforeTargets="Build">
</Target>Depending on your client-side, you’ll need to specify in which folder the DV assets need to be set. In this sample, these are the Copy commands you’ll need to set in the CopyDocuViewareAssets target.
Angular
angular.json
<Copy SourceFiles="$(PkgDocuVieware)\contentFiles\any\any\wwwroot\css\docuvieware-min.css" DestinationFolder="$(MSBuildThisFileDirectory)ClientApp/src/assets/" SkipUnchangedFiles="true" /><Copy SourceFiles="$(PkgDocuVieware)\contentFiles\any\any\wwwroot\js\docuvieware-min.js" DestinationFolder="$(MSBuildThisFileDirectory)ClientApp/src/assets/" SkipUnchangedFiles="true" />React
<Copy SourceFiles="$(PkgDocuVieware)\contentFiles\any\any\wwwroot\css\docuvieware-min.css" DestinationFolder="$(MSBuildThisFileDirectory)ClientApp/public/" SkipUnchangedFiles="true" /><Copy SourceFiles="$(PkgDocuVieware)\contentFiles\any\any\wwwroot\js\docuvieware-min.js" DestinationFolder="$(MSBuildThisFileDirectory)ClientApp/public/" SkipUnchangedFiles="true" />Blazor or ASP.NET MVC (Framework and Core)
<Copy SourceFiles="$(PkgDocuVieware)\contentFiles\any\any\wwwroot\css\docuvieware-min.css" DestinationFolder="$(MSBuildThisFileDirectory)wwwroot\css" SkipUnchangedFiles="true" /><Copy SourceFiles="$(PkgDocuVieware)\contentFiles\any\any\wwwroot\js\docuvieware-min.js" DestinationFolder="$(MSBuildThisFileDirectory)wwwroot\js" SkipUnchangedFiles="true" />Before going further, please compile the project in order to initiate a first copy of the assets in the destination folder.
Configure Client-Side
At this step, the DLL implementation has been done and the js/CSS libraries are copied from the NuGet package. Now, we should refer to them on the client side.The implementation of the client’s libraries depends on the language you’re using in your project.
Angular
If the destination folder has been set to ‘$(MSBuildThisFileDirectory)/ClientApp/src/assets’, here’s how to set the libraries correctly:
"projects": { "testAngular": { "architect": { "build": { "options": { "styles": [ "src/assets/docuvieware-min.css" ], "scripts": [ "src/assets/docuvieware-min.js" ] },React
If the destination folder has been set to ‘$(MSBuildThisFileDirectory)/ClientApp/public’, here’s how to set the libraries correctly:
Example.js (the container of the DocuVieware’scontrol)
componentDidMount(){ var dvScript = document.createElement("script"); dvScript.src = "docuvieware-min.js"; window.document.head.appendChild(dvScript); }render() {<> <link rel="stylesheet" href="/docuvieware-min.css" /></>Blazor
_Layout.cshtml
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <base href="~/" /> <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /> <link href="css/site.css" rel="stylesheet" /> <link href="BlazorApp_DV.styles.css" rel="stylesheet" /> <link rel="stylesheet" href="css/docuvieware-min.css" /> <script src="js/docuvieware-min.js" ></script> <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" /></head>ASP.NET (MVC and Core)
Simply add the script and link tag that point to the JS and CSS file available in the wwwroot folder in pages that embed a DocuVieware control.
Your project is now ready to run with DocuVieware!
Cheers,
