Restore Libman JS Libraries in Azure DevOps Build Pipeline

Question

I've set up a happy Azure DevOps build pipeline, which is triggered on a commit to a branch, then restores Nuget packages, builds my Mvc.Core web app and deploys it to an Azure App Service.

However the JS libraries referenced in LibMan are not restored and deployed to Azure. How do I get this to happen?

I've included the LibMan build package (which I read would carry out the task automatically), but with no joy.

<PackageReference Include="Microsoft.Web.LibraryManager.Build" Version="2.0.96" />

Do I really need to add a .net core custom command to the pipeline, to install the LibraryManager Cli tool, and then call it to restore the JS libraries? It seems more complex than I'd expect, and I've not found any examples of anyone doing this online.

Is the other approach to include the JS libraries in source control? I did want to avoid this if possible, but if it is the standard approach, then I'm happy to do that I guess.

Any advice, or YAML examples of ways to achieve this in Azure DevOps would be very much appreciated.

@mesies I could do, but what's there is all working fine. There's just nothing to restore the LibMan libraries, as far as I understand. — Ted, Jan 14 '20 at 15:10

score 5 · Answer 1 · answered Jan 20 '20 at 11:14

The problem with restoring LibMan JS libraries in our case turned out to be a project file setting added by another developer months ago, when they were having problems with slow build times, as mentioned here.

 <PropertyGroup>
    <LibraryRestore>false</LibraryRestore>
  </PropertyGroup>

Once I found, and removed this setting, unsurprisingly the LibMan restore worked perfectly, and without a particularly slow build time either.

I guess the ideal situation would be not to attempt to do the LibMan restore on every build, but manually on developer machines, and then as a specific step in a DevOps build pipeline? But anyway, it's all working now.

There is an open [issue on GitHub regarding the slowness](https://github.com/aspnet/LibraryManager/issues/389). For me, the restore takes less than a second, but I'm still thinking of disabling it for Debug builds. `false` — Andrius R., Mar 27 '21 at 15:05

score 4 · Accepted Answer · answered Jan 15 '20 at 09:17

Restore Libman JS Libraries in Azure DevOps Build Pipeline

You do not need to add a .net core custom command to the pipeline to restore the JS libraries.

I have created a sample to test LibMan build package, and it works fine on Azure devops.

To use the LibMan build package, first, you need set the correct the libman.json with JS Libraries in it in your project, like:

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "provider": "cdnjs",
      "library": "jquery@3.2.1",
      "destination": "wwwroot/lib/jquery",
      "files": [
        "jquery.min.js",
        "jquery.js",
        "jquery.min.map"
      ]


    }
  ]
}

That because LibMan package will restore the JS Libraries based on the libman.json. You will find following target in the microsoft.web.librarymanager.build.targets in the LibMan build package:

<Target Name="LibraryManagerRestore" Condition="'$(LibraryRestore)' != 'False'">

    <Microsoft.Web.LibraryManager.Build.RestoreTask
        FileName="libman.json"
        ProjectDirectory="$(MSBuildProjectDirectory)"
        ProviderAssemblies="$(LibraryProviderAssemblies)">

        <Output TaskParameter="FilesWritten" ItemName="_FilesWritten"/>
    </Microsoft.Web.LibraryManager.Build.RestoreTask>

    <ItemGroup>
        <FilesForPackagingFromProject  Include="%(_FilesWritten.Identity)">
            <DestinationRelativePath>%(_FilesWritten.Identity)</DestinationRelativePath>
        </FilesForPackagingFromProject>
    </ItemGroup>
</Target>

This .targets will only be parsed by MSBuild during building,

So, second, those JS Libraries will be restored when you build your project instead of restoring the packages.

As test, I remove the JS libraries from my repo:

Then after dotnet build completed, I could get the JS libraries in the folder wwwroot/lib/jquery:

If it still not resolve your issue, please make sure you can restore the JS Libraries when you build from Visual Studio without Azure Devops.

BTW, you can also use the task Libman (Preview) instead of MSBuild to restore packages defines in libman.json.

Hope this helps.

Many thanks for all the detailed advice. I'll mark your response as the answer as it contains much more useful information than my explanation of the actual problem! I've tried to find the Libman (Preview) task in Azure DevOps, but can't see it anywhere. How do I add it to my build pipeline? I did find this third party plugin, but I don't think it's the 'official' task : https://marketplace.visualstudio.com/items?itemName=Liero.Libman — Ted, Jan 20 '20 at 11:19
To get the _Restore on Build_ functionality, you need to reference the Microsoft.Web.LibraryManager.Build NuGet package — bdukes, Dec 14 '21 at 21:53
https://help.appveyor.com/discussions/questions/46494-restore-libman-libraries-for-aspnet-core-app-on-build — XoXo, Aug 14 '23 at 23:53

Restore Libman JS Libraries in Azure DevOps Build Pipeline

2 Answers2