# Cumulocity IoT Web Development Tutorial - Part 5: Provide widget as a UI Plugin

**URL:** <https://community.cumulocity.com/t/cumulocity-iot-web-development-tutorial-part-5-provide-widget-as-a-ui-plugin/3926>\
**Category:** Knowledge Base\
**Tags:** web-development, cumulocity\
**Created:** [April 14, 2023, 9:47am UTC](https://community.cumulocity.com/t/cumulocity-iot-web-development-tutorial-part-5-provide-widget-as-a-ui-plugin/3926 "2023-04-14T09:47:22Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Christian\_Guether1](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/christian_guether1/32/14848_2.png) [@Christian\_Guether1](https://community.cumulocity.com/u/Christian_Guether1)\
**Post date:** [April 14, 2023, 9:47am UTC](https://community.cumulocity.com/t/cumulocity-iot-web-development-tutorial-part-5-provide-widget-as-a-ui-plugin/3926/1 "2023-04-14T09:47:22Z")

</div>

> [Cumulocity IoT Web Development Tutorial - Part 1: Start your journey](https://community.cumulocity.com/t/cumulocity-iot-web-development-tutorial-part-1-start-your-journey/4124)  
> [Cumulocity IoT Web Development Tutorial - Part 2: Create your first component](https://community.cumulocity.com/t/cumulocity-iot-web-development-tutorial-part-2-create-your-first-component/5569)  
> [Cumulocity IoT Web Development Tutorial - Part 3: Query data from Cumulocity IoT](https://community.cumulocity.com/t/cumulocity-iot-web-development-tutorial-part-3-query-data-from-cumulocity-iot/7678)  
> [Cumulocity IoT Web Development Tutorial - Part 4: Convert component into a widget](https://community.cumulocity.com/t/cumulocity-iot-web-development-tutorial-part-4-convert-component-into-a-widget/2873)  
> **Cumulocity IoT Web Development Tutorial - Part 5: Provide widget as a UI Plugin**

## UI Plugins? UI Plugins!

Part 5 of this web development tutorial series concludes the first part of your journey about becoming an Cumulocity web development expert. It’s great that you’ve gotten this far.

![awesome](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/2/5/258ebb7e6dbe9d40a0256b606b25a1afb8c5dbfa.gif)

In the [last part](https://community.cumulocity.com/t/cumulocity-web-development-tutorial-part-4-convert-component-into-a-widget/2873), you have learned how to create your own custom Cumulocity widget, which can then be used on dashboards in Cumulocity web applications. Normally, you want to share your awesome widget with others, so they can use it in their applications and solutions. Cumulocity introduced the Micro-Frontend framework, which allows you to easily install your widget as a UI plugin for any Cumulocity application. There is already an article [The power of micro frontends – How to dynamically extend Cumulocity IoT Frontends](https://community.cumulocity.com/t/the-power-of-micro-frontends-how-to-dynamically-extend-cumulocity-iot-frontends/2577), which gives you a good introduction and overview about the Micro-Frontend framework. Furthermore, you can find additional information in the [official documentation](https://cumulocity.com/guides/10.16.0/web/microfrontends/).

In this part of the Cumulocity web development tutorial series, you will learn how you can provide your widget as a UI plugin to Cumulocity using the Micro-Frontend Framework.

## Your widget as a UI Plugin

### Prerequisite - new project, new template

For part 5 you will create a new project using the `@angular/cli` and `@c8y/websdk` tools. The `@c8y/websdk` tool comes with a template specific to UI plugins. Create a new project running the following command:

```auto
npx @angular/cli@v19-lts new --style=less

```

Provide this configuration:

```auto
$ npx @angular/cli@v19-lts new --style=less
? What name would you like to use for the new workspace and initial project? my-first-plugin
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No

```

Once the Angular project has been generated, change directory into the `my-first-plugin` project and add the `@c8y/websdk` to the project.

```auto
cd my-first-plugin

```

and run

```auto
npx ng add @c8y/websdk

```

Use the `sample-plugin` as a template and scaffold the project based on the latest version:

```auto
? Which base project do you want to scaffold from? sample-plugin
? Which base version do you want to scaffold from? 1022.8.0 (latest, next, y2026-lts)

```

### The base project

The base project already comes with a widget. As you want to provide your custom `device-info` widget as a UI plugin, you can remove the existing widget and add your widget like the following:

1. Delete the directories `widget` and `view` inside the `./src/app` directory from the project.

2. Delete the content of the `assets` directory inside the `./src` folder.

3. Delete the `sample-plugin.model.ts` and `index.ts` inside the `./src/app` directory from the project.

4. Create a new directory called `components` inside the `./src` directory of the project.

5. Copy the `device-info` directory and its content, which you have built in [part 4](https://community.cumulocity.com/t/cumulocity-web-development-tutorial-part-4-convert-component-into-a-widget/2873), into the newly created modules directory. You can also copy the `device-info` component from the [github project](https://github.com/Cumulocity-IoT/cumulocity-web-development-tutorial/tree/main/part-04/my-c8y-application/src/device-info).

6. Next you need to update the `cumulocity.config.json` file, to have your widget be recognized as a UI plugin. All configuration is done within the runtime options of the [application options](https://cumulocity.com/docs/web/application-configuration/#application-options) in the `cumulocity.config.ts`.

7. Update the name and description of your plugin by adding them to the `runTime` object. The name and description will be shown when your plugin is later listed in the packages section:

8. Furthermore, Cumulocity needs to know, which components should be part of your plugin. This can be configured in the application option `exports`. As you have removed the default widget, you can update the existing entry :

A plugin can consist of multiple modules. If you later upload your plugin to Cumulocity, the included modules will be listed. The `name` and `description` from above are used in the list of modules to describe each module. The `module` and `path` properties are necessary to identify the module, which should be used once it is installed as part of the plugin.

**That’s it already!**. You have configured your first UI-Plugin.

![easy-peasy](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/8/2/82054cc0e8ce1cd37ce23dc54ccfbc0356ba1d6c.gif)

### Test your UI plugin locally

The logical next step is to test your plugin locally before deploying and sharing it. The plugin is a Cumulocity widget, which should be used on Cumulocity dashboards, e.g. in the Cockpit application. Therefore, you want to test it locally in the Cockpit application. To test the plugin inside the Cockpit application, you need to adjust the `start` script in the `package.json`:

```auto
"start": "ng serve -u {{C8Y_URL}} --shell cockpit"

```

Replace the `{{C8Y_URL}}` placeholder with the Cumulocity instance you want to proxy data from. The additional `--shell cockpit` parameter, will run your plugin inside the Cockpit application, which acts as a shell. In order for the shell to recognize your plugin, you must configure and register your plugin as a remote in the `cumulocity.config.ts`. In the [cumulocity.config.ts](https://github.com/Cumulocity-IoT/cumulocity-web-development-tutorial/blob/main/part-05/my-first-plugin/cumulocity.config.ts) update the application options for `remotes` of the `runTime` property and register your plugin:

```auto
remotes: {
  'widget-plugin': ['deviceInfoViewProviders'],
},

```

Once you have updated the `cumulocity.config.ts`, you can run `npm start`.

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/b/5/b5b76b4c57c8130560be47e8846084b0b24b0493.png)

Click on the link for the shell application to open the Cockpit application, which now includes your plugin. Navigate to a device dashboard and try to add the `device-info` widget:

![add-widget-cockpit](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/3/7/374366518d048c73ffb4631d3ee9e7c29de1109f.gif)

> **Note:** The shell application should have at least the same version as the UI Plugin, you have developed. If your UI Plugin uses the Cumulocity version `1022.x.x`, the shell application, e.g. Cockpit application, must be at least version `1022.x.x` or higher. This is necessary to ensure the Angular version and certain features of Angular are supported. Otherwise, you might receive errors.

### Build and deploy your UI-Plugin

Building your plugin is similar to how you build and deploy C8Y web applications. Inside your project run the command `npm run build`. This command will execute the script `ng serve` and build your UI-Plugin. Once your plugin has been built, you can deploy it to your target tenant by running `npm run deploy` (`ng deploy`). The command will upload your plugin to your Cumulocity tenant and list it in the Extension section as part of the Administration application.

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/f/e/fef71615370aeddccd8b9351436e64780cee8268.png)

If you click on your deployed plugin, you can view its details of it. Along with some basic information, the content of the `README.md` is displayed as well. Make sure to provide some meaningful description about your widget in the readme. Take a look at the [README.md](https://github.com/Cumulocity-IoT/cumulocity-web-development-tutorial/blob/feature/part-05/part-05/my-first-plugin/README.md) in GitHub.

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/f/6/f6cfd9f1c868cb94b6f9fd3545bf1ea10a408c44.jpeg)

> **Note:** If you want to use images or gifs inside your README, you need to copy these during the build process. To copy assets you can use the `copy` statement as part of the c8y application options inside the [cumulocity.config.ts](https://github.com/Cumulocity-IoT/cumulocity-web-development-tutorial/blob/main/part-05/my-first-plugin/cumulocity.config.ts)

With the widget deployed, you can now install it as part of an application, for example, the Cockpit application. If you want to install your plugin as part of the Cockpit application, you first need to clone the Cockpit application and afterward, you can add the plugin to it:

![install-plugin](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/e/9/e99eeeb828f2b3886c23f2b62c5256e8c54ab0fa.gif)

## Conclusion

Part 5 concludes the first stage of you becoming an experienced Cumulocity web developer. You have now learned how you can serve your Cumulocity widget as a UI Plugin and share it within Cumulocity with other users.

The Web Development Tutorial Series will not stop here. Upcoming articles will cover specific topics in the context of Cumulocity web development. These can be about best practices or the coverage of specific components from the `@c8y/ngx-components` library.

If you have a topic, which you want to see as part of this tutorial series, feel free to add it as a suggestion in the comment section.