[js] Create npm packaging pipeline (#10886)

* create npm packaging pipeline

* fix indentations

* Update npm-packaging-pipeline.yml for Azure Pipelines

* Update npm-packaging-pipeline.yml for Azure Pipelines

* Update npm-packaging-pipeline.yml for Azure Pipelines

* react-native-ci as a template

* fix typos

* fix template paths

* add a depencendy

* change a stage name

* set different artifact name for each package

* fix typo

* Update npm-packaging-pipeline.yml for Azure Pipelines

Set a build Id for node npm package as a parameter

* Update npm-packaging-pipeline.yml for Azure Pipelines

Set a build Id for node npm package as a parameter

* Update npm-packaging-pipeline.yml for Azure Pipelines

tools/ci_build/github/azure-pipelines/mac-react-native-ci-pipeline.yml

@@ -10,292 +10,18 @@ parameters:
   default: 'nightly (@dev)'
 
 variables:
-  build_config: Release
-  pool_name: '$(PoolName)'
   ${{ if eq(parameters.NpmPublish, 'nightly (@dev)') }}:
-    npm_packaging_mode: 'dev'
+    NpmPackagingMode: 'dev'
   ${{ if eq(parameters.NpmPublish, 'release candidate (@rc)') }}:
-    npm_packaging_mode: 'rc'
+    NpmPackagingMode: 'rc'
   ${{ if eq(parameters.NpmPublish, 'production (@latest)') }}:
-    npm_packaging_mode: 'release'
+    NpmPackagingMode: 'release'
   ${{ if eq(parameters.NpmPublish, 'custom') }}:
-    npm_packaging_mode: '$(VersionSuffix)'
+    NpmPackagingMode: '$(VersionSuffix)'
 
 jobs:
-- template: templates/android-java-api-aar.yml
+- template: templates/react-native-ci.yml
   parameters:
-    buildConfig: '${{variables.build_config}}'
-    buildSettings: '$(Build.SourcesDirectory)/tools/ci_build/github/js/react_native_e2e_mobile_aar_build_settings.json'
-    includedOpsConfig: '$(Build.SourcesDirectory)/tools/ci_build/github/android/mobile_package.required_operators.config'
-    artifactName: 'onnxruntime-android-mobile-aar'
-    job_name_suffix: 'For_React_Native'
-    pool_name: '${{variables.pool_name}}'
-    packageName: 'onnxruntime-mobile'
-
-- job: ReactNative_CI
-  pool:
-    vmImage: 'macOS-11'
-  variables:
-    runCodesignValidationInjection: false
-  dependsOn:
-  - Android_Java_API_AAR_Packaging_For_React_Native
-  timeoutInMinutes: 120
-  steps:
-  # Onnx has no 3.9 python package available yet, need to use python 3.8 to avoid build onnx package
-  # pythonVersion can be updated in Azure pipeline settings
-  # https://dev.azure.com/onnxruntime/onnxruntime/_build?definitionId=188
-  - task: UsePythonVersion@0
-    displayName: Use Python $(pythonVersion)
-    inputs:
-      versionSpec: $(pythonVersion)
-
-  - task: NodeTool@0
-    inputs:
-      versionSpec: '16.x'
-
-  - script:
-      brew install coreutils ninja npm yarn
-    displayName: Install coreutils, ninja, npm, and yarn
-
-  - script:
-      /bin/bash $(Build.SourcesDirectory)/tools/ci_build/github/android/setup_gradle_wrapper.sh $(pwd)
-    displayName: Setup gradle wrapper to use gradle 6.8.3
-
-  - script: |
-      python3 -m pip install -q flatbuffers
-    workingDirectory: '$(Build.BinariesDirectory)'
-    displayName: Install python modules
-
-  - script: |
-      python3 $(Build.SourcesDirectory)/tools/ci_build/github/apple/build_ios_framework.py \
-        --config ${{variables.build_config}} \
-        --build_dir $(Build.BinariesDirectory)/ios_framework \
-        --include_ops_by_config $(Build.SourcesDirectory)/tools/ci_build/github/android/mobile_package.required_operators.config \
-        $(Build.SourcesDirectory)/tools/ci_build/github/js/react_native_e2e_mobile_ios_framework_build_settings.json
-      cd $(Build.BinariesDirectory)/ios_framework/framework_out
-      zip -r onnxruntime-mobile-c.zip .
-    displayName: Build iOS package
-
-  - task: DownloadPipelineArtifact@2
-    inputs:
-      buildType: 'current'
-      artifactName: 'onnxruntime-android-mobile-aar'
-      targetPath: '$(Build.BinariesDirectory)/android-mobile-aar'
-    displayName: Download Android Aar artifacts
-
-  - task: CopyFiles@2
-    inputs:
-      sourceFolder: $(Build.BinariesDirectory)/android-mobile-aar
-      contents: onnxruntime-mobile-*.aar
-      targetFolder: $(Build.SourcesDirectory)/js/react_native/android/libs
-    displayName: Copy Android package to React Native directory
-
-  - task: CopyFiles@2
-    inputs:
-      sourceFolder: $(Build.BinariesDirectory)/ios_framework/framework_out
-      contents: onnxruntime-mobile-c.zip
-      targetFolder: $(Build.SourcesDirectory)/js/react_native/local_pods
-    displayName: Copy iOS package to React Native directory
-
-  - script: |
-      npm ci
-    workingDirectory: '$(Build.SourcesDirectory)/js'
-    displayName: npm ci js
-
-  - script: |
-      npm ci
-    workingDirectory: '$(Build.SourcesDirectory)/js/common'
-    displayName: npm ci js/common
-
-  - script: |
-      yarn
-    workingDirectory: '$(Build.SourcesDirectory)/js/react_native'
-    displayName: yarn js/react_native
-
-  - script: |
-      python3 tools/python/run_android_emulator.py \
-        --android-sdk-root $(ANDROID_SDK_ROOT) \
-        --create-avd --system-image "system-images;android-30;google_apis;x86_64" \
-        --start --emulator-extra-args="-partition-size 4096" \
-        --emulator-pid-file $(Build.BinariesDirectory)/emulator.pid
-    displayName: Start Android Emulator
-
-  - script: |
-      xcrun simctl create iPhoneRNTest com.apple.CoreSimulator.SimDeviceType.iPhone-13
-    workingDirectory: '$(Build.SourcesDirectory)/js/react_native/e2e/ios'
-    displayName: Start iOS Simulator
-
-  - task: Gradle@3
-    inputs:
-      gradleWrapperFile: '$(Build.SourcesDirectory)/js/react_native/android/gradlew'
-      workingDirectory: '$(Build.SourcesDirectory)/js/react_native/android'
-      options: '--stacktrace'
-      tasks: 'connectedDebugAndroidTest'
-      publishJUnitResults: true
-      testResultsFiles: '**/TEST-*.xml'
-      testRunTitle: 'React Native Android Instrumented Test results'
-      javaHomeOption: 'JDKVersion'
-      sonarQubeRunAnalysis: false
-      spotBugsAnalysis: false
-    displayName: Run React Native Android Instrumented Tests
-    continueOnError: false
-
-  - script: |
-      pod install
-    workingDirectory: '$(Build.SourcesDirectory)/js/react_native/ios'
-    displayName: Pod install for onnxruntime react native ios bridge library
-
-  - task: Xcode@5
-    inputs:
-      actions: 'test'
-      configuration: 'Debug'
-      sdk: 'iphonesimulator'
-      xcWorkspacePath: '$(Build.SourcesDirectory)/js/react_native/ios/OnnxruntimeModule.xcworkspace'
-      scheme: 'OnnxruntimeModuleTest'
-      packageApp: false
-      destinationPlatformOption: 'iOS'
-      destinationSimulators: 'iPhone 13,OS=latest'
-      workingDirectory: '$(Build.SourcesDirectory)/js/react_native/ios'
-      xcprettyArgs: '--output build/reports/test-results.xml'
-      publishJUnitResults: true
-      testRunTitle: 'React Native iOS Instrumented Test Results'
-    displayName: Run React Native iOS Instrumented Tests
-
-  - task: PublishTestResults@2
-    inputs:
-      testResultsFiles: '$(Build.SourcesDirectory)/js/react_native/ios/build/reports/test-results.xml'
-      failTaskOnFailedTests: true
-      testRunTitle: 'React Native iOS Instrumented Test results'
-    condition: succeededOrFailed()
-    displayName: Publish React Native iOS Instrumented Test Results
-
-  - script: |
-      yarn prepack-e2e
-    workingDirectory: '$(Build.SourcesDirectory)/js/react_native'
-    displayName: Prepare Android and iOS e2e tests
-
-  - task: PowerShell@2
-    inputs:
-      filePath: '$(Build.SourcesDirectory)/tools/ci_build/github/js/pack-npm-packages.ps1'
-      arguments: '"-dev.$(Get-Date -Format yyyyMMdd)-$(git rev-parse --short HEAD)" $(Build.SourcesDirectory) react_native'
-      workingDirectory: '$(Build.SourcesDirectory)'
-      errorActionPreference: stop
-    displayName: Pack NPM packages
-
-  - script: |
-      mv $(Build.SourcesDirectory)/js/common/onnxruntime-common*.tgz onnxruntime-common.tgz
-      yarn add --no-lockfile file:./onnxruntime-common.tgz
-      mv $(Build.SourcesDirectory)/js/react_native/onnxruntime-react-native*.tgz onnxruntime-react-native.tgz
-      yarn add --no-lockfile file:./onnxruntime-react-native.tgz
-      yarn
-    workingDirectory: '$(Build.SourcesDirectory)/js/react_native/e2e'
-    displayName: Bootstrap Android and iOS e2e tests
-
-  - script: |
-      pod install
-    workingDirectory: '$(Build.SourcesDirectory)/js/react_native/e2e/ios'
-    displayName: Pod install for onnxruntime react native ios e2e tests
-
-  - script: |
-      keytool -genkey -v -keystore debug.keystore -alias androiddebugkey -storepass android \
-        -keypass android -keyalg RSA -keysize 2048 -validity 999999 -dname "CN=Android Debug,O=Android,C=US"
-    workingDirectory: '$(Build.SourcesDirectory)/js/react_native/e2e/android'
-    displayName: Generate a debug keystore
-
-  - task: CopyFiles@2
-    inputs:
-      sourceFolder: $(Build.BinariesDirectory)/android-mobile-aar
-      contents: onnxruntime-mobile-*.aar
-      targetFolder: $(Build.SourcesDirectory)/js/react_native/e2e/node_modules/onnxruntime-react-native/android/libs
-    displayName: Copy Android package to React Native e2e directory
-
-  - task: Gradle@3
-    inputs:
-      gradleWrapperFile: '$(Build.SourcesDirectory)/js/react_native/e2e/android/gradlew'
-      workingDirectory: '$(Build.SourcesDirectory)/js/react_native/e2e/android'
-      options: '--stacktrace'
-      tasks: ':app:connectedDebugAndroidTest'
-      publishJUnitResults: true
-      testResultsFiles: '**/TEST-*.xml'
-      testRunTitle: 'React Native Android e2e Test results'
-      javaHomeOption: 'JDKVersion'
-      sonarQubeRunAnalysis: false
-      spotBugsAnalysis: false
-    displayName: Run React Native Android e2e Tests
-    continueOnError: false
-
-  - script: |
-      export FORCE_BUNDLING=1
-      export RCT_NO_LAUNCH_PACKAGER=1
-      export ENTRY_FILE=index.tsx
-      xcrun xcodebuild test -workspace $(Build.SourcesDirectory)/js/react_native/e2e/ios/OnnxruntimeModuleExample.xcworkspace \
-        -scheme OnnxruntimeModuleExample -destination 'platform=iOS Simulator,OS=latest,name=iPhoneRNTest' \
-        -derivedDataPath $(Build.BinariesDirectory)/react_native/ios_e2e_test/derived_data | xcpretty -r junit --no-color \
-        --output $(Build.SourcesDirectory)/js/react_native/e2e/ios/build/reports/test-results.xml
-    workingDirectory: '$(Build.SourcesDirectory)/js/react_native/e2e'
-    displayName: Run React Native iOS e2e tests
-
-  - task: PublishTestResults@2
-    inputs:
-      testResultsFiles: '$(Build.SourcesDirectory)/js/react_native/e2e/ios/build/reports/test-results.xml'
-      failTaskOnFailedTests: true
-      testRunTitle: 'React Native iOS e2e Test results'
-    condition: succeededOrFailed()
-    displayName: Publish React Native iOS e2e Test Results
-
-  - script: |
-      python3 tools/python/run_android_emulator.py \
-        --android-sdk-root $(ANDROID_SDK_ROOT) \
-        --stop \
-        --emulator-pid-file $(Build.BinariesDirectory)/emulator.pid
-    displayName: Stop Android Emulator
-    condition: always()
-
-  - script: |
-      xcrun simctl delete iPhoneRNTest
-    workingDirectory: '$(Build.SourcesDirectory)/js/react_native/e2e/ios'
-    displayName: Stop iOS Simulator
-    condition: always()
-
-  - script: |
-      git restore .
-      cd react_native
-      yarn prepack-rel
-    workingDirectory: '$(Build.SourcesDirectory)/js'
-    displayName: Restore git changes and prepack for npm publish
-
-  - task: PowerShell@2
-    inputs:
-      filePath: '$(Build.SourcesDirectory)/tools/ci_build/github/js/pack-npm-packages.ps1'
-      arguments: '"${{variables.npm_packaging_mode}}" $(Build.SourcesDirectory) react_native'
-      workingDirectory: '$(Build.SourcesDirectory)'
-      errorActionPreference: stop
-    displayName: Pack NPM packages
-
-  - task: CopyFiles@2
-    inputs:
-      sourceFolder: $(Build.SourcesDirectory)/js/common
-      contents: onnxruntime-common*.tgz
-      targetFolder: $(Build.ArtifactStagingDirectory)
-    displayName: 'Create Artifacts onnxruntime-common'
-
-  - task: CopyFiles@2
-    inputs:
-      sourceFolder: $(Build.SourcesDirectory)/js/react_native
-      contents: onnxruntime-react-native*.tgz
-      targetFolder: $(Build.ArtifactStagingDirectory)
-    displayName: Create Artifacts onnxruntime-react-native
-
-  - task: PublishPipelineArtifact@0
-    inputs:
-      artifactName: 'NPM_packages'
-      targetPath: '$(Build.ArtifactStagingDirectory)'
-    displayName: Publish Pipeline Artifact
-
-  - template: templates/component-governance-component-detection-steps.yml
-    parameters :
-      condition : 'succeeded'
-
-  - task: mspremier.PostBuildCleanup.PostBuildCleanup-task.PostBuildCleanup@3
-    displayName: Clean Agent Directories
-    condition: always()
+    NpmPackagingMode: ${{ variables.NpmPackagingMode }}
+    BuildConfig: 'Release'
+    PoolName: 'Linux-CPU-2019'

tools/ci_build/github/azure-pipelines/npm-packaging-pipeline.yml

@@ -0,0 +1,98 @@
+parameters:
+- name: NpmPublish
+  displayName: 'NPM packages publish configuration'
+  type: string
+  values:
+  - 'nightly (@dev)'
+  - 'release candidate (@rc)'
+  - 'production (@latest)'
+  - 'custom'
+  default: 'nightly (@dev)'
+
+- name: NodePipelineId
+  displayName: 'Node npm package build Id'
+  type: string
+  default: 'latest'
+
+variables:
+  # pipeline should define the following varaibles
+  #   ExtraBuildArgs
+  #   VersionSuffix
+
+  ${{ if eq(parameters.NpmPublish, 'nightly (@dev)') }}:
+    NpmPackagingMode: 'dev'
+  ${{ if eq(parameters.NpmPublish, 'release candidate (@rc)') }}:
+    NpmPackagingMode: 'rc'
+  ${{ if eq(parameters.NpmPublish, 'production (@latest)') }}:
+    NpmPackagingMode: 'release'
+  ${{ if eq(parameters.NpmPublish, 'custom') }}:
+    NpmPackagingMode: '$(VersionSuffix)'
+
+stages:
+- template: templates/web-ci.yml
+  parameters:
+    NpmPackagingMode: ${{ variables.NpmPackagingMode }}
+    IsReleasePipeline: true
+    PoolName: 'Win-CPU-2021'
+    PackageName: 'onnxruntime-web'
+
+- stage: Build_React_Native
+  dependsOn: Extract_commit
+  jobs:
+  - template: templates/react-native-ci.yml
+    parameters:
+      NpmPackagingMode: ${{ variables.NpmPackagingMode }}
+      BuildConfig: 'Release'
+      PoolName: 'Linux-CPU'
+      PackageName: 'onnxruntime-react-native'
+
+- stage: Download_Node_Package
+  dependsOn:
+  - Build_React_Native
+  - Build_web_Release
+  - Build_web_Debug
+  jobs:
+  - job: Download_Node_Package
+    pool: 'Win-CPU-2021'
+    variables:
+      runCodesignValidationInjection: false
+    timeoutInMinutes: 10
+    steps:
+
+    - ${{ if eq(parameters.NodePipelineId, 'latest') }}:
+      - task: DownloadPipelineArtifact@2
+        inputs:
+          buildType: 'specific'
+          project: '530acbc4-21bc-487d-8cd8-348ff451d2ff'
+          definition: '940'
+          specificBuildWithTriggering: true
+          buildVersionToDownload: 'latest'
+          artifactName: 'NPM_packages'
+          targetPath: '$(Pipeline.Workspace)'
+        displayName: 'Download onnxruntime-node Pipeline Artifact'
+      
+    - ${{ if ne(parameters.NodePipelineId, 'latest') }}:
+      - task: DownloadPipelineArtifact@2
+        inputs:
+          buildType: 'specific'
+          project: '530acbc4-21bc-487d-8cd8-348ff451d2ff'
+          definition: '940'
+          buildVersionToDownload: 'specific'
+          pipelineId: '${{ parameters.NodePipelineId }}'
+          artifactName: 'NPM_packages'
+          targetPath: '$(Pipeline.Workspace)'
+        displayName: 'Download onnxruntime-node Pipeline Artifact'
+    
+    - task: CopyFiles@2
+      inputs:
+        sourceFolder: $(Pipeline.Workspace)
+        contents: onnxruntime-*.tgz
+        targetFolder: $(Build.ArtifactStagingDirectory)
+      displayName: 'Copy onnxruntime-node Artifacts'
+    
+    - task: PublishPipelineArtifact@0
+      inputs:
+        artifactName: 'onnxruntime-node'
+        targetPath: '$(Build.ArtifactStagingDirectory)'
+      displayName: 'Publish onnxruntime-node Pipeline Artifact'
+      

tools/ci_build/github/azure-pipelines/templates/react-native-ci.yml

@@ -0,0 +1,300 @@
+parameters:
+- name: NpmPackagingMode
+  displayName: 'NPM packages publish configuration'
+  type: string
+  default: 'dev'
+- name: BuildConfig
+  displayName: 'Build config'
+  type: string
+  values:
+  - 'Release'
+  - 'MinSizeRel'
+  - 'Debug'
+  - 'RelWithDebugInfo'
+  default: 'Release'
+- name: PoolName
+  displayName: 'Pool name'
+  type: string
+- name: PackageName
+  displayName: 'Package name'
+  type: string
+  default: 'NPM_packages'
+
+jobs:
+- template: android-java-api-aar.yml
+  parameters:
+    buildConfig: '${{parameters.BuildConfig}}'
+    buildSettings: '$(Build.SourcesDirectory)/tools/ci_build/github/js/react_native_e2e_mobile_aar_build_settings.json'
+    includedOpsConfig: '$(Build.SourcesDirectory)/tools/ci_build/github/android/mobile_package.required_operators.config'
+    artifactName: 'onnxruntime-android-mobile-aar'
+    job_name_suffix: 'For_React_Native'
+    pool_name: '${{parameters.PoolName}}'
+    packageName: 'onnxruntime-mobile'
+
+- job: ReactNative_CI
+  pool:
+    vmImage: 'macOS-11'
+  variables:
+    runCodesignValidationInjection: false
+  dependsOn:
+  - Android_Java_API_AAR_Packaging_For_React_Native
+  timeoutInMinutes: 120
+  steps:
+  # Onnx has no 3.9 python package available yet, need to use python 3.8 to avoid build onnx package
+  # pythonVersion can be updated in Azure pipeline settings
+  # https://dev.azure.com/onnxruntime/onnxruntime/_build?definitionId=188
+  - task: UsePythonVersion@0
+    displayName: Use Python $(pythonVersion)
+    inputs:
+      versionSpec: $(pythonVersion)
+
+  - task: NodeTool@0
+    inputs:
+      versionSpec: '16.x'
+
+  - script:
+      brew install coreutils ninja npm yarn
+    displayName: Install coreutils, ninja, npm, and yarn
+
+  - script:
+      /bin/bash $(Build.SourcesDirectory)/tools/ci_build/github/android/setup_gradle_wrapper.sh $(pwd)
+    displayName: Setup gradle wrapper to use gradle 6.8.3
+
+  - script: |
+      python3 -m pip install -q flatbuffers
+    workingDirectory: '$(Build.BinariesDirectory)'
+    displayName: Install python modules
+
+  - script: |
+      python3 $(Build.SourcesDirectory)/tools/ci_build/github/apple/build_ios_framework.py \
+        --config ${{parameters.BuildConfig}} \
+        --build_dir $(Build.BinariesDirectory)/ios_framework \
+        --include_ops_by_config $(Build.SourcesDirectory)/tools/ci_build/github/android/mobile_package.required_operators.config \
+        $(Build.SourcesDirectory)/tools/ci_build/github/js/react_native_e2e_mobile_ios_framework_build_settings.json
+      cd $(Build.BinariesDirectory)/ios_framework/framework_out
+      zip -r onnxruntime-mobile-c.zip .
+    displayName: Build iOS package
+
+  - task: DownloadPipelineArtifact@2
+    inputs:
+      buildType: 'current'
+      artifactName: 'onnxruntime-android-mobile-aar'
+      targetPath: '$(Build.BinariesDirectory)/android-mobile-aar'
+    displayName: Download Android Aar artifacts
+
+  - task: CopyFiles@2
+    inputs:
+      sourceFolder: $(Build.BinariesDirectory)/android-mobile-aar
+      contents: onnxruntime-mobile-*.aar
+      targetFolder: $(Build.SourcesDirectory)/js/react_native/android/libs
+    displayName: Copy Android package to React Native directory
+
+  - task: CopyFiles@2
+    inputs:
+      sourceFolder: $(Build.BinariesDirectory)/ios_framework/framework_out
+      contents: onnxruntime-mobile-c.zip
+      targetFolder: $(Build.SourcesDirectory)/js/react_native/local_pods
+    displayName: Copy iOS package to React Native directory
+
+  - script: |
+      npm ci
+    workingDirectory: '$(Build.SourcesDirectory)/js'
+    displayName: npm ci js
+
+  - script: |
+      npm ci
+    workingDirectory: '$(Build.SourcesDirectory)/js/common'
+    displayName: npm ci js/common
+
+  - script: |
+      yarn
+    workingDirectory: '$(Build.SourcesDirectory)/js/react_native'
+    displayName: yarn js/react_native
+
+  - script: |
+      python3 tools/python/run_android_emulator.py \
+        --android-sdk-root $(ANDROID_SDK_ROOT) \
+        --create-avd --system-image "system-images;android-30;google_apis;x86_64" \
+        --start --emulator-extra-args="-partition-size 4096" \
+        --emulator-pid-file $(Build.BinariesDirectory)/emulator.pid
+    displayName: Start Android Emulator
+
+  - script: |
+      xcrun simctl create iPhoneRNTest com.apple.CoreSimulator.SimDeviceType.iPhone-13
+    workingDirectory: '$(Build.SourcesDirectory)/js/react_native/e2e/ios'
+    displayName: Start iOS Simulator
+
+  - task: Gradle@3
+    inputs:
+      gradleWrapperFile: '$(Build.SourcesDirectory)/js/react_native/android/gradlew'
+      workingDirectory: '$(Build.SourcesDirectory)/js/react_native/android'
+      options: '--stacktrace'
+      tasks: 'connectedDebugAndroidTest'
+      publishJUnitResults: true
+      testResultsFiles: '**/TEST-*.xml'
+      testRunTitle: 'React Native Android Instrumented Test results'
+      javaHomeOption: 'JDKVersion'
+      sonarQubeRunAnalysis: false
+      spotBugsAnalysis: false
+    displayName: Run React Native Android Instrumented Tests
+    continueOnError: false
+
+  - script: |
+      pod install
+    workingDirectory: '$(Build.SourcesDirectory)/js/react_native/ios'
+    displayName: Pod install for onnxruntime react native ios bridge library
+
+  - task: Xcode@5
+    inputs:
+      actions: 'test'
+      configuration: 'Debug'
+      sdk: 'iphonesimulator'
+      xcWorkspacePath: '$(Build.SourcesDirectory)/js/react_native/ios/OnnxruntimeModule.xcworkspace'
+      scheme: 'OnnxruntimeModuleTest'
+      packageApp: false
+      destinationPlatformOption: 'iOS'
+      destinationSimulators: 'iPhone 13,OS=latest'
+      workingDirectory: '$(Build.SourcesDirectory)/js/react_native/ios'
+      xcprettyArgs: '--output build/reports/test-results.xml'
+      publishJUnitResults: true
+      testRunTitle: 'React Native iOS Instrumented Test Results'
+    displayName: Run React Native iOS Instrumented Tests
+
+  - task: PublishTestResults@2
+    inputs:
+      testResultsFiles: '$(Build.SourcesDirectory)/js/react_native/ios/build/reports/test-results.xml'
+      failTaskOnFailedTests: true
+      testRunTitle: 'React Native iOS Instrumented Test results'
+    condition: succeededOrFailed()
+    displayName: Publish React Native iOS Instrumented Test Results
+
+  - script: |
+      yarn prepack-e2e
+    workingDirectory: '$(Build.SourcesDirectory)/js/react_native'
+    displayName: Prepare Android and iOS e2e tests
+
+  - task: PowerShell@2
+    inputs:
+      filePath: '$(Build.SourcesDirectory)/tools/ci_build/github/js/pack-npm-packages.ps1'
+      arguments: '"-dev.$(Get-Date -Format yyyyMMdd)-$(git rev-parse --short HEAD)" $(Build.SourcesDirectory) react_native'
+      workingDirectory: '$(Build.SourcesDirectory)'
+      errorActionPreference: stop
+    displayName: Pack NPM packages
+
+  - script: |
+      mv $(Build.SourcesDirectory)/js/common/onnxruntime-common*.tgz onnxruntime-common.tgz
+      yarn add --no-lockfile file:./onnxruntime-common.tgz
+      mv $(Build.SourcesDirectory)/js/react_native/onnxruntime-react-native*.tgz onnxruntime-react-native.tgz
+      yarn add --no-lockfile file:./onnxruntime-react-native.tgz
+      yarn
+    workingDirectory: '$(Build.SourcesDirectory)/js/react_native/e2e'
+    displayName: Bootstrap Android and iOS e2e tests
+
+  - script: |
+      pod install
+    workingDirectory: '$(Build.SourcesDirectory)/js/react_native/e2e/ios'
+    displayName: Pod install for onnxruntime react native ios e2e tests
+
+  - script: |
+      keytool -genkey -v -keystore debug.keystore -alias androiddebugkey -storepass android \
+        -keypass android -keyalg RSA -keysize 2048 -validity 999999 -dname "CN=Android Debug,O=Android,C=US"
+    workingDirectory: '$(Build.SourcesDirectory)/js/react_native/e2e/android'
+    displayName: Generate a debug keystore
+
+  - task: CopyFiles@2
+    inputs:
+      sourceFolder: $(Build.BinariesDirectory)/android-mobile-aar
+      contents: onnxruntime-mobile-*.aar
+      targetFolder: $(Build.SourcesDirectory)/js/react_native/e2e/node_modules/onnxruntime-react-native/android/libs
+    displayName: Copy Android package to React Native e2e directory
+
+  - task: Gradle@3
+    inputs:
+      gradleWrapperFile: '$(Build.SourcesDirectory)/js/react_native/e2e/android/gradlew'
+      workingDirectory: '$(Build.SourcesDirectory)/js/react_native/e2e/android'
+      options: '--stacktrace'
+      tasks: ':app:connectedDebugAndroidTest'
+      publishJUnitResults: true
+      testResultsFiles: '**/TEST-*.xml'
+      testRunTitle: 'React Native Android e2e Test results'
+      javaHomeOption: 'JDKVersion'
+      sonarQubeRunAnalysis: false
+      spotBugsAnalysis: false
+    displayName: Run React Native Android e2e Tests
+    continueOnError: false
+
+  - script: |
+      export FORCE_BUNDLING=1
+      export RCT_NO_LAUNCH_PACKAGER=1
+      export ENTRY_FILE=index.tsx
+      xcrun xcodebuild test -workspace $(Build.SourcesDirectory)/js/react_native/e2e/ios/OnnxruntimeModuleExample.xcworkspace \
+        -scheme OnnxruntimeModuleExample -destination 'platform=iOS Simulator,OS=latest,name=iPhoneRNTest' \
+        -derivedDataPath $(Build.BinariesDirectory)/react_native/ios_e2e_test/derived_data | xcpretty -r junit --no-color \
+        --output $(Build.SourcesDirectory)/js/react_native/e2e/ios/build/reports/test-results.xml
+    workingDirectory: '$(Build.SourcesDirectory)/js/react_native/e2e'
+    displayName: Run React Native iOS e2e tests
+
+  - task: PublishTestResults@2
+    inputs:
+      testResultsFiles: '$(Build.SourcesDirectory)/js/react_native/e2e/ios/build/reports/test-results.xml'
+      failTaskOnFailedTests: true
+      testRunTitle: 'React Native iOS e2e Test results'
+    condition: succeededOrFailed()
+    displayName: Publish React Native iOS e2e Test Results
+
+  - script: |
+      python3 tools/python/run_android_emulator.py \
+        --android-sdk-root $(ANDROID_SDK_ROOT) \
+        --stop \
+        --emulator-pid-file $(Build.BinariesDirectory)/emulator.pid
+    displayName: Stop Android Emulator
+    condition: always()
+
+  - script: |
+      xcrun simctl delete iPhoneRNTest
+    workingDirectory: '$(Build.SourcesDirectory)/js/react_native/e2e/ios'
+    displayName: Stop iOS Simulator
+    condition: always()
+
+  - script: |
+      git restore .
+      cd react_native
+      yarn prepack-rel
+    workingDirectory: '$(Build.SourcesDirectory)/js'
+    displayName: Restore git changes and prepack for npm publish
+
+  - task: PowerShell@2
+    inputs:
+      filePath: '$(Build.SourcesDirectory)/tools/ci_build/github/js/pack-npm-packages.ps1'
+      arguments: '"${{parameters.NpmPackagingMode}}" $(Build.SourcesDirectory) react_native'
+      workingDirectory: '$(Build.SourcesDirectory)'
+      errorActionPreference: stop
+    displayName: Pack NPM packages
+
+  - task: CopyFiles@2
+    inputs:
+      sourceFolder: $(Build.SourcesDirectory)/js/common
+      contents: onnxruntime-common*.tgz
+      targetFolder: $(Build.ArtifactStagingDirectory)
+    displayName: 'Create Artifacts onnxruntime-common'
+
+  - task: CopyFiles@2
+    inputs:
+      sourceFolder: $(Build.SourcesDirectory)/js/react_native
+      contents: onnxruntime-react-native*.tgz
+      targetFolder: $(Build.ArtifactStagingDirectory)
+    displayName: Create Artifacts onnxruntime-react-native
+
+  - task: PublishPipelineArtifact@0
+    inputs:
+      artifactName: '${{parameters.PackageName}}'
+      targetPath: '$(Build.ArtifactStagingDirectory)'
+    displayName: Publish Pipeline Artifact
+
+  - template: component-governance-component-detection-steps.yml
+    parameters :
+      condition : 'succeeded'
+
+  - task: mspremier.PostBuildCleanup.PostBuildCleanup-task.PostBuildCleanup@3
+    displayName: Clean Agent Directories
+    condition: always()

tools/ci_build/github/azure-pipelines/templates/web-ci.yml

@@ -11,6 +11,10 @@ parameters:
   displayName: 'Agent pool name'
   type: string
   default: 'Win-CPU-2019'
+- name: PackageName
+  displayName: 'Package name'
+  type: string
+  default: 'NPM_packages'
 
 stages:
 - stage: Extract_commit
@@ -54,6 +58,7 @@ stages:
       BuildConfig: 'Debug'
       NpmPackagingMode: ${{ parameters.NpmPackagingMode }}
       PoolName: ${{ parameters.PoolName }}
+      PackageName: ${{ parameters.PackageName }}
 
 - stage: Build_wasm_Release
   dependsOn: Extract_commit
@@ -74,6 +79,7 @@ stages:
       BuildConfig: 'Release'
       NpmPackagingMode: ${{ parameters.NpmPackagingMode }}
       PoolName: ${{ parameters.PoolName }}
+      PackageName: ${{ parameters.PackageName }}
 
 - ${{ if ne(parameters.IsReleasePipeline, 'true') }}:
   - stage: Test_web_BrowserStack

tools/ci_build/github/azure-pipelines/templates/win-web-ci.yml

@@ -15,6 +15,11 @@ parameters:
   type: string
   default: 'Win-CPU-2019'
 
+- name: PackageName
+  displayName: 'Package name'
+  type: string
+  default: 'NPM_packages'
+
 jobs:
 - job: build_onnxruntime_web
   pool: ${{ parameters.PoolName }}
@@ -158,7 +163,7 @@ jobs:
     condition: and(succeeded(), eq('${{ parameters.BuildConfig }}', 'Release'))
   - task: PublishPipelineArtifact@0
     inputs:
-      artifactName: 'NPM_packages'
+      artifactName: '${{ parameters.PackageName }}'
       targetPath: '$(Build.ArtifactStagingDirectory)'
     displayName: 'Publish Pipeline Artifact'
     condition: and(succeeded(), eq('${{ parameters.BuildConfig }}', 'Release'))