How do we package this up?

[Rockerby]

Package format in Umbraco 14 is different to that of previous versions. The current setup is that the umbraco-package.json files (which defines the package) sits within samples\Umbraco14.Website\App_Plugins\Example.UI\umbraco-package.json - this should be within the actual package project and copy across during build.

[KevinJump]

You can still razor class library the package (and the json files) .

As long as the result of your build end up in a wwwroot folder, you can then use the StaticWebAssetBasePath value to point to the app_plugins folder.

when this is installed on an umbraco site the folder is seen

e.g

i have:

• myPackage
  • wwwroot
  • my-package
    • public
      • umbraco-package.json
    • src
      • [the typescript for the package is here]
    • package.json
    • vite.config.js
    • etc

then in vite.config.ts

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    lib: {
      entry: "src/my-element.ts", // your web component source file
      formats: ["es"],
    },
    outDir: "../wwwroot/my-package", // your web component will be saved in this location
    sourcemap: true,
    rollupOptions: {
      external: [/^@umbraco/],
    },
  },
});

running npm build puts the output in wwwroot/my-package/

Then in the mypackage.sln

<Project Sdk="Microsoft.NET.Sdk.Razor">

	<PropertyGroup>
		<TargetFramework>net8.0</TargetFramework>
		<Nullable>enable</Nullable>
		<ImplicitUsings>enable</ImplicitUsings>
		<StaticWebAssetBasePath>/App_Plugins</StaticWebAssetBasePath>

	</PropertyGroup>

</Project>

if this is packaged up as a nuget project, it will pack the wwwroot folder and when its installed on an Umbraco site, the /app_plugins/my-package folder will contain the umbraco-package.json and the scripts.

[ronaldbarendse]

PR #48 updates the project to a Razor Class Library that contains all the client assets, including the umbraco-package.json file. The GitHub Actions build also publishes an artifact with the NuGet package, so the packaging part is now all taken care of 👍🏻