4

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?

r3plica
  • 13,017
  • 23
  • 128
  • 290

2 Answers2

2

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

Supun De Silva
  • 1,437
  • 9
  • 15
0

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'
Steve Coleman
  • 1,987
  • 2
  • 17
  • 28
  • 1
    That looks wrong to me mate, your `ng build --prod` is only building the client application (not angular universal). If you do a view source on your application, I am willing to bet you see an empty body (with your scripts, but no html). – r3plica Dec 05 '18 at 12:39