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:
npm install
npm run build:ssr
. This produces the dist folder. 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:
npm install
npm run build:ssr
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:
But not I am getting: "The page cannot be displayed because an internal server error has occurred."
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:
install @angular/cli -g
(name it "npm install angular cli")npm run build:ssr
(name it "build the project")$(Build.SourcesDirectory)/dist
, the Contents to **
and the Target folder to $(Build.ArtifactStagingDirectory)/app/dist
(name it something like "Copy dist files to staging"$(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")$(Build.ArtifactStagingDirectory)/app/dist
and the Contents to server.js
(name this something like "Delete the dist/server.js"$(Build.ArtifactStagingDirectory)/app
-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 :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With