V14: Build and release the type declarations of the Backoffice to npm (#16718)

* separate backoffice install into its own template

* add new job to build the backoffice npm package

* move location of templates

* set version, then build, then pack

* use nbgv to get just the NpmPackageVersion

* calculate version earlier and for both builds

* merge two tasks

* add Build keyword to the display name

* get the node version from the backoffice

* update backoffice submodule

* bump npm version before restoring cache to ensure the cache key doesn't change

* add template to umbraco.sln

build/azure-pipelines.yml

@@ -63,15 +63,14 @@ variables:
   DOTNET_GENERATE_ASPNET_CERTIFICATE: false
   DOTNET_SKIP_FIRST_TIME_EXPERIENCE: true
   DOTNET_CLI_TELEMETRY_OPTOUT: true
+  npm_config_cache: $(Pipeline.Workspace)/.npm_client
+  NODE_OPTIONS: --max_old_space_size=16384
 
 stages:
   ###############################################
   ## Build
   ###############################################
   - stage: Build
-    variables:
-      npm_config_cache: $(Pipeline.Workspace)/.npm_client
-      NODE_OPTIONS: --max_old_space_size=16384
     jobs:
       - job: A
         displayName: Build Umbraco CMS
@@ -80,18 +79,11 @@ stages:
         steps:
           - checkout: self
             submodules: true
-          - task: NodeTool@0
-            displayName: Use Node.js $(nodeVersion)
-            retryCountOnTaskFailure: 3
+          - task: UseDotNet@2
+            displayName: Use .NET SDK from global.json
             inputs:
-              versionSpec: $(nodeVersion)
-          - script: npm ci --no-fund --no-audit --prefer-offline
-            displayName: Run npm ci (Bellissima)
-            workingDirectory: src/Umbraco.Web.UI.Client
-          - script: npm run generate:api-local
-            displayName: Generate API models (Bellissima)
-            workingDirectory: src/Umbraco.Web.UI.Client
-            enabled: false
+              useGlobalJson: true
+          - template: templates/backoffice-install.yml
           - script: npm run build:for:cms
             displayName: Run build (Bellissima)
             workingDirectory: src/Umbraco.Web.UI.Client
@@ -101,10 +93,6 @@ stages:
           - script: npm run build
             displayName: Run npm build (Login)
             workingDirectory: src/Umbraco.Web.UI.Login
-          - task: UseDotNet@2
-            displayName: Use .NET SDK from global.json
-            inputs:
-              useGlobalJson: true
           - task: DotNetCoreCLI@2
             displayName: Run dotnet restore
             inputs:
@@ -127,18 +115,25 @@ stages:
             inputs:
               targetPath: $(Build.SourcesDirectory)
               artifactName: build_output
+
+      - job: B
+        displayName: Build Bellissima Package
+        pool:
+          vmImage: 'ubuntu-latest'
+        steps:
+          - checkout: self
+            submodules: true
+          - template: templates/backoffice-install.yml
+          - script: npm run build:for:npm
+            displayName: Run build:for:npm
+            workingDirectory: src/Umbraco.Web.UI.Client
           - bash: |
-              echo "##[command]Running npm version"
-              echo "##[debug]Version: $PACKAGE_VERSION"
               echo "##[command]Running npm pack"
               echo "##[debug]Output directory: $(Build.ArtifactStagingDirectory)"
-              npm version $PACKAGE_VERSION --allow-same-version --no-git-tag-version
               mkdir $(Build.ArtifactStagingDirectory)/npm
               npm pack --pack-destination $(Build.ArtifactStagingDirectory)/npm
               mv .npmrc $(Build.ArtifactStagingDirectory)/npm/
-            displayName: Prepare Bellissima npm package
-            env:
-              PACKAGE_VERSION: $(build.NBGV_NpmPackageVersion)
+            displayName: Run npm pack
             workingDirectory: src/Umbraco.Web.UI.Client
           - task: PublishPipelineArtifact@1
             displayName: Publish Bellissima npm artifact
@@ -208,28 +203,11 @@ stages:
         pool:
           vmImage: 'ubuntu-latest'
         variables:
-          npm_config_cache: $(Pipeline.Workspace)/.npm_client
-          NODE_OPTIONS: --max_old_space_size=16384
           BASE_PATH: /v$(umbracoMajorVersion)/ui
         steps:
           - checkout: self
             submodules: true
-          - task: NodeTool@0
-            displayName: Use Node.js $(nodeVersion)
-            retryCountOnTaskFailure: 3
-            inputs:
-              versionSpec: $(nodeVersion)
-          - task: Cache@2
-            displayName: Cache node_modules
-            inputs:
-              key: '"npm_client" | "$(Agent.OS)"| $(Build.SourcesDirectory)/src/Umbraco.Web.UI.Client/package-lock.json'
-              restoreKeys: |
-                "npm_client" | "$(Agent.OS)"
-                "npm_client"
-              path: $(npm_config_cache)
-          - script: npm ci --no-fund --no-audit --prefer-offline
-            workingDirectory:  src/Umbraco.Web.UI.Client
-            displayName: Run npm ci
+          - template: templates/backoffice-install.yml
           - script: npm run storybook:build
             displayName: Build Storybook
             env:

build/templates/backoffice-install.yml

@@ -0,0 +1,31 @@
+steps:
+  - task: NodeTool@0
+    displayName: Use Node.js
+    retryCountOnTaskFailure: 3
+    inputs:
+      versionSource: 'fromFile'
+      versionFilePath: src/Umbraco.Web.UI.Client/.nvmrc
+
+  - bash: |
+      echo "##[command]Install nbgv"
+      dotnet tool install --tool-path . nbgv
+      echo "##[command]Running nbgv get-version"
+      PACKAGE_VERSION=$(nbgv get-version -v NpmPackageVersion)
+      echo "##[command]Running npm version"
+      echo "##[debug]Version: $PACKAGE_VERSION"
+      cd src/Umbraco.Web.UI.Client
+      npm version $PACKAGE_VERSION --allow-same-version --no-git-tag-version
+    displayName: Set NPM Version
+
+  - task: Cache@2
+    displayName: Cache node_modules
+    inputs:
+      key: '"npm_client" | "$(Agent.OS)"| $(Build.SourcesDirectory)/src/Umbraco.Web.UI.Client/package-lock.json'
+      restoreKeys: |
+        "npm_client" | "$(Agent.OS)"
+        "npm_client"
+      path: $(npm_config_cache)
+
+  - script: npm ci --no-fund --no-audit --prefer-offline
+    displayName: Run npm ci (Bellissima)
+    workingDirectory: src/Umbraco.Web.UI.Client

umbraco.sln

@@ -140,6 +140,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "build", "build", "{20CE9C97
 	ProjectSection(SolutionItems) = preProject
 		build\azure-pipelines.yml = build\azure-pipelines.yml
 		build\nightly-build-trigger.yml = build\nightly-build-trigger.yml
+		build\templates\backoffice-install.yml = build\templates\backoffice-install.yml
 	EndProjectSection
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "csharp-docs", "csharp-docs", "{F2BF84D9-0A14-40AF-A0F3-B9BBBBC16A44}"