[V15] Updated dotnet template for Umbraco Packages with Bellisima

[warrenbuckley]

Summary

• Renames umbraco-package to umbraco-extension
• Adds tooling for Vite, TypeScript and similar that the Umbraco HQ core team uses to help align with tutorials etc

This PR is to rework & reopen the work that @leekelleher done from the previous years community teams day
#14975

---

Install Command

dotnet new install umbraco-extension --name TestingProject

Example usage

# Create solution
dotnet new sln --name "MyProject"

# Create Umbraco Website Project
dotnet new umbraco --name "MyProject.Website" --friendly-name "Administrator" --email "[email protected]" --password "1234567890" --development-database-type SQLite

# Add the Website project to the SLN
dotnet sln add "MyProject.Website"

# Create the extension project
dotnet new umbraco-extension --name "MyProject.Extensions"

# Add the extension project to the SLN
dotnet sln add "MyProject.Extensions"

# Add the extension project as a reference
dotnet add ".\MyProject.Website\MyProject.Website.csproj" reference ".\MyProject.Extensions\MyProject.Extensions.csproj"

# Change Directory to JS clientside
cd ".\MyProject.Extensions\Client"

# NPM install (Remember you need to be on node 20.0+)
npm install

# Build TypeScript & compile into MyProject.Extensions RCL
npm run build

# Move back upto root of project
cd "..\..\"

# dotnet run (Which does a build)
dotnet run --project "MyProject.Website"

[github-actions]

Hi there @warrenbuckley, thank you for this contribution! 👍

While we wait for one of the Core Collaborators team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:

• It's clear what problem this is solving, there's a connected issue or a description of what the changes do and how to test them
• The automated tests all pass (see "Checks" tab on this PR)
• The level of security for this contribution is the same or improved
• The level of performance for this contribution is the same or improved
• Avoids creating breaking changes; note that behavioral changes might also be perceived as breaking
• If this is a new feature, Umbraco HQ provided guidance on the implementation beforehand
• 💡 The contribution looks original and the contributor is presumably allowed to share it

Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution.

If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[LottePitcher]

If you were extending/customising the backoffice of a project in v13 and earlier, you could just add your code into a folder in App_Plugins - there was no need for front-end build steps as you deployed the source files. This package template really was a (very simple) start to people building actual packages: it wasn't needed by people looking to just customise a specific Umbraco backoffice.

In v14+ you definitely do not want to have your source files for your own extensions in App_Plugins, and so I think that the template being proposed here is arguably a template for extending the backoffice, not for building a package.

So in light of that would renaming the template from umbracopackage to umbracoextension make sense? e.g.

dotnet new umbracoextension -n MyWebsite.Extensions

It would also differentiate this template from community templates that are designed for developing packages - that come with test sites, and a head-start on publishing to nuget etc. Whereas this core template is showing good practise for extending the backoffice. That extension might turn into a package to be distributed, but equally it might just be for a specific Umbraco project.

[warrenbuckley]

@LottePitcher the rename of the dotnet new template makes total sense to me.
One thing I am unclear on though from your comments is that should this template not do the TypeScript, Vite stuff and just be an RCL that has an umbraco-package.json file and use vanilla JS to avoid tooling problems or have I misunderstood?

[LottePitcher]

@warrenbuckley I think the tooling setup (Vite etc) is still a good idea as it gets you started a good way, and it's the approach that backend devs with less front-end experience will need more help with. I don't think anyone would recommend using VanillaJS unless you were just building something incredibly simple.

[warrenbuckley]

@umbraco/packages-team take a look at this PR please gang

[warrenbuckley]

I would also appreciate any opinions from the front end gang @leekelleher @nielslyngsoe @madsrasmussen @iOvergaard as well to ensure this is a-okay or needs stuff doing.

[LottePitcher]

@jemayn and I have been looking at this today. Other than what we've put in this review we think it's good to go!

[LottePitcher]

Just putting a note here that I'm currently working on this template so hold off on any reviews right now please!