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