Links

Vite Package Setup

Get started with a Vite Package, setup with TypeScript and Lit
Umbraco recommends building extensions with a setup using TypeScript and a build tool such as Vite. Umbraco uses the library Lit for building web components which we will be using throughout this guide.

Getting Started With Vite

Vite comes with a set of really good presets to get you quickly up and running with libraries and languages. For example: Lit, Svelte, and Vanilla Web Components with both JavaScript and TypeScript.
  1. 1.
    At the root of your project create an App_Plugins folder (if it doesn't exist yet) and run the following command in the App_Plugins:
npm create vite@latest
  1. 2.
    This command will help you set up your new package, asking you to pick a framework and a compiler.
To follow this tutorial, we recommend you enter my-dashboard as the Project Name when prompted, although you can choose any other you like. Then choose Lit and TypeScript.
Create vite command choices
This creates a new folder, sets up our new project, and creates a package.json file, which includes the necessary packages.
  1. 3.
    Navigate to the new project folder and install the packages using:
npm install
  1. 4.
    The last thing we need to install now is our Backoffice package. You can install the package using the following command:
npm install --force --registry https://www.myget.org/F/umbracoprereleases/npm/ -D @umbraco-cms/[email protected]
The Backoffice package currently relies on the older Lit 2.8 and the Vite template uses Lit 3. Because of this mismatch, you need to override the Lit version in the Backoffice package by installing with the --force option. This will be fixed in a future version when the Backoffice has been upgraded to Lit 3.
This will add a package to your devDependencies containing the TypeScript definitions for the Umbraco Backoffice. The --preview006 is the version of the package, which will change as new versions are released.
If you see any errors during this process, make sure that you have the right tools installed (Node, .NET, and so on). Also, make sure you have followed the steps on how to Setup Your Development Environment.
  1. 5.
    In the my-dashboard folder, create a new file called vite.config.ts and insert the following code:
import { defineConfig } from "vite";
export default defineConfig({
build: {
lib: {
entry: "src/my-element.ts", // your web component source file
formats: ["es"],
},
outDir: "dist", // your web component will be saved in this location
sourcemap: true,
rollupOptions: {
external: [/^@umbraco/],
},
},
});
This alters the Vite default output into a library mode, where the output is a JavaScript file with the same name as the name attribute in package.json. The name is my-dashboard if you followed this tutorial with no changes.
The source code that is compiled lives in the src folder of your package folder and that is where you can see a my-element.ts file. You can confirm that this file is the one specified as our entry on the Vite config file that we recently created.
The build:lib:entry parameter can accept an array which will allow you to export multiple files during the build. You can read more about Vite's build options here.

Build Package

Next, we are going to build the ts file so we can use it in our package:
npm run build

Watch for changes and build

If you like to continuously work on the package and have each change built, you can add a watchscript in your package.json with vite build --watch. The example below indicates where in the structure this change should be implemented:
package.json
1
{
2
"name": "my-dashboard",
3
...
4
"scripts": {
5
"watch": "vite build --watch"
6
...
7
},
8
...
Then in the terminal, you can run npm run watch.

Umbraco Package declaration

Declare your package to Umbraco via a file called umbraco-package.json. This should be added at the root of your package. In this guide, it is inside the my-dashboard folder.
This example declares a Dashboard as part of your Package, using the Vite example element.
umbraco-package.json
1
{
2
"$schema": "../../umbraco-package-schema.json",
3
"name": "My Dashboard",
4
"version": "0.1.0",
5
"extensions": [
6
{
7
"type": "dashboard",
8
"alias": "My.Dashboard.MyExtension",
9
"name": "My Dashboard",
10
"js": "/App_Plugins/my-dashboard/dist/my-dashboard.js",
11
"elementName": "my-element",
12
"meta": {
13
"label": "My Dashboard",
14
"pathname": "my-dashboard"
15
}
16
}
17
]
18
}
Umbraco needs the name of the element that will render as default when our dashboard loads. This is specified in the manifest as the elementName.
Another approach would be to define your default element in the TS code.
To do this, in the src/my-element.ts add default to your MyElement class in the file like so:
export default class MyElement extends LitElement {

Testing your package

In order to be able to test your package, you will need to run your site.
Before you do this, you will need to include all the files in the src folder and the umbraco-package.json file into your project.
If you try to include these resources via Visual Studio, be careful to include only the dist folder. Otherwise, VS will try to include a few lines on your .csproj file to compile the TypeScript code that exists in your project folder. When you run your website, VS will try to compile these files and fail.

Result

The final result looks like this:
My dashboard
If the Vite logo is not found, this is because the path to its location needs to be changed in the my-element.ts file from the src folder to:
import viteLogo from '../dist/vite.svg'
In the same file, you will need to change the background-color of the button to white so it is visible:
button {
background-color: white;

Summary

With this, you have set up your Package and created an Extension for the Backoffice.
This Dashboard will appear on all sections, so please continue by following the tutorial on Creating A Custom Dashboard