How to Implement DocuVieware as a NuGet

---

We recently added DocuVieware to the NuGet gallery.
In this short tutorial, we will show you how to implement it in your project.

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 DocuVieware

You 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,

Fabio

---

Tags: