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

Create a new Package

dotnet new early.umbracopackage -n MySuperPackage --restore

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.

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.

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.

Developing

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

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

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 🎉

Contribute

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

https://github.com/KevinJump/EarlyAdopters.Umbraco.Templates