Umbraco 10 - Razor Class Library Packages Pt2

In part one, we gave a brief overview of what Razor class libraries and static web assets are - now we're going to see how we can use them to make an Umbraco package.

---

This post is part of a series:

• Part 1: Intro to Razor class library packages in Umbraco
• Part 2: Creating an Umbraco Razor class library package (this)
• Part 3: Converting an existing Umbraco package
• Part 4: Things I now do differently 🌟 New 🌟

---

A Razor class library package.

The aim with using a Razor class library for an Umbraco package is to remove the dependency on the .targets file and have all the app_plugins files appear in the site.

Firstly, we are going to create a Razor class library

As we are building for Umbraco 10 - we are going to choose .net 6 and our package only contains static assets so we don't need support for pages and views.

Delete the example files - remove everything that is included in the template, all we want in the wwwroot page.

wwwroot to App_Plugins/MyPackage

by default, a Static Web Assets will be "copied" from the wwwroot folder of a library into a sites wwwroot folder but we don't want that, there are Umbraco reasons for wanting our plugin at App_Plugins/MyPackage for example if you create a section or tree umbraco will use the App_Plugins convention to look for the files that make up the views/dashboards.

within the .csproj we can move the static file location to the app_plugins folder:

<PropertyGroup>
  <TargetFramework>net6.0</TargetFramework>
  <StaticWebAssetBasePath>App_Plugins/MyPackage</StaticWebAssetBasePath>
</PropertyGroup>

Now with this setting everything that you put in your libraries wwwrootfolder will appear on your site in App_Plugins/MyPackage.

Package Manifest

Jason in his Youtube talk, does talk of the two ways you could add a package manifest - my prefeared way at the moment is by using a manifest filter and adding it during the compose phase.

internal class MyManifestFilter: IManifestFilter
{
 public void Filter(List<PackageManifest> manifests)
 {
   manifests.Add(new PackageManifest
   {
     PackageName = "MyPackage",
     Scripts = new []
     {
       "/App_Plugins/MyPackage/my.controller.js"
     },
     Stylesheets = new []
     {
       "/App_Plugins/MyPackage/mystyles.css"
     }
  });
 }
}

you can then add this manifest to the site via a composer:

public class StyledTextComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
    {
        builder.ManifestFilters().Append<MyManifestFilter>();
    }
}

Draw the rest of the owl...

And that is almost it.

If for development you put a website into the same project as your library and reference the library from that site then when you build the site all the files will appear in the right place and you will have a package just like you would during normal package development.

When you nuget your package you will see a couple of extra files included - these are part of the RCL setup, and mean when someone installs your package the files come from the right place and are included when the site is published.

Existing packages

In part 3 we will cover converting an existing package to an RCL page