Deploy UI project using pipeline in azure devops

I’m trying to build and deploy websdk 1023 project using azure devops by creating the pipeline. In yml file, defined node version 22 and ng build to build the project and all the required variables such as tenant, username,password etc. are defined in the variable groups. Build is successful. Do I need to use the goc8ycli command (c8y applications) (or) any other script command for deployment? Could you please share the sample scripts to use it for the deployment to the tenant?

Hi @Vignesh_Babu,

The @c8y/toolkit npm package is part of the Web SDK and meant for the usecase of deploying an already built application.

In case you want to build an deploy at the same time, you can also use the ng deploy command offered by the Web SDK.

Using the go-c8y-cli is also a valid option.

1 Like

Thank you for your response.

I have a question regarding deploying a UI plugin through a pipeline.

My UI project is a monorepo that contains both applications and plugins. Using the ng deploy command in the pipeline, I’m able to deploy both the application and the plugin successfully. However, the issue is that the newly deployed plugin version is not being marked as the latest version—an older version continues to remain marked as latest.

Could you please clarify the recommended approach for:

  1. Deploying plugins via a pipeline

  2. Ensuring that the newly deployed plugin version is set as the latest and correctly updated for all the applications where the plugin is already installed?

  3. If ng deploy is not the correct approach for plugins, do I need to install goc8ycli tool in the pipeline and then execute the below command to create or update the plugins version?

  • c8y ui plugins create --file ./my_plugin.zip --tag latest
  • c8y ui plugins versions update --plugin myplugin --version “1.0.0” --tag latest,other

It would help if you would share what options you have used for the ng deploy command.

Did you take a look at the help text for that command?

Options:
      --help                    Shows a help message for this command in the console.                                                                                                                                            [boolean]
  -c, --configuration           One or more named builder configurations as a comma-separated list as specified in the "configurations" section in angular.json.
                                The builder uses the named configurations to run the given target.
                                For more information, see https://angular.dev/reference/configs/workspace-config#alternate-build-configurations.                                                                                  [string]
  -w, --add-web-sdk-stable-tag  If the 'webSdkVersion' is provided as part of the cumulocity.json file in the build, it will automatically add a '<majorVersionOfWebSDK>-stable' tag to the uploaded version.                    [boolean]
      --build-target            The target string for the build                                                                                                                                                                   [string]
  -d, --delete-existing-tags    Enforce deployment even if the tags exist already. The command will try to remove existing versions with the tag provided with -t.                                                               [boolean]
  -P, --password                Tenant user password.                                                                                                                                                                             [string]
  -r, --rolling-tags            If the tags exist already, the command will try to remove the existing tags that were provided with -t from versions.                                                                            [boolean]
  -t, --tags                    Tags for package applications. To provide multiple tags, separate them with ","                                                                                                                   [string]
  -T, --tenant                  Tenant id.                                                                                                                                                                                        [string]
  -u, --url                     The default url to proxy to.                                                                                                                                                                      [string]
  -U, --user                    Tenant user login.                                                                                                                                                                                [string]
  -z, --zip-path                Path to zipped application.

In general this tool does not provide an option to update the plugin version installed on an application. It is only meant to deploy an application/plugin not to install a plugin to an application.

Below 2 scripts for application and plugin deployments

- script: |

npx ng run app.dummy-app:deploy:production --url $(C8Y_BASEURL) --tenant $(C8Y_TENANT) --user $(C8Y_USER) --password $(C8Y_PASSWORD) displayName: ‘Deploy dummy app using ng deploy’ env: C8Y_PASSWORD: $(C8Y_PASSWORD)

      - script: |  npx ng run plugin.dummy-event-widget:deploy:production --url $(C8Y_BASEURL) --tenant $(C8Y_TENANT)  --user $(C8Y_USER)  --password $(C8Y_PASSWORD)   displayName: 'Deploy dummy Event Widget using ng deploy'env:   C8Y_PASSWORD: $(C8Y_PASSWORD)

Latest version of plugin should be marked as latest post deployment of plugin via pipeline.

You would need to add the --tags latest option.