From 5611919b025cb783058ce85b2840b106a56f3b11 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Wed, 7 May 2025 09:22:02 +0200 Subject: [PATCH 01/30] docs: merges typescript-setup.md into development-flow/README.md and creates a redirect to avoid confusion --- 16/umbraco-cms/.gitbook.yaml | 3 ++- .../customizing/development-flow/README.md | 23 +++++++++++++++++-- .../development-flow/typescript-setup.md | 16 ------------- 3 files changed, 23 insertions(+), 19 deletions(-) delete mode 100644 16/umbraco-cms/customizing/development-flow/typescript-setup.md diff --git a/16/umbraco-cms/.gitbook.yaml b/16/umbraco-cms/.gitbook.yaml index af9f93527e9..5c9ea73f6fb 100644 --- a/16/umbraco-cms/.gitbook.yaml +++ b/16/umbraco-cms/.gitbook.yaml @@ -10,4 +10,5 @@ redirects: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/styles: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/plugins: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/extensions.md fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/blocks: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/blocks.md - fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/change-rich-text-editor-ui: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md \ No newline at end of file + fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/change-rich-text-editor-ui: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md + customizing/development-flow/typescript-setup: customizing/development-flow/README.md diff --git a/16/umbraco-cms/customizing/development-flow/README.md b/16/umbraco-cms/customizing/development-flow/README.md index 4a3df0dc1fe..a1957b5ec79 100644 --- a/16/umbraco-cms/customizing/development-flow/README.md +++ b/16/umbraco-cms/customizing/development-flow/README.md @@ -63,7 +63,7 @@ npm init -y Make sure that you do not install any NPM dependencies directly into the `App_Plugins` folder. This can cause issues with Build and Publish processes in MSBuild. Always install dependencies in a separate folder and use a bundler to copy the compiled files over to the `App_Plugins` folder. {% endhint %} -### Umbraco Backoffice +### TypeScript Setup Umbraco publishes an NPM package called `@umbraco-cms/backoffice` that holds typings and other niceties to build extensions. @@ -75,6 +75,25 @@ npm install -D @umbraco-cms/backoffice This will add a package to your devDependencies containing the TypeScript definitions for the Umbraco Backoffice. +**TSConfig** + +Make sure to configure your TypeScript compiler so it includes the Global Types from the Backoffice. This enables you to utilize the declared Extension Types. If your project is using other Packages that provides their Extension Types then please list these as well. + +In your `tsconfig.json` file. Add the array `types` inside `compilerOptions`, with the entry of `@umbraco-cms/backoffice/extension-types`: + +```json +{ + "compilerOptions": { + ... + "types": [ + "@umbraco-cms/backoffice/extension-types" + ] + } +} +``` + +**Take extra care when using Vite** + It is important that this namespace is ignored in your bundler. If you are using Vite, you can add the following to your `vite.config.ts` file: ```ts @@ -102,4 +121,4 @@ If you're using Visual Studio Code we recommend the extension called [Lit-Plugin ## What's Next? -Now that you have your development environment set up, you can start building your Umbraco extensions. Read more about [our recommended setup with Vite](vite-package-setup.md) to get started. +Now that you have prepared your development environment, you can start building your Umbraco extensions. Read the next article on [Umbraco Extension Template](./umbraco-extension-template.md) to set all of this up in one go. diff --git a/16/umbraco-cms/customizing/development-flow/typescript-setup.md b/16/umbraco-cms/customizing/development-flow/typescript-setup.md deleted file mode 100644 index 3113b51d9bf..00000000000 --- a/16/umbraco-cms/customizing/development-flow/typescript-setup.md +++ /dev/null @@ -1,16 +0,0 @@ -# TypeScript setup - -Make sure to configure your TypeScript compiler so it includes the Global Types from the Backoffice. This enables you to utilize the declared Extension Types. If your project is using other Packages that provides their Extension Types then please list these as well. - -In your `tsconfig.json` file. Add the array `types` inside `compilerOptions`, with the entry of `@umbraco-cms/backoffice/extension-types`: - -```json -{ - "compilerOptions": { - ... - "types": [ - "@umbraco-cms/backoffice/extension-types" - ] - } -} -``` From 6ef67d4bd6911723be25eeed2b5f7a09e538ca51 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Wed, 7 May 2025 09:22:14 +0200 Subject: [PATCH 02/30] docs: updates prerequisites from nodejs 20 to 22 --- 16/umbraco-cms/customizing/development-flow/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/16/umbraco-cms/customizing/development-flow/README.md b/16/umbraco-cms/customizing/development-flow/README.md index a1957b5ec79..e3d896d4059 100644 --- a/16/umbraco-cms/customizing/development-flow/README.md +++ b/16/umbraco-cms/customizing/development-flow/README.md @@ -9,7 +9,7 @@ This article will take you through setting up everything you need to start build ## Required Software Make sure you have followed the [requirements](../../fundamentals/setup/requirements.md) article, especially having installed the following on your machine: -* [Node.js version 20.15.0 (LTS)](https://nodejs.org/en) and higher +* [Node.js version 22.15.0 (Long-Term Support)](https://nodejs.org/en) and higher {% hint style="info" %} Use Node Version Manager (NVM) for [Windows](https://github.com/coreybutler/nvm-windows) or [Mac/Linux](https://github.com/nvm-sh/nvm) to manage the Node.js versions. @@ -19,7 +19,7 @@ Use Node Version Manager (NVM) for [Windows](https://github.com/coreybutler/nvm- ### App\_Plugins -Extensions such as JavaScript, CSS, and manifests, will go into a folder called `App_Plugins`. If you do not have this folder, you can create it at the root of your Umbraco project. +Extensions such as JavaScript, CSS, and manifests, will go into a folder called `App_Plugins`. If you do not have this folder, you can create it at the root of your Umbraco project. You can include this in the `wwwroot` folder of a Razor Class Library (RCL) project, but it is not required. ### Source Code From 3af9c329892d5b8cf60ccda516bc5c5520d59e8b Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Wed, 7 May 2025 09:24:40 +0200 Subject: [PATCH 03/30] docs: adds a new article on how to use the umbraco-extension template --- .../umbraco-extension-template.md | 96 +++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md new file mode 100644 index 00000000000..f43efbe9708 --- /dev/null +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -0,0 +1,96 @@ +--- +description: Use the `umbraco-extension` dotnet template to create a new Umbraco extension +--- + +# Umbraco Extension Template + +Umbraco provides a dotnet template to help you get started with building extensions for the Umbraco backoffice. This template sets up a new project with all the necessary files and configurations to build an extension. The template is called `umbraco-extension` and can be used to create a new Umbraco extension project with a single command. + +## Prerequisites +- [.NET SDK](https://dotnet.microsoft.com/download) version 9.0 or later +- [Node.js](https://nodejs.org/en/download/) version 22 or later + +## Install the Umbraco Extension Template +To install the Umbraco extension template, run the following command in your terminal: + +```bash +dotnet new install Umbraco.Templates +``` + +This command installs the `umbraco` and `umbraco-extension` templates, which you can use to create new Umbraco and Umbraco extension projects. You may already have this installed, if you have created a new Umbraco project using the `dotnet new umbraco` command. + +## Create a New Umbraco Extension +To create a new Umbraco extension project, run the following command in your terminal. It should be executed in a folder where you want to create the new project, for example in the root of your solution: + +```bash +dotnet new umbraco-extension -n MyExtension -ex +``` + +This command creates a new folder called `MyExtension` with the following files and folders: +- `MyExtension.csproj`: The project file for the extension. +- `Client`: A folder containing the source code for the extension. +- `tsconfig.json`: The TypeScript configuration file. +- `vite.config.ts`: The Vite configuration file. +- `package.json`: The Node.js package configuration file. +- `README.md`: A readme file with instructions on how to build and run the extension. + +### Include the Extension in your Umbraco Project + +To include the extension in your Umbraco project, you need to add a reference to the extension project in your Umbraco project. You can do this by right-clicking on the **Dependencies** node in your Umbraco project and selecting **Add Reference**. Then select the `MyExtension` project and click **OK**. + +## Build and Run the Extension + +To build and run the extension, you need to install the dependencies and start the Vite development server. You can do this by running the following commands in the `Client` folder of your extension project: + +```bash +npm install +npm run build +``` + +{% hint style="info" %} +The project will also automatically build when you run the Umbraco project. You can also run the Vite development server in watch mode by running the following command: + +```bash +npm run watch +``` +{% endhint %} + +This command compiles the TypeScript files and copies them over to the output folder in `wwwroot`. You can then run your Umbraco project and see the extension in action. + +## Publish the Project + +The output files should automatically be copied to the `wwwroot` folder of your Umbraco project. They should also be included in the publish process when you publish your Umbraco project. You can publish your Umbraco project using the following command: + +```bash +dotnet publish -c Release +``` + +## Publish as a Package + +To publish your extension as a package, you need to create a NuGet package. You can do this by running the following command in the root folder of your extension project: + +```bash +dotnet pack -c Release +``` + +This command creates a NuGet package in the `bin/Release` folder of your extension project. You can then publish this package to a NuGet feed or share it with others. + +The `umbraco-extension` template is opinionated until a certain point. It is a starting point for building extensions for the Umbraco backoffice. The template includes a basic structure and configuration for building extensions, but you can customize it to fit your needs. You can add additional files, folders, and configurations as needed. + +To publish your extension as an Umbraco Package, you need some additional files. You can read more about that in the [Umbraco Package documentation](../../customizing/umbraco-package.md). + +### The Opinionated Starter Kit + +One other option is to use the [Opinionated Umbraco Package Starter Template](https://github.com/LottePitcher/opinionated-package-starter). This is a template that includes all the files and configurations needed to build an Umbraco package. It builds on top of the `umbraco-extension` template and includes additional files and configurations for building Umbraco packages. This template is a great starting point for building Umbraco packages and includes everything you need to get started. + +You can install this template by running the following command in your terminal: + +```bash +dotnet new install Umbraco.Community.Templates.PackageStarter +``` + +Then you can create a new package project by running the following command: + +```bash +dotnet new umbracopackagestarter -n YourPackageName -an "Your Name" -gu "YourGitHubUsername" -gr "YourGitHubRepoName" +``` From 78509434d60a2e4e990e17e55a52c79e99e6fcd0 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Wed, 7 May 2025 09:24:46 +0200 Subject: [PATCH 04/30] docs: adds a link to new article --- .../customizing/development-flow/vite-package-setup.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/16/umbraco-cms/customizing/development-flow/vite-package-setup.md b/16/umbraco-cms/customizing/development-flow/vite-package-setup.md index fc27c3e8116..aac814bbca7 100644 --- a/16/umbraco-cms/customizing/development-flow/vite-package-setup.md +++ b/16/umbraco-cms/customizing/development-flow/vite-package-setup.md @@ -7,7 +7,7 @@ description: 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 use throughout this guide. {% hint style="info" %} -These are general recommendations for working with and building extensions for the Umbraco backoffice. You can use any framework or library of your choice. +These are general recommendations for working with and building extensions for the Umbraco backoffice. You can use any framework or library of your choice. See the [Umbraco Extension Template](./umbraco-extension-template.md) for Umbraco's recommended approach. {% endhint %} ## Before You Begin @@ -127,7 +127,7 @@ npm run build ## Watch for changes and build -To continuously work on the package and have each change built, add a `watch`script in your `package.json` with `vite build --watch`. +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: From a11f1643972a192cb4fc70bbdefafd791dd8837f Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Wed, 7 May 2025 09:30:18 +0200 Subject: [PATCH 05/30] Update 16/umbraco-cms/customizing/development-flow/README.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- 16/umbraco-cms/customizing/development-flow/README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/README.md b/16/umbraco-cms/customizing/development-flow/README.md index e3d896d4059..130d0388d4c 100644 --- a/16/umbraco-cms/customizing/development-flow/README.md +++ b/16/umbraco-cms/customizing/development-flow/README.md @@ -19,8 +19,11 @@ Use Node Version Manager (NVM) for [Windows](https://github.com/coreybutler/nvm- ### App\_Plugins -Extensions such as JavaScript, CSS, and manifests, will go into a folder called `App_Plugins`. If you do not have this folder, you can create it at the root of your Umbraco project. You can include this in the `wwwroot` folder of a Razor Class Library (RCL) project, but it is not required. +Extensions such as JavaScript, CSS, and manifests, will go into a folder called `App_Plugins`. If you do not have this folder, you can create it at the root of your Umbraco project. +{% hint style="info" %} +You can include the `App_Plugins` folder in the `wwwroot` folder of a Razor Class Library (RCL) project, but it is not required. +{% endhint %} ### Source Code The source code for your extensions should ideally be placed in a different project. You can make great use of a [Razor Class Library (RCL) with static assets](https://learn.microsoft.com/en-us/aspnet/core/razor-pages/ui-class?view=aspnetcore-8.0\&tabs=visual-studio#create-an-rcl-with-static-assets) for this purpose. This will make it easier to maintain and test your code. You can create a new project in the root of your Umbraco project, or you can create a new project in a separate folder. From e2854a2731f980e10b696749dc44f3d0184c7c43 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Wed, 7 May 2025 11:41:28 +0200 Subject: [PATCH 06/30] docs: adds link to the menu to the new article and removes deleted article --- 16/umbraco-cms/SUMMARY.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/SUMMARY.md b/16/umbraco-cms/SUMMARY.md index 6865bebeabb..4b67e4f3a66 100644 --- a/16/umbraco-cms/SUMMARY.md +++ b/16/umbraco-cms/SUMMARY.md @@ -142,8 +142,8 @@ * [Extend and customize the editing experience](customizing/overview.md) * [Project Bellissima](customizing/project-bellissima.md) * [Setup Your Development Environment](customizing/development-flow/README.md) + * [Umbraco Extension Template](customizing/development-flow/umbraco-extension-template.md) * [Vite Package Setup](customizing/development-flow/vite-package-setup.md) - * [TypeScript setup](customizing/development-flow/typescript-setup.md) * [Extension Overview](customizing/extending-overview/README.md) * [Extension Registry](customizing/extending-overview/extension-registry/README.md) * [Extension Registration](customizing/extending-overview/extension-registry/extension-registry.md) From ec0c596da2b105137050eebf45ac530e199bf66b Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Wed, 7 May 2025 11:47:19 +0200 Subject: [PATCH 07/30] docs: adds explanation to what `-ex` does --- .../umbraco-extension-template.md | 23 +++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md index f43efbe9708..a32015fed6c 100644 --- a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -28,16 +28,31 @@ dotnet new umbraco-extension -n MyExtension -ex This command creates a new folder called `MyExtension` with the following files and folders: - `MyExtension.csproj`: The project file for the extension. -- `Client`: A folder containing the source code for the extension. -- `tsconfig.json`: The TypeScript configuration file. -- `vite.config.ts`: The Vite configuration file. -- `package.json`: The Node.js package configuration file. +- `Constants.cs`: A file containing constants for the extension. +- `Client`: A folder containing the source code for the extension, a package.json file, a tsconfig.json file, and the vite.config.ts configuration file. - `README.md`: A readme file with instructions on how to build and run the extension. +The `-ex` flag indicates that you want to include examples of how to use the extension. This flag is optional, but it is recommended to include it if you are new to building extensions for Umbraco. It will additionally give you: + +- `Composers`: A folder containing an example composer that registers a custom Swagger API. +- `Controllers`: A folder containing an example API controller for a dashboard. +- `Client/src/api`: A folder containing an example API client that calls the API controller. +- `Client/src/dashboards`: A folder containing an example dashboard Web Component that uses the API client. + +You should be able to see the dashboard in the main Content section of the Backoffice. + ### Include the Extension in your Umbraco Project To include the extension in your Umbraco project, you need to add a reference to the extension project in your Umbraco project. You can do this by right-clicking on the **Dependencies** node in your Umbraco project and selecting **Add Reference**. Then select the `MyExtension` project and click **OK**. +You can also add the reference manually by running the following command in the root folder of your Umbraco project: + +```bash +dotnet add reference ../MyExtension/MyExtension.csproj +``` + +This command adds a reference to the `MyExtension` project in your Umbraco project. You can then build your Umbraco project and see the extension in action. + ## Build and Run the Extension To build and run the extension, you need to install the dependencies and start the Vite development server. You can do this by running the following commands in the `Client` folder of your extension project: From 7a773feee2120fb97925fdc63b3718cfdddbd2c4 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Thu, 8 May 2025 08:26:05 +0200 Subject: [PATCH 08/30] Update 16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md Co-authored-by: Lee Kelleher --- .../customizing/development-flow/umbraco-extension-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md index a32015fed6c..7ebb34405f1 100644 --- a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -77,7 +77,7 @@ This command compiles the TypeScript files and copies them over to the output fo The output files should automatically be copied to the `wwwroot` folder of your Umbraco project. They should also be included in the publish process when you publish your Umbraco project. You can publish your Umbraco project using the following command: ```bash -dotnet publish -c Release +dotnet publish --configuration Release ``` ## Publish as a Package From 7a2b958c0e1964476baf7a32329c51ce2364d001 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Thu, 8 May 2025 08:26:11 +0200 Subject: [PATCH 09/30] Update 16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md Co-authored-by: Lee Kelleher --- .../customizing/development-flow/umbraco-extension-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md index 7ebb34405f1..7dc42047cd7 100644 --- a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -85,7 +85,7 @@ dotnet publish --configuration Release To publish your extension as a package, you need to create a NuGet package. You can do this by running the following command in the root folder of your extension project: ```bash -dotnet pack -c Release +dotnet pack --configuration Release ``` This command creates a NuGet package in the `bin/Release` folder of your extension project. You can then publish this package to a NuGet feed or share it with others. From 0c9326c872aa2475aa6693f82dd7a04adae95375 Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:16:01 +0200 Subject: [PATCH 10/30] Update 16/umbraco-cms/customizing/development-flow/README.md --- 16/umbraco-cms/customizing/development-flow/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/README.md b/16/umbraco-cms/customizing/development-flow/README.md index 130d0388d4c..5667b952126 100644 --- a/16/umbraco-cms/customizing/development-flow/README.md +++ b/16/umbraco-cms/customizing/development-flow/README.md @@ -80,7 +80,7 @@ This will add a package to your devDependencies containing the TypeScript defini **TSConfig** -Make sure to configure your TypeScript compiler so it includes the Global Types from the Backoffice. This enables you to utilize the declared Extension Types. If your project is using other Packages that provides their Extension Types then please list these as well. +Make sure to configure your TypeScript compiler so it includes the Global Types from the Backoffice. This enables you to utilize the declared Extension Types. If your project is using other Packages that provide their Extension Types, list these as well. In your `tsconfig.json` file. Add the array `types` inside `compilerOptions`, with the entry of `@umbraco-cms/backoffice/extension-types`: From 70400277ae609457426d53a40b97e759f874fabd Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:16:11 +0200 Subject: [PATCH 11/30] Update 16/umbraco-cms/customizing/development-flow/README.md --- 16/umbraco-cms/customizing/development-flow/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/README.md b/16/umbraco-cms/customizing/development-flow/README.md index 5667b952126..c8c3c21f4a0 100644 --- a/16/umbraco-cms/customizing/development-flow/README.md +++ b/16/umbraco-cms/customizing/development-flow/README.md @@ -82,7 +82,7 @@ This will add a package to your devDependencies containing the TypeScript defini Make sure to configure your TypeScript compiler so it includes the Global Types from the Backoffice. This enables you to utilize the declared Extension Types. If your project is using other Packages that provide their Extension Types, list these as well. -In your `tsconfig.json` file. Add the array `types` inside `compilerOptions`, with the entry of `@umbraco-cms/backoffice/extension-types`: +In your `tsconfig.json` file, add the array `types` inside `compilerOptions`, with the entry of `@umbraco-cms/backoffice/extension-types`: ```json { From 421c052d0964754857473838b275a70b357740e0 Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:16:42 +0200 Subject: [PATCH 12/30] Update 16/umbraco-cms/customizing/development-flow/README.md --- 16/umbraco-cms/customizing/development-flow/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/README.md b/16/umbraco-cms/customizing/development-flow/README.md index c8c3c21f4a0..216d6a0989d 100644 --- a/16/umbraco-cms/customizing/development-flow/README.md +++ b/16/umbraco-cms/customizing/development-flow/README.md @@ -124,4 +124,4 @@ If you're using Visual Studio Code we recommend the extension called [Lit-Plugin ## What's Next? -Now that you have prepared your development environment, you can start building your Umbraco extensions. Read the next article on [Umbraco Extension Template](./umbraco-extension-template.md) to set all of this up in one go. +Now that you have prepared your development environment, start building your Umbraco extensions. Read the article on [Umbraco Extension Template](./umbraco-extension-template.md) to set all this up. From feca1d5b8258bfd0171748632e47fbe5d02dc7bb Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:16:49 +0200 Subject: [PATCH 13/30] Update 16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md --- .../customizing/development-flow/umbraco-extension-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md index 7dc42047cd7..ff8f2153079 100644 --- a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -1,5 +1,5 @@ --- -description: Use the `umbraco-extension` dotnet template to create a new Umbraco extension +description: Use the `umbraco-extension` .NET template to create a new Umbraco extension. --- # Umbraco Extension Template From b3f03f347a6fb562edb470f82336364422eaff01 Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:16:56 +0200 Subject: [PATCH 14/30] Update 16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md --- .../customizing/development-flow/umbraco-extension-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md index ff8f2153079..e422f253add 100644 --- a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -4,7 +4,7 @@ description: Use the `umbraco-extension` .NET template to create a new Umbraco e # Umbraco Extension Template -Umbraco provides a dotnet template to help you get started with building extensions for the Umbraco backoffice. This template sets up a new project with all the necessary files and configurations to build an extension. The template is called `umbraco-extension` and can be used to create a new Umbraco extension project with a single command. +Umbraco provides a .NET template to help you get started with building extensions for the Umbraco backoffice. This template sets up a new project with all the necessary files and configurations to build an extension. The template is called `umbraco-extension` and can be used to create a new Umbraco extension project with a single command. ## Prerequisites - [.NET SDK](https://dotnet.microsoft.com/download) version 9.0 or later From 81a4691ab4edd95fb3d4a559a25a10c142a95b62 Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:17:11 +0200 Subject: [PATCH 15/30] Update 16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md --- .../customizing/development-flow/umbraco-extension-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md index e422f253add..e6d278f2194 100644 --- a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -17,7 +17,7 @@ To install the Umbraco extension template, run the following command in your ter dotnet new install Umbraco.Templates ``` -This command installs the `umbraco` and `umbraco-extension` templates, which you can use to create new Umbraco and Umbraco extension projects. You may already have this installed, if you have created a new Umbraco project using the `dotnet new umbraco` command. +This command installs both the `umbraco` and `umbraco-extension` templates, which you can use to create new Umbraco and Umbraco extension projects. If a new Umbraco project has previously been created using `dotnet new umbraco`, the templates may already be installed. ## Create a New Umbraco Extension To create a new Umbraco extension project, run the following command in your terminal. It should be executed in a folder where you want to create the new project, for example in the root of your solution: From dac5c05de67e4590d025f6dc53b4bcd9d81949b1 Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:17:21 +0200 Subject: [PATCH 16/30] Update 16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md --- .../customizing/development-flow/umbraco-extension-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md index e6d278f2194..221c3401ebb 100644 --- a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -92,7 +92,7 @@ This command creates a NuGet package in the `bin/Release` folder of your extensi The `umbraco-extension` template is opinionated until a certain point. It is a starting point for building extensions for the Umbraco backoffice. The template includes a basic structure and configuration for building extensions, but you can customize it to fit your needs. You can add additional files, folders, and configurations as needed. -To publish your extension as an Umbraco Package, you need some additional files. You can read more about that in the [Umbraco Package documentation](../../customizing/umbraco-package.md). +To publish your extension as an Umbraco Package, you need some additional files. For details, see the [Umbraco Package](../../customizing/umbraco-package.md) article. ### The Opinionated Starter Kit From c605851a24f053f913e29fb5bbfd885a23f315fa Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:17:29 +0200 Subject: [PATCH 17/30] Update 16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md --- .../customizing/development-flow/umbraco-extension-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md index 221c3401ebb..80b6fd00392 100644 --- a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -96,7 +96,7 @@ To publish your extension as an Umbraco Package, you need some additional files. ### The Opinionated Starter Kit -One other option is to use the [Opinionated Umbraco Package Starter Template](https://github.com/LottePitcher/opinionated-package-starter). This is a template that includes all the files and configurations needed to build an Umbraco package. It builds on top of the `umbraco-extension` template and includes additional files and configurations for building Umbraco packages. This template is a great starting point for building Umbraco packages and includes everything you need to get started. +Another option is to use the [Opinionated Umbraco Package Starter Template](https://github.com/LottePitcher/opinionated-package-starter). This is a template that includes all the files and configurations needed to build an Umbraco package. It builds on top of the `umbraco-extension` template and includes additional files and configurations for building Umbraco packages. This template is a great starting point for building Umbraco packages and includes everything you need to get started. You can install this template by running the following command in your terminal: From dd60c75a3463dafdf41dffdfe59c37f8bffb6137 Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:17:39 +0200 Subject: [PATCH 18/30] Update 16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md --- .../customizing/development-flow/umbraco-extension-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md index 80b6fd00392..cd7bed9ccf3 100644 --- a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -98,7 +98,7 @@ To publish your extension as an Umbraco Package, you need some additional files. Another option is to use the [Opinionated Umbraco Package Starter Template](https://github.com/LottePitcher/opinionated-package-starter). This is a template that includes all the files and configurations needed to build an Umbraco package. It builds on top of the `umbraco-extension` template and includes additional files and configurations for building Umbraco packages. This template is a great starting point for building Umbraco packages and includes everything you need to get started. -You can install this template by running the following command in your terminal: +To install this template, run the following command in your terminal: ```bash dotnet new install Umbraco.Community.Templates.PackageStarter From 42cbbab4079c7553be7ab1848bdba6a156a3e0e1 Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:17:46 +0200 Subject: [PATCH 19/30] Update 16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md --- .../customizing/development-flow/umbraco-extension-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md index cd7bed9ccf3..e8c3ad7d6fc 100644 --- a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -104,7 +104,7 @@ To install this template, run the following command in your terminal: dotnet new install Umbraco.Community.Templates.PackageStarter ``` -Then you can create a new package project by running the following command: +To create a new package project, run the following command: ```bash dotnet new umbracopackagestarter -n YourPackageName -an "Your Name" -gu "YourGitHubUsername" -gr "YourGitHubRepoName" From 65df018f556841c388ece3bda03a6e4071b9310a Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:17:53 +0200 Subject: [PATCH 20/30] Update 16/umbraco-cms/customizing/development-flow/vite-package-setup.md --- .../customizing/development-flow/vite-package-setup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/vite-package-setup.md b/16/umbraco-cms/customizing/development-flow/vite-package-setup.md index aac814bbca7..0afe7f7db7e 100644 --- a/16/umbraco-cms/customizing/development-flow/vite-package-setup.md +++ b/16/umbraco-cms/customizing/development-flow/vite-package-setup.md @@ -7,7 +7,7 @@ description: 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 use throughout this guide. {% hint style="info" %} -These are general recommendations for working with and building extensions for the Umbraco backoffice. You can use any framework or library of your choice. See the [Umbraco Extension Template](./umbraco-extension-template.md) for Umbraco's recommended approach. +These are general recommendations for working with and building extensions for the Umbraco backoffice. You can use any framework or library of your choice. For Umbraco's recommended approach, see the [Umbraco Extension Template](./umbraco-extension-template.md). {% endhint %} ## Before You Begin From 484be50a5ccaee2f6a512aad8f96fc8cd7eb3cb7 Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:18:05 +0200 Subject: [PATCH 21/30] Update 16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md --- .../customizing/development-flow/umbraco-extension-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md index e8c3ad7d6fc..e1f0c2e2dc3 100644 --- a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -29,7 +29,7 @@ dotnet new umbraco-extension -n MyExtension -ex This command creates a new folder called `MyExtension` with the following files and folders: - `MyExtension.csproj`: The project file for the extension. - `Constants.cs`: A file containing constants for the extension. -- `Client`: A folder containing the source code for the extension, a package.json file, a tsconfig.json file, and the vite.config.ts configuration file. +- `Client`: A folder containing the source code for the extension, a `package.json` file, a `tsconfig.json` file, and the `vite.config.ts` configuration file. - `README.md`: A readme file with instructions on how to build and run the extension. The `-ex` flag indicates that you want to include examples of how to use the extension. This flag is optional, but it is recommended to include it if you are new to building extensions for Umbraco. It will additionally give you: From 148abd1107c077ac884eb38b18ed5a9ff6dd6cec Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:18:22 +0200 Subject: [PATCH 22/30] Update 16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md --- .../customizing/development-flow/umbraco-extension-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md index e1f0c2e2dc3..f0d41af15fc 100644 --- a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -39,7 +39,7 @@ The `-ex` flag indicates that you want to include examples of how to use the ext - `Client/src/api`: A folder containing an example API client that calls the API controller. - `Client/src/dashboards`: A folder containing an example dashboard Web Component that uses the API client. -You should be able to see the dashboard in the main Content section of the Backoffice. +After setup, the dashboard appears in the main **Content** section of the Backoffice. ### Include the Extension in your Umbraco Project From 1dcf50d9d2d71bafbccb5658ef662485555a6faa Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:18:35 +0200 Subject: [PATCH 23/30] Update 16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md --- .../customizing/development-flow/umbraco-extension-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md index f0d41af15fc..7ef76aa8e62 100644 --- a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -41,7 +41,7 @@ The `-ex` flag indicates that you want to include examples of how to use the ext After setup, the dashboard appears in the main **Content** section of the Backoffice. -### Include the Extension in your Umbraco Project +### Add the Extension to an Umbraco Project To include the extension in your Umbraco project, you need to add a reference to the extension project in your Umbraco project. You can do this by right-clicking on the **Dependencies** node in your Umbraco project and selecting **Add Reference**. Then select the `MyExtension` project and click **OK**. From ccf8e82bfbad608afdbd6c1f460d8e59122d791e Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:18:53 +0200 Subject: [PATCH 24/30] Update 16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md --- .../development-flow/umbraco-extension-template.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md index 7ef76aa8e62..325b5a1b5c9 100644 --- a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -43,7 +43,14 @@ After setup, the dashboard appears in the main **Content** section of the Backof ### Add the Extension to an Umbraco Project -To include the extension in your Umbraco project, you need to add a reference to the extension project in your Umbraco project. You can do this by right-clicking on the **Dependencies** node in your Umbraco project and selecting **Add Reference**. Then select the `MyExtension` project and click **OK**. +To include the extension in your Umbraco project, you need to add a reference to the extension project in your Umbraco project. + +#### Option 1: Via Visual Studio + +1. Right-click the **Dependencies** node in the Umbraco project. +2. Select **Add Reference**. +3. Choose the `MyExtension` project. +4. Click **OK**. You can also add the reference manually by running the following command in the root folder of your Umbraco project: From b912660af392734f1a5fc347ed52eaafa49fb426 Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:19:05 +0200 Subject: [PATCH 25/30] Update 16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md --- .../customizing/development-flow/umbraco-extension-template.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md index 325b5a1b5c9..02717f7657c 100644 --- a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -52,7 +52,8 @@ To include the extension in your Umbraco project, you need to add a reference to 3. Choose the `MyExtension` project. 4. Click **OK**. -You can also add the reference manually by running the following command in the root folder of your Umbraco project: +#### Option 2: Via CLI +Run the following command in the root folder of your Umbraco project: ```bash dotnet add reference ../MyExtension/MyExtension.csproj From c77faea978bfb864a01f7aaffae07182cf1ca8b0 Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:19:25 +0200 Subject: [PATCH 26/30] Update 16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md --- .../customizing/development-flow/umbraco-extension-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md index 02717f7657c..abb772fc088 100644 --- a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -63,7 +63,7 @@ This command adds a reference to the `MyExtension` project in your Umbraco proje ## Build and Run the Extension -To build and run the extension, you need to install the dependencies and start the Vite development server. You can do this by running the following commands in the `Client` folder of your extension project: +To build and run the extension, install the dependencies and start the Vite development server. To do this, run the following commands in the `Client` folder of your extension project: ```bash npm install From 4829193281183d8ba8a69ac7dfd28f2bbb8f7819 Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:19:50 +0200 Subject: [PATCH 27/30] Update 16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md --- .../customizing/development-flow/umbraco-extension-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md index abb772fc088..a7595db6c2c 100644 --- a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -71,7 +71,7 @@ npm run build ``` {% hint style="info" %} -The project will also automatically build when you run the Umbraco project. You can also run the Vite development server in watch mode by running the following command: +The project also builds automatically when running the Umbraco project. To start the Vite development server in watch mode, run the following command: ```bash npm run watch From c75d14bf9e833f873baa2cc008557bff80d6ad7a Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:20:04 +0200 Subject: [PATCH 28/30] Update 16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md --- .../customizing/development-flow/umbraco-extension-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md index a7595db6c2c..cd90f73c5bf 100644 --- a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -78,7 +78,7 @@ npm run watch ``` {% endhint %} -This command compiles the TypeScript files and copies them over to the output folder in `wwwroot`. You can then run your Umbraco project and see the extension in action. +This command compiles the TypeScript files and copies them over to the `wwwroot` output folder. Once complete, run the Umbraco project to view the extension in action. ## Publish the Project From cbc3daf1d4caada5c45baa8bdcdae6381539aaa7 Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:20:16 +0200 Subject: [PATCH 29/30] Update 16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md --- .../customizing/development-flow/umbraco-extension-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md index cd90f73c5bf..1b327bbc448 100644 --- a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -82,7 +82,7 @@ This command compiles the TypeScript files and copies them over to the `wwwroot ## Publish the Project -The output files should automatically be copied to the `wwwroot` folder of your Umbraco project. They should also be included in the publish process when you publish your Umbraco project. You can publish your Umbraco project using the following command: +The output files are automatically copied to the `wwwroot` folder of your Umbraco project. They are also included in the publishing process when you publish your Umbraco project. You can publish your Umbraco project using the following command: ```bash dotnet publish --configuration Release From 336ba54e169fccbd09ea80b50064d0a323601b6e Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Thu, 8 May 2025 10:20:27 +0200 Subject: [PATCH 30/30] Update 16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md --- .../customizing/development-flow/umbraco-extension-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md index 1b327bbc448..1f32b8c0d37 100644 --- a/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md +++ b/16/umbraco-cms/customizing/development-flow/umbraco-extension-template.md @@ -90,7 +90,7 @@ dotnet publish --configuration Release ## Publish as a Package -To publish your extension as a package, you need to create a NuGet package. You can do this by running the following command in the root folder of your extension project: +To publish your extension as a package, create a NuGet package. Run the following command in the root folder of your extension project: ```bash dotnet pack --configuration Release