Deploy Angular 5 build:ssr on Azure

Question

I've built my project starting form the angular universal template found here: universal-starter

I am trying to deploy the ssr build as azure web app. My code is on VSTS.

On my local machine I can run the following:

1. npm install
2. npm run build:ssr. This produces the dist folder.
3. I can then copy the dist folder somewhere else and run with the command below
4. node server.js

The app starts on port 4000 on local machine.

So following the steps above, I've created a build process on my VSTS with the following tasks:

1. An npm task that runs npm install
2. An npm task that run npm run build:ssr
3. An azure app service deploy task with the following configurations:
   • Package Folder: dist/
   • web.config parameters: -Handler iisnode -NodeStartFile server.js -appType node

Above process runs successfully, but when I navigate to https://my-site-name.azurewebsites.net/ the site cannot be reached.

How can I successfully deploy Angular 5 SSR on Azure?

UPDATE: Since this NodeJS-EmptySiteTemplate runs on azure without error, I've done the following changes as per that project:

1. That server is listening on process.env.PORT | 8080
2. There was a web.config file there that I was missing. I placed the same web-config file in the wwwroot.

But not I am getting: "The page cannot be displayed because an internal server error has occurred."

Answer 1

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

I recommend that you are using current directory as working folder instead of add additional dist folder (const DIST_FOLDER = join(process.cwd(), 'dist');).

You can enable diagnostics logs of that app service and check the detail logs, it still looks for index view in D:\home\site\wwwroot\dist\dist\browser, so it is incorrect and will throw 500 error.

BTW: the port is 80 (process.env.PORT) instead of 4000.

Update:

The server.ts requires module files in dist folder, so just change DIST_FOLDER is not working. The simple way is putting server.js out of dist folder (Do not modify server.ts).

Simple steps:

1. Open webpack.server.config.js
2. Replace path: path.join(__dirname, 'dist') to path:__dirname
3. NPM Install task
4. NPM Custom task (run build:ssr)
5. Copy Files task (Source Folder: $(Build.SourcesDirectory)/dist; Contents: **; Target Folder: $(Build.ArtifactStagingDirectory)/app/dist)
6. Copy Files task (Source Folder: $(Build.SourcesDirectory); Contents: server.js prerender.js (one per a line)
7. Azure App Service Deploy task (Package or folder: $(Build.ArtifactStagingDirectory)/app; Webconfig parameters: -Handler iisnode -NodeStartFile server.js -appType node)