Deploying Angular Universal to Azure

Question

I have an application which I have managed to convert to Angular Universal (at my clients request). I ran my application by using the command npm run serve:ssr

Answer 1

I answered this on another post, but I will put it here too:

After spending many hours on this, I am going to expand on Starians answer. Although it did eventually help me get azure working, there were bits of information missing or incorrect. So, I am going to try to do a step by step walk though.

The first thing to note, is that I do not change any file to get this to work. If you change webpack.server.config.js then when you do a local build:ssr it will create server.js in your root application folder, which is undesirable.

So, if you are using the azure visual designer, you can follow these steps:

• First, connect to your repository and setup the branch you wish to use
• Add the Node Tool Installer task and set it to use the current version of node
• Add an npm task and set the Command to custom; Set the Command and arguments to install @angular/cli -g (name it "npm install angular cli")
• Add another npm task but keep it on install (name it something like "npm install packages")
• Add a Command Line task and set the script to npm run build:ssr (name it "build the project")
• Add a Copy files task, set the Source folder to $(Build.SourcesDirectory)/dist, the Contents to ** and the Target folder to $(Build.ArtifactStagingDirectory)/app/dist (name it something like "Copy dist files to staging"
• Add another Copy files task, set the Source folder to $(Build.ArtifactStagingDirectory)/app/dist, the Contents to server.js and the Target folder to $(Build.ArtifactStagingDirectory)/app (name this something like "Copy server.js to the root")
• Then add a Delete Files task, set the Source folder to $(Build.ArtifactStagingDirectory)/app/dist and the Contents to server.js (name this something like "Delete the dist/server.js"
• Finally, add an Azure App Service Deploy task, set the Package or folder to $(Build.ArtifactStagingDirectory)/app
  • Find the File Transforms & Variable Substituion Options, make sure Generate Web.config is selected and add these Web.config parameters: -Handler iisnode -NodeStartFile server.js -appType node

If you follow that guide properly, you should end up with a folder structure similar to:

web.config

server.js

dist

and the dist folder should contain two more folders (browser and server). If that is the case (and it should be) you will have a working Angular Universal application.

For those that would like it, here is the yml:

queue:
  name: Hosted VS2017
  demands: npm

steps:
- task: NodeTool@0
  displayName: 'Use Node 8.x'
  inputs:
    versionSpec: 8.x


- task: Npm@1
  displayName: 'npm install angular cli'
  inputs:
    command: custom

    verbose: false

    customCommand: 'install @angular/cli -g'


- task: Npm@1
  displayName: 'npm install packages'
  inputs:
    verbose: false


- script: 'npm run build:ssr'
  displayName: 'build the project'

- task: CopyFiles@2
  displayName: 'Copy dist files to staging'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)/dist'

    TargetFolder: '$(Build.ArtifactStagingDirectory)/app/dist'


- task: CopyFiles@2
  displayName: 'Copy server.js to the root'
  inputs:
    SourceFolder: '$(Build.ArtifactStagingDirectory)/app/dist'

    Contents: server.js

    TargetFolder: '$(Build.ArtifactStagingDirectory)/app'


- task: DeleteFiles@1
  displayName: 'Delete the dist/server.js'
  inputs:
    SourceFolder: '$(Build.ArtifactStagingDirectory)/app/dist'

    Contents: server.js


- task: AzureRmWebAppDeployment@3
  displayName: 'Azure App Service Deploy: website'
  inputs:
    azureSubscription: 'Subscription 1'

    WebAppName: website

    DeployToSlotFlag: true

    ResourceGroupName: Temp

    SlotName: master

    Package: '$(Build.ArtifactStagingDirectory)/app'

    GenerateWebConfig: true

    WebConfigParameters: '-Handler iisnode -NodeStartFile server.js -appType node'

    UseWebDeploy: true

    RemoveAdditionalFilesFlag: true

I hope this helps someone else :)

Answer 2

This is mine and it works

pool:
  vmImage: 'Ubuntu 16.04'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '8.x'
  displayName: 'Install Node.js'

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod
  displayName: 'npm install and build'

- task: AzureRmWebAppDeployment@3
  inputs:
    azureSubscription: 'Azure CBW Dev'
    WebAppName: 'WebDev'
    Package: '$(System.DefaultWorkingDirectory)/dist'
    GenerateWebConfig: false
    WebConfigParameters: '-Handler iisnode -NodeStartFile server.js -appType node'

Answer 3

I followed answer by r3plica, and I had to do a slight modification and move the dist/server to the root dir and all went well.

If things do not work, always use node to point at server.js

node <path to server.js>

This tells you the most basic things you have gotten wrong