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 and pointed my browser to http://localhost:4000 which works.

Now I want to deploy. I have run npm run build:ssr which has created a dist folder. The dist folder doesn't have the "normal" angular files in it. It is relatively sparse, it has:

• a server.js
• a browser folder
• and a server folder

If I ftp these to my azure site (as I used to do with the normal angular application), it doesn't work. I get a error:

You do not have permission to view this directory or page.

So I tried to set up CI using VSTS and I followed some steps I found for publishing angular universal (although they were not very clear). This is my yaml file:

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'
  inputs:
    verbose: false

- task: Npm@1
  displayName: 'npm run'
  inputs:
    command: custom
    verbose: false
    customCommand: 'run build:ssr'

- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)/app/dist'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)/dist'
    TargetFolder: '$(Build.ArtifactStagingDirectory)/app/dist'

- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)/app/dist'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)'
    Contents: server.js
    TargetFolder: '$(Build.ArtifactStagingDirectory)/app/dist'

- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)/app/dist'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)'
    Contents: prerender.js
    TargetFolder: '$(Build.ArtifactStagingDirectory)/app/dist'

- task: AzureRmWebAppDeployment@3
  displayName: 'Azure App Service Deploy'
  inputs:
    azureSubscription: '<my subscription>'
    WebAppName: firstApplication
    DeployToSlotFlag: true
    ResourceGroupName: Temp
    SlotName: develop
    Package: '$(Build.ArtifactStagingDirectory)/app'
    ConfigurationSettings: '-Handler iisnode -NodeStartFile server.js -appType node'

I don't think it is right. Could someone please help me with this?

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 :)