How can I deploy Angular Universal 10 Prerender to Azure App Service?

Question

I have an Angular Universal 10 prerender out that I can run locally.

I output it by running:

ng run project-name:prerender

I run it locally by using:

http-server dist/project-name/browser

I am able to deploy it by using VS Code to run:

Deploy to Web App

I have been trying but failing to figure out how I can then open my Azure App Service link and run the application on Azure. I have gone through the Docs, and tried many different Web.Config.

I have experienced a bunch of issues such as too many redirects, node already running on the given server, file directories not being correct when in Azure.

Can anyone step by step walk me through how to do this? Or point me to an article/tutorial? It's important that it's Angular Universal Prerender because it's the getting Node and the App Service to all work together to serve and direct to the Angular app.

I can provide examples of code if it helps.

Answer 1

It seems you got client side and server side both in one app service. That's why it said node already running on the given server when you access client side. You'd better deploy one project to one app service.

Put the prerender page inside your client project and deploy to Azure, you would be able to access them.

Here is the steps I did:

1. Follow this tutorial to generate an Angular Universal project. It works and pre-rendered 29pages into dist/prerender folder:
2. Modify the output settings to make the pre-rendered pages stored inside client side:
3. Publish the browser project to Azure app service.
4. Visit the pages like this: (Here I lost my page style, would update later)