Multi-Stage Pipeline + Asp.Net Core + Angular + Azure App Service

Azure Multi-Stage Pipeline for Asp.Net Core and Azure, Deploy to Azure App Service

Create a multi-stage pipeline, for our Asp.Net core and Angular application, with a task to deploy it to the Azure App Service.

Image for post
Image for post
Multi-Stage Pipeline + Asp.Net Core + Angular + Azure App Service

Asp.Net Core Application with Angular

I already created both Asp.Net and Angular applications using the Angular project template. There are many advantages that I can think of if you are using this template. Some of them are listed below.

  • Angular CLI integration. In development mode, there’s no need to run ng serve. It runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file.
  • Efficient production builds. In production mode, development-time features are disabled, and your dotnet publish configuration automatically invokes ng build to produce minified, ahead-of-time compiled JavaScript files.

Look at the Configure method and that is where we set the SPA.

Enough of the details about the application. Let’s start creating the pipeline now.

Azure Multi-Stage Pipeline

Go to your Azure DevOps project and click on the Pipelines, you should see an option to create a dummy YAML file there. And when it is created, just replace it with the preceding content.

After the build, we run the task publish, and please remember that your Angular application will also be ready for production as we use the Angular template from Visual Studio. In the other stages, we added a task to deploy the package to the Azure App Service. Please be noted that you need Azure Service Connection to do this. Please follow this doc to do that.

Once everything is done, just go to your Azure DevOps project and run your pipeline. If everything goes well, you should now see the output as in the preceding image. Please remember that the stages depend on the branch you run, that is the condition we added. For example, for dev we added the condition condition: and(succeeded(‘Build’), eq(variables[‘build.sourceBranch’], ‘refs/heads/dev’))

Image for post
Image for post
Multi-Stage Pipeline Output

Conclusion

Here in this post, we have seen how to create an azure multi-stage pipeline fou our Asp.Net core and Angular application, that will also deeply to an Azure App Service.

You can also read this post on my blog here.

About the Author

Your turn. What do you think?

Thanks a lot for reading. Did I miss anything that you may think which is needed in this article? Could you find this post useful? Kindly do not forget to share your feedback.

Kindest Regards

Sibeesh Venu

Written by

An engineer by profession and writer by passion. Microsoft MVP, Author, Blogger. sibeeshpassion.com, youtube.com/sibeeshPassion, youtube.com/njanorumalayali

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store