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

Deshmukh, Vijit 491 Reputation points
2022-01-21T11:20:07.767+00:00

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.

Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
6,831 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Mpho Kgomo 1 Reputation point
    2022-04-12T09:37:32.477+00:00

    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'
    0 comments No comments