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.
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...
Deploy
Answer yes to any questions, then click on the link to see your new website.
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)
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.
Lars, thanks to your answer, I was able to figure out what went wrong the first time.