How to build/deploy/run Angular 12 server side rendering (SSR) Universal Build in Azure.

Question

Hi,

We are using Azure DevOps for angular builds and deploying to Azure App Services.
Please let us help in Building the Angular 12 universal SSR build. We need build steps for our Azure DevOps pipeline.

SSR build step is already added to pipeline with this command run build:ssr , but still server side rendering is not working.

Answer 1

Hey man, try this for your build pipeline
trigger:

• master

pool:
vmImage: ubuntu-latest

steps:

Node.js with Angular

• task: NodeTool@0
  inputs:
  versionSpec: '14.x'
• script: |
  npm install -g @angular/cli
  npm install
  npm run build:ssr
  displayName: 'npm install and build'
• task: CopyFiles@2
  displayName: 'Copy dist browser folder to the root'
  inputs:
  SourceFolder: '$(Build.SourcesDirectory)/dist/{AppName}/browser' TargetFolder: '$(Build.ArtifactStagingDirectory)/dist/{AppName}/browser'
• task: CopyFiles@2
  displayName: 'Copy main.js to the root'
  inputs:
  SourceFolder: '$(System.DefaultWorkingDirectory)/dist/{AppName}/server' Contents: main.js TargetFolder: '$(Build.ArtifactStagingDirectory)'
• task: ArchiveFiles@2
  inputs:
  rootFolderOrFile: '$(Build.ArtifactStagingDirectory)'
  includeRootFolder: false
  archiveType: zip
  archiveFile: $(Build.ArtifactStagingDirectory)/drop.zip
  replaceExistingArchive: true
• task: PublishBuildArtifacts@1
  inputs:
  PathtoPublish: '$(Build.ArtifactStagingDirectory)/drop.zip'
  ArtifactName: 'drop'
  publishLocation: 'Container'