diff --git a/15/umbraco-cms/customizing/development-flow/vite-package-setup.md b/15/umbraco-cms/customizing/development-flow/vite-package-setup.md index 17de26a7554..9a918e3f5b2 100644 --- a/15/umbraco-cms/customizing/development-flow/vite-package-setup.md +++ b/15/umbraco-cms/customizing/development-flow/vite-package-setup.md @@ -27,22 +27,22 @@ Before following this guide, read the [Setup Your Development Environment](./) a npm create vite@latest ``` -This command will help you set up your new package, asking you to pick a framework and a compiler. +This command will set up your new package and ask you to pick a framework and a compiler. -3. Enter `Client` as both the **Project Name** and **Package name** when prompted, +3. Enter `Client` as both the **Project Name** and **Package name** when prompted. + +4. Choose **Lit** and **TypeScript** as the framework and language. {% hint style="info" %} -For following this tutorial, we recommend using the names given above, although you can choose any other you prefer. +For this tutorial, it is recommended to use the names given above. However, feel free to choose other names if preferred. {% endhint %} -4. Choose **Lit** and **TypeScript**. -

Create vite command choices

This creates a new folder called `Client`, sets up our new project, and creates a `package.json` file, which includes the necessary packages. This is where all your source files live. {% hint style="info" %} -Alternatively of the two steps above, you can type the following: +Alternatively, you can skip the interactive prompts and use this command: ```typescript npm create vite@latest Client -- --template lit-ts @@ -51,12 +51,14 @@ npm create vite@latest Client -- --template lit-ts This will create a Vite Package with Lit and TypeScript in a folder called **Client**. {% endhint %} -5. Navigate to the new project folder **Client** and install the packages using: +5. Navigate to the **Client** project folder and install the required packages: ```bash npm install ``` +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 [@umbraco-cms/backoffice npm page](https://www.npmjs.com/package/@umbraco-cms/backoffice). + 6. Install the Backoffice package using the following command: ```bash @@ -64,12 +66,15 @@ npm install -D @umbraco-cms/backoffice ``` {% hint style="info" %} -Optionally you can use `--legacy-peer-deps` in the installation command to avoid installing Umbraco´s sub-dependencies like TinyMCE and Monaco Editor:\ -`npm install --legacy-peer-deps -D @umbraco-cms/backoffice` - -If this is used the Intellisense to those external references will not be available. +To avoid installing Umbraco’s sub-dependencies such as TinyMCE and Monaco Editor, you can add the `--legacy-peer-deps` flag: {% endhint %} + ```bash +` npm install --legacy-peer-deps -D @umbraco-cms/backoffice` + ``` + +Using this flag will disable Intellisense for external references. + 7. Open the `tsconfig.json` file. 8. Add the array `types` inside `compilerOptions`, with the entry of `@umbraco-cms/backoffice/extension-types`: @@ -109,7 +114,7 @@ export default defineConfig({ {% endcode %} {% hint style="info" %} -The `outDir` parameter specifies where the compiled files will be placed. In this case, it is the `App_Plugins/Client` folder. If you have a different structure such as a Razor Class Library (RCL) project, you should change this path to `wwwroot`. +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`. {% endhint %} 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. diff --git a/15/umbraco-cms/tutorials/creating-a-property-editor/README.md b/15/umbraco-cms/tutorials/creating-a-property-editor/README.md index fb24bdab042..7b1acf66445 100644 --- a/15/umbraco-cms/tutorials/creating-a-property-editor/README.md +++ b/15/umbraco-cms/tutorials/creating-a-property-editor/README.md @@ -86,7 +86,7 @@ Now let's create the web component we need for our property editor. {% code title="suggestions-property-editor-ui.element.ts" %} ```typescript import { LitElement, html, customElement, property } from "@umbraco-cms/backoffice/external/lit"; -import { UmbPropertyEditorUiElement } from "@umbraco-cms/backoffice/extension-registry"; +import { UmbPropertyEditorUiElement } from "@umbraco-cms/backoffice/property-editor"; @customElement('my-suggestions-property-editor-ui') export default class MySuggestionsPropertyEditorUIElement extends LitElement implements UmbPropertyEditorUiElement {