2

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.

Improve this question
2
  • Is it possible for you to provide your code excluding sensitive information? Commented Jul 11, 2023 at 7:46
  • 1
    Hi @PravallikaKV, I'm just download and direct use the Angular sample code to test. Here is the link angular.io/guide/universal . Commented Jul 11, 2023 at 7:55

1 Answer 1

Reset to default
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.

enter image description here

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

enter image description here

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

enter image description here 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.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Hi, thanks for the reply. So that's mean this is the correct way to do the SSR deployment by upload the build files inside the "browser" folder to site/wwwroot ? After I deployed to Azure, it can run by using the domain url, but it show the error when direct navigate to the "www.domain.com/dashboard". It show the error "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.", anything I missing to configure?
Can you check if you have added index.html in Configuration=>Default documents as I shown above.
Yup, I added the index.html in Configuration=>Default documents. Btw, I fixed it by upload the web.config file to the site/wwwroot . I just refer from the Angular official website, Server configuration section Angular Server configuration.
I just aware the SSR deployment is not correct yet. When I view page source at the web page, It showing like this. - !Image 1. By right should be like this (I npm run serve:ssr on my localhost): - !Image 2. I compare local and domain, it showing differently. When run on local, it got use both of the node dist/server/main.js and dist/browser? - !Image 3.
Refer SO regarding the same issue
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.