loading...
Cover image for Azure and Angular Deployment in 10 minutes

Azure and Angular Deployment in 10 minutes

jwp profile image John Peters Updated on ・2 min read

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

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 portal.azure.com.

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:

https://websitename.azurewebsites.net/

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

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

Alt Text

Deploy

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!

Discussion

pic
Editor guide
Collapse
layzee profile image
Lars Gyrup Brink Nielsen

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 angular.io/guide/deployment#fallba.... You can also try the Azure deploy package for Angular npmjs.com/package/@azure/ng-deploy.

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.

Collapse
jwp profile image
John Peters Author

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