DEV Community

Cover image for Azure and Angular Deployment in 10 minutes
John Peters
John Peters

Posted on • Updated on


Azure and Angular Deployment in 10 minutes

Deploy Angular App to Azure

For the Angular folks we are easily able to create a new Angular application and run it locally using

ng serve
Enter fullscreen mode Exit fullscreen mode

However, to deploy it to an Azure web site, we have to have a server that knows how to default to showing an index.html file. IIS does this by default.

App Service Plan and the App Service

Then navigate to

Alt Text

The App Service Plan describes the type of environment. We configured an ASP.NET Core 3.1 environment.

The App Service is Azure speak for the Web Site which by default is served here:
Enter fullscreen mode Exit fullscreen mode

You will only see the App Service after the deploy.

Dist Folder Only

The website only needs the contents of the Dist folder. We accomplished this by running

ng build --prod
Enter fullscreen mode Exit fullscreen mode

Then we moved the dist folder to it's own folder...

Alt Text


Alt Text

Answer yes to any questions, then click on the link to see your new website.

Alt Text

Linux without ASP.NET Core

Our first deployment attempts failed because the default App Service plan is Linux without ASP.NET Core. This failed because the file it wanted (to serve app) didn't exist. We deleted that App Service plan then we created the a new plan using ASP.Net Core 3.1.

Thanks to Lars help in guidance below, it worked!

Top comments (2)

layzee profile image
Lars Gyrup Brink Nielsen • Edited

Hi John, ng serve uses the Webpack development server. It's not meant for production use. Use the ng build --prod command, then serve the files in the dist folder through an Azure app service or Azure Static Web App. Use rewrite rules to route all app routes to index.html as seen in the example here You can also try the Azure deploy package for Angular

Angular uses Node.js, that's true. But only for development tools, not for a production web server. The compiled output is a static web app which can be served on any web host.

jwp profile image
John Peters

Lars, thanks to your answer, I was able to figure out what went wrong the first time.

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.