Vite Package Setup
Get started with a Vite Package, setup with TypeScript and Lit
Last updated
Was this helpful?
Get started with a Vite Package, setup with TypeScript and Lit
Last updated
Was this helpful?
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 use throughout this guide.
Make sure to read the article before continuing.
Vite comes with a set of 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.
Open your terminal and navigate to the folder where you want to create the new Vite package.
Run the following command:
This command starts a setup prompt.
For this tutorial, it is recommended to use the names given below. However, feel free to choose other names if preferred.
When prompted:
Enter client as the Project Name.
Select Lit as the framework.
Select TypeScript as the variant.
This creates a new folder called client with your project files.
Navigate into the new client folder and install the packages:
Install the Umbraco Backoffice package:
To avoid installing additional dependencies such as TinyMCE or Monaco Editor,use the --legacy-peer-deps
flag:
This disables IntelliSense for external references but keeps the install lean.
Open the tsconfig.json
file.
Add the array types
inside compilerOptions
, with the entry of @umbraco-cms/backoffice/extension-types
:
Create a new vite.config.ts
file in the client folder:
The outDir
parameter specifies where the compiled files are placed. In this example, they are stored in the App_Plugins/client
folder. If you are working with a different structure, such as a Razor Class Library (RCL) project, update this path to wwwroot
.
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 client.js
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.
Build the ts
file in the client folder:
To continuously work on the package and have each change built, add a watch
script in your package.json
with vite build --watch
.
The example below indicates where in the structure this change should be implemented:
Run npm run watch
in the terminal.
Declare your package to Umbraco via a file called umbraco-package.json
. This should be added in the public
folder under the root of your package. Once built the umbraco-package.json
file should be located at /App_Plugins/
or /App_Plugins/{YourPackageName}
for Umbraco to detect it.
This example declares a Dashboard as part of your Package, using the Vite example element.
To test your package, run your site.
Before doing this, make sure to run npm run build
to compile your TypeScript files and copy them to the App_Plugins/client
folder.
If you try to include some of these resources via Visual Studio (VS), then make sure not to include TypeScript files. 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.
The final result looks like this:
In the src/my-element.ts
file, update the styles
property to make any styling changes. You can change the background-color
of the button
to white so it is more visible:
With this, you have set up your Package and created an Extension for the Backoffice.
Before proceeding, ensure that you install the version of the Backoffice package compatible with your Umbraco installation. You can find the appropriate version on the .
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 .
Learn more about the abilities of the manifest file in the article.
In more advanced cases, you can add more elements to your package and create more complex extensions. In that case, you can benefit greatly from creating another project in your solution to hold the files. This way, you can keep your solution clean and organized. We recommend creating a for this purpose. You can read more about this in the article.
This Dashboard appears in all sections and does not do much. To extend it to interact with the Umbraco Backoffice, follow the tutorial on .