How to build and deploy the Angular Server Side Rendering (SSR) build files to Azure Web App service thought the FileZilla ftp?

Question

I'm working on the Angular SSR, using the Angular official sample project to do the testing.

Steps to build the Angular SSR project.

1. npm run build:ssr
2. it will auto generate the dist folder. Inside contain the browser and server folders.
3. connect Web App Service ftp using the FileZilla.
4. Upload the build files to wwwroot.

I had try different way to do the deployment

• Deploy browser and server folders to Azure wwwroot folder, but it doesn't work correctly, when open the url, it show the "You do not have permission to view this directory or page.".
• Deploy the content inside the browser folder. (It work, but direct url to 'www.something.com/dashboard', it will show the error "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable." AND not sure is this correct way or not)
• Deploy the content inside the server folder. (It show "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.")

My Questions

• What is the correct way to deploy the Angular SSR to Azure Web App service?

Expected someone can listdown all the steps from build and deploy to Azure Web App service. It will be much more appreciated if screenshot or url to refer is provided.

Answer 1

You can deploy Angular:SSR application to Azure App Service through Filezilla ftp:

• You have to deploy your application (content present in dist/browser which contains index.html) to site/wwwroot folder.
• Check if all the files deployed properly and available in site/wwwroot.

• Add default page in Configuration of App service=>Default documents as shown below:

-Enable Application logging in Web app=> App Service Logs so that you can find out the exact error in error logs in LogStream.

There is also another way to deploy Angular Server-Side Rendering application to Azure using Azure Devops:

Push your code to GitHub:

1. Create a repository in GitHub and push your application to it.

• Open command prompt=> Go to root folder of your project and run below commands:

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin <your_repository_url>
git push -u origin main 

Check Sample yaml code to deploy Angular SSR universal application to Azure web app service using Devops pipeline by SiddheshDesai:

trigger:
- main

pool:
vmImage: ubuntu-latest

steps:

- task: NodeTool@0
inputs:
versionSpec: '18.x'
displayName: 'Install Node.js'

- script: |
npm install -g @angular/cli
ng add @nguniversal/express-engine --skip-confirmation

displayName: 'Build Angular Universal app'
- script: |
npm install
npm run build:ssr

workingDirectory: '$(System.DefaultWorkingDirectory)'


- task: CopyFiles@2
displayName: 'Copy files to artifact staging directory'
inputs:
SourceFolder: '$(System.DefaultWorkingDirectory)/dist/browser'
Contents: '**'
TargetFolder: '$(Build.ArtifactStagingDirectory)'


- task: PublishBuildArtifacts@1
displayName: 'Publish artifact'
inputs:
PathtoPublish: '$(build.artifactstagingdirectory)'
ArtifactName: 'drop'
publishLocation: 'Container'


- task: AzureRmWebAppDeployment@4
displayName: 'Deploy to Azure App Service '
inputs:
ConnectionType: 'AzureRM'
azureSubscription: '<your_subscription-id>'
appType: 'Linux'
WebAppName: '<web_appname>'
packageForLinux: '$(Build.ArtifactStagingDirectory)'
RuntimeStack: 'NODE|18-lts'
StartupCommand: 'npm install && npm run build:ssr && npm start'

You can also follow the steps given in Deploy Angular 5 build:ssr on Azure - Stack Overflow by r3plica and starian-chen-msft.