DEV Community

Kevin Jump
Kevin Jump

Posted on • Updated on

Early Adopter's guide to Umbraco v14 - Package template

Following on from the post about setting up your project strcuture for building a new Umbraco v14 package. I've created it as a package template !

Get The template

dotnet new install Umbraco.Community.Early.Templates
Enter fullscreen mode Exit fullscreen mode

Create a new Package

dotnet new early.umbracopackage -n MySuperPackage --restore
Enter fullscreen mode Exit fullscreen mode

The --restore parameter, will mean the template runs the npm install and npm run build commands for you

Using the Project.

  1. Fire up the soluiton in the folder.

Your shiny new project

  1. If you run the site, you will be prompted to finsh the Umbraco install.
  2. Once you get into the site you will see a custom MySuperPackage dashboard in the content section.

Content dashboard

  1. You can now build a package. !

(We will write a 'how to make the dashboard' post soon)

If you want to understand how this template is actually working (and you probibly shoud if you want to build a package!). read our post about the package project structure.


While you are developing your package you will want to keep the javascript files upto date as you go.

if you navigate to the myproject.client/assets folder you can build the files from a command line.

npm run build
Enter fullscreen mode Exit fullscreen mode

this will build the typescript files, and put the results in the wwwroot folder.

because the project is a Razor Class Library, the changes in this folder are immediately reflected in the website project. So if you have the browser dev tools open, the site will reload and you will get your changes instantly.

however you have to run the build command with each change😞 .

But that's OK - because you can run the watch command !!

npm run watch
Enter fullscreen mode Exit fullscreen mode

This will watch for changes in your .ts files, and when you save a file, the vite process will build the files into wwwroot, the RCL will trigger a change in the website and your browser will reload 'instantly' with your new changes πŸŽ‰


The template is on github. please if you think it can be done better / cleaner, contribute

Top comments (0)