Created Azure DevOps build pipeline & updated npm packages to fresh versions (#374)

* Initial draft of the build pipeline

* Fix paths in the build pipeline

* Trigger the build pipeline for the current feature branch

* Trying to figure out how to do npm authentication in the pipeline

* Skip the 'npm authenticate' step for now

* Fix paths in the build pipeline's steps

* Update build-pipeline.yml for Azure Pipelines

* Increase the verbosity of npm because of the strange error we are getting

* Remove silly verbosity of the npm install command - troubleshooting done

* Add path mapping for the trial and licensed igniteui-dockmanager

* Build pipeline: Fix path to output dir

* Ran 'npm audit fix' and got the following updates:
Json5
2.2.1 -> 2.2.3
1.0.1 -> 1.0.2
ua-parser-js
0.7.32 -> 0.7.33

* Experiment: add 'npm audit fix'

To both resolve some vulnerabilities & to see how this operation will behave as a part of an automated pipeline

* Make the call to npm audit fix just as advisory - do not apply it

* Remove invocation of 'npm audit fix'

* Fresh update to the npm packages in the package-lock.json - for the sake of using newer and more awesome & secure versions of them

* Updated version of the Samples Browser and bumped versions of the following dependencies:
@types/eslint 8.21.0 -> 8.21.1
@types/trusted-types 2.0.2 -> 2.0.3
caniuse-lite 1.0.30001451 -> 1.0.30001452
core-js 3.27.2 -> 3.28.0
core-js-compat 3.27.2 -> 3.28.0
electron-to-chromium 1.4.295 -> 1.4.296
eslint 8.21.0 -> 8.21.1

* Fix name of the Samples Browser artifact

* Adapt to latest changes in the vnext branch

* Copy web.config into the dist dir

* using CDN assets

---------

Co-authored-by: HUSSAR-mtrela <[email protected]>

Author: turbobobbytraykov

azure-pipelines/build-pipeline.yml

@@ -0,0 +1,112 @@
+trigger:
+  branches:
+    include:
+    - vnext
+    - master
+    - btraykov/azure-pipeline
+
+pr:
+  branches:
+    exclude:
+    - '*'  # must quote since "*" is a YAML reserved character; we want a string
+
+parameters:
+- name: isVerbose
+  displayName: 'Get verbose output from steps - where configurable'
+  type: boolean
+  default: false
+
+name: $(BuildDefinitionName)_$(Year:yyyy).$(Month).$(DayOfMonth)$(Rev:.r)
+
+stages:
+- stage: Build
+  pool:
+    name: BuildAgentOnPrem
+    demands: npm
+  jobs:
+  - job: BuildSamples
+    steps:
+      - checkout: 'self' 
+        path: $(Build.Repository.Name)
+
+      - task: NodeTool@0
+        displayName: 'Install Node'
+        inputs:
+          versionSource: 'spec'
+          versionSpec: '16.x'
+
+      - task: Npm@1
+        displayName: 'Register licensed npm registry in .npmrc'
+        inputs:
+          command: 'custom'
+          workingDir: '$(Build.SourcesDirectory)'
+          customCommand: 'config -L project set @infragistics:registry=https://packages.infragistics.com/npm/js-licensed/'
+          customEndpoint: 'public proget'
+
+      - task: Npm@1
+        displayName: 'npm ci'
+        inputs:
+          command: custom
+          workingDir: '$(Build.SourcesDirectory)'
+          verbose: ${{ parameters.isVerbose }}
+          customCommand: ci
+      
+      - task: PowerShell@2
+        displayName: 'Uninstall all IG trial packages & re-install their licensed variations'
+        inputs:
+          failOnStderr: true
+          showWarnings: true
+          workingDirectory: '$(Build.SourcesDirectory)'
+          targetType: 'inline'
+          script: |
+            Get-Content -Path .\.npmrc
+
+            $packageJson = Get-Content -Raw .\package.json | ConvertFrom-Json
+            $npmUninstallPackages = "npm uninstall --save "
+            $npmInstallPackages = "npm install "
+
+            $packageJson.dependencies.PSObject.Properties | `
+                Where-Object {
+                    $_.Name.StartsWith("igniteui-webcomponents-") -or $_.Name.StartsWith("igniteui-dockmanager") `
+                } | `
+                ForEach-Object { `
+                    $npmUninstallPackages += $_.Name + " "
+                    $npmInstallPackages += "@infragistics/" + $_.Name + "@" + $_.Value + " "
+                }
+
+            Write-Host $npmUninstallPackages
+            Write-Host $npmInstallPackages
+
+            Invoke-Expression -Command “$npmUninstallPackages”
+            Invoke-Expression -Command “$npmInstallPackages”
+
+      - task: Npm@1
+        displayName: 'npm run build'
+        inputs:
+          command: custom
+          workingDir: '$(Build.SourcesDirectory)'
+          verbose: ${{ parameters.isVerbose }}
+          customCommand: 'run build'
+
+      - task: CopyFiles@2
+        displayName: 'Copy web.config into the dist dir'
+        inputs:
+          SourceFolder: '$(Build.SourcesDirectory)/browser'
+          Contents: 'web.config'
+          TargetFolder: '$(Build.SourcesDirectory)/browser/dist'
+
+      - task: ArchiveFiles@2
+        displayName: 'Package samples browser'
+        inputs:
+          verbose: ${{ parameters.isVerbose }}
+          rootFolderOrFile: '$(Build.SourcesDirectory)/browser/dist'
+          includeRootFolder: false
+          archiveType: 'zip'
+          archiveFile: '$(Build.ArtifactStagingDirectory)/WebComponentsSamples.zip'
+          replaceExistingArchive: true
+
+      - task: PublishPipelineArtifact@1
+        displayName: 'Publish pipeline artifact'
+        inputs:
+          targetPath: '$(Build.ArtifactStagingDirectory)/WebComponentsSamples.zip'
+          artifact: 'WebComponentsSamplesBrowser'

browser/public/index.html

@@ -26,7 +26,7 @@
     <div class="nav-content"  >
 
         <!-- <div class="nav-logo">
-          <img src="/assets/icons/favicon.png" width="20px" height="20px">
+          <img src="https://static.infragistics.com/xplatform/images/browsers/wc.png" width="20px" height="20px">
           <div >SAMPLES BROWSER</div>
         </div> -->