ASP.NET Core + Angular deploy Artifact with Azure DevOps release pipeline

Question

I created a asp.net core project with Angular. So it's 1 monolotic application instead of two applications.

My problem is as follows:

Which package/folder should I select to deploy? the Dist folder or the zip file? Or the folder named "artifactnametest"?

How about the issue? Does the answer below resolved your question, If not, would you please let me know the latest information about this issue? — Leo Liu
– Leo Liu, Commented Jul 24, 2020 at 2:00
It didnt fix it because there is another problem. But I made a different issue for that. I will close this one. — M Yil
– M Yil, Commented Jul 24, 2020 at 6:57

sommmen · Accepted Answer · 2020-07-17 07:43:56Z

1

You should publish your asp net core app instead.

Here's a sample build filefrom one of our projects. This is for asp.net core only. For angular apps we do some extra stuff like run npm install in a different task, but the principle is the same.

# ASP.NET Core (.NET Framework)
# Build and test ASP.NET Core projects targeting the full .NET Framework.
# Add steps that publish symbols, save build artifacts, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/dotnet-core

trigger:
- master

pool:
  vmImage: 'windows-latest'

variables:
  solution: '**/*.sln'
  buildPlatform: 'Any CPU'
  buildConfiguration: 'Release'
  runtime: 'win-x64'

steps:
- task: NuGetToolInstaller@1

# Restore all nuget packages and .net core tools
- task: DotNetCoreCLI@2
  inputs:
    command: 'custom'
    projects: '**/*.csproj'
    custom: 'restore'
    arguments: '-r $(runtime)'

# Build projects
- task: DotNetCoreCLI@2
  inputs:
    command: 'build'
    projects: '**/*.csproj'
    arguments: '-c $(BuildConfiguration) --no-restore -r $(runtime)'

# Publish all projects to /staging/ci-build/<ProjectName>/
- task: DotNetCoreCLI@2
  inputs:
    command: 'publish'
    publishWebProjects: false
    projects: |
      **/*Client.csproj
      **/*WorkerService.csproj
      **/*Server.csproj
    arguments: '-c $(BuildConfiguration) -o $(Build.StagingDirectory)/ci-build --no-build --self-contained -r $(runtime)'
    zipAfterPublish: false

# Archive the /staging/ci-build folder to /staging/RemoteData.<BuildNumber>
- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(Build.StagingDirectory)/ci-build'
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/RemoteData.$(Build.BuildNumber).zip'
    replaceExistingArchive: true

# Publish the zipfile as artifact
- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)/RemoteData.$(Build.BuildNumber).zip'
    ArtifactName: 'RemoteData.$(Build.BuildNumber)'
    publishLocation: 'Container'

answered Jul 17, 2020 at 7:43

sommmen

7,8485 gold badges41 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

M Yil Over a year ago

Thanks for your help. But what happens with the dist folder?

sommmen Over a year ago

hmm have you tried locally publishing your app? you can see what the output looks like

M Yil Over a year ago

"This is for asp.net core only. For angular apps we do some extra stuff like run npm install in a different task". But this is a monolotic application. The asp.net core app does things like ng build -- prod etc... so why write more code for that in te yaml file?

sommmen Over a year ago

@MYil only to put them in individual build tasks. That helps with finding out what tasks take a long time. For example npm update took a long time so we applied caching at some point; learn.microsoft.com/en-us/azure/devops/pipelines/release/… Other than that publishing will indeed take care of everything.

M Yil Over a year ago

Can I ask you one more question? Why publish multiple of those projects? In my buildpipeline I publish like this: - task: DotNetCoreCLI@2 inputs: command: 'publish' publishWebProjects: true arguments: '--configuration $(BuildConfiguration) --output $(Build.ArtifactStagingDirectory)' zipAfterPublish: true

|

Leo Liu · Accepted Answer · 2020-07-20 03:17:10Z

1

Which package/folder should I select to deploy? the Dist folder or the zip file? Or the folder named "artifactnametest"?

I agree with prasun. We could copy the NPM dist folder from working directory to staging directory, then zip the entire staging directory and publish it.

Alternatively, we could add two artifacts in the release pipeline to deploy Dist folder and zip file:

You could check this document Create a build pipeline for Angular and ASP.NET Core apps with Visual Studio Team Services for some details.

answered Jul 20, 2020 at 3:17

Leo Liu

77.8k11 gold badges133 silver badges159 bronze badges

Comments

5 revs, 2 users 98% · Accepted Answer · 2020-07-20 07:05:28Z

0

I have done this implementation using Dotnet Build and NPM build. First do an NPM build and generate a dist folder. Then do a asp.net build. Once build is done copy the files to Build.artifactstagingdirectory. Similarly for NPM dist copy the folder from working directory to staging directory inside folder where you want to keep the same. Then you can zip the entire staging directory and publish the same. Below is the sample code snippet. Instead of MsBuild you can replace it with DotNetCore@2 task

    trigger:
        branches:
          include:
          - master
      
    pool:
      name: Azure Pipelines
      vmImage: 'windows-2019'
      demands:
        - npm
        - msbuild
        - visualstudio
    
    variables: 
      configuration: release
      BuildConfiguration: "Release"
      platform: x64
    
    stages:
    - stage: Build
      jobs:
      - job: Build
        steps:
        - task: NuGetToolInstaller@0
          displayName: 'Use NuGet 4.4.1'
          inputs:
            versionSpec: 4.4.1
        - task: NuGetCommand@2
          displayName: 'NuGet restore'
          inputs:
            restoreSolution: '$(Parameters.solution)'
            vstsFeed: '34356gsgv643a'
        - task: Npm@1
          displayName: 'npm install'
          inputs:
            workingDir: angularfoldername
            verbose: false
        - task: Npm@1
          displayName: 'npm custom'
          inputs:
            command: custom
            workingDir: angularfoldername
            verbose: false
            customCommand: 'run build'
        - task: MSBuild@1
          displayName: 'Build solution dotnet.csproj'
          inputs:
            solution: dotnet.csproj
            msbuildArguments: '/t:build /p:outputpath="$(build.artifactstagingdirectory)" /property:langversion=latest'
        - task: DotNetCoreCLI@2
          displayName: Test
          inputs:
            command: test
            projects: '$(Parameters.TestProjects)'
            arguments: '--configuration $(BuildConfiguration)'
        - task: CopyFiles@2
          displayName: 'Copy Files to: $(build.artifactstagingdirectory)\_PublishedWebsites\dotnet\angularfolder'
          inputs:
            SourceFolder: 'angularfoldername'
            Contents: '**'
            TargetFolder: '$(build.artifactstagingdirectory)\_PublishedWebsites\dotnet\angularfoldername'
           - task: PublishBuildArtifacts@1
          displayName: 'Publish Artifact: drop'
          inputs:
            PathtoPublish: '$(Build.ArtifactStagingDirectory)\_PublishedWebsites'

edited Jul 20, 2020 at 7:05

community wiki

5 revs, 2 users 98%
prasun

2 Comments

M Yil Over a year ago

What happens when I zip the dist folder and the asp.net core folder? I deploy it, and then? How will Azure Web Service know what to do with both of them?

Prasun Over a year ago

if I understood correctly, you are trying to zip both folders independently. Yes, this is possible however in this case deployment will happen separately. example: You deploying backend(Dotnetcore). Now during frontend deployment, you will define the virtual directory path and azure DevOps will deploy the folder(dist). It will unzip itself during deployment However, if we Deploy it together then there is no need to zip dist separately

Collectives™ on Stack Overflow

ASP.NET Core + Angular deploy Artifact with Azure DevOps release pipeline

3 Answers 3

7 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related