DEV Community

Continuously Deploying Angular to Azure App Service with Azure DevOps

Frederik Prijck on September 10, 2019

Introduction In the previous article, we saw how to integrate an Angular application with Azure DevOps so that we are continuously build...
Collapse
 
programmingworld1 profile image
Murat Yilmaz

Hello, Thank you very much for this post! I have 1 problem at the release phase. It says succesfull, but if go nagivate to the app service url, I don't my webapplication. Do you know why this is the case?

Collapse
 
frederikprijck profile image
Frederik Prijck

Hey Murat,

What does the output of the Tasks: Download Artifact (web-app) and Deploy Azure App Service show for the corresponding Release?

Collapse
 
programmingworld1 profile image
Murat Yilmaz • Edited

Another question I have: I want a test and production environment for my angular project. The test environment should have the artifact deployed based on the command "ng build" and the production environment should have the artifact deployed based on the command "ng build --prod".

What is the best approach for this? I have made for each branch (master/dev) a yaml file, in this file I generate the correct build/artifact. I also have two release pipelines, one listens to builds from dev and one to builds from the production branch based on "Build branch filters" when enabaling "Continuous deployment trigger". After it is triggered, It deploys the right artifact to the right App Service.

Is this a good solution? Because I can't find good information about this. Should I for example use multi-stage build pipeline in order to create both artifacts wheter there are changes to prod or dev branches and have ONE release pipeline with multiple environments which take the correct artifact?

Please help me out with this one, I have been struggling for ages!

Thread Thread
 
frederikprijck profile image
Frederik Prijck • Edited

As you're deploying from both development and master branch you do have to use 2 separate build pipelines and 2 separate release pipelines. So what you're doing seems right.

However, I'm not sure why you are not using ng build --prod for the development environment. Not using --prod will remove some optimizations done by the ng cli.

I have an article on how you can implement runtime configuration so you can have different configurations while still using ng build --prod.

Thread Thread
 
programmingworld1 profile image
Murat Yilmaz

Hi Frederik, thank you for your response. I'm using "ng build" because I thought this was the way to build your project based on the development configuration. Is it really bad, if so, can you please provide me the article link? : )

Collapse
 
programmingworld1 profile image
Murat Yilmaz

Hi Frederik, I solved it by adding the startup command. thanks for your response though!

Collapse
 
programmingworld1 profile image
Murat Yilmaz

"I have an article on how you can implement runtime configuration so you can have different configurations while still using ng build --prod.". Can you please provide me the link.

Thread Thread
 
frederikprijck profile image
Frederik Prijck

Sorry I forget adding the link: dev.to/thisdotmedia/runtime-enviro...

Collapse
 
tqa236 profile image
tqa236 • Edited

Hello, thank you very much for the post. I follow it carefully but still got an error now. What is the runtime stack you chose when you created the web app in Azure Portal? If I choose any version of Node, the option Windows for OS is not available anymore.

Collapse
 
frederikprijck profile image
Frederik Prijck

Hey, I used the .NET Core run time.

Collapse
 
tqa236 profile image
tqa236

Thank you very much. This saves my day. In fact, I spent the last several days debugging this.

Collapse
 
jsgoupil profile image
Jean-Sébastien Goupil

This article really helped me out! I would like to add for people who are looking to use .NET Core with this, I ended up using the Deploy to Azure functionality, but then it becomes kind of a mess using it with the config.json, the reason is it is deploying a .zip file (everything is already packaged).

So in the end, I created this config.json with the file creator in the release pipeline, then SFTP it over after the deployment has finished.

Collapse
 
alexlvovsky profile image
Alex Lvovsky

Hi, thanks you very much for this post!
I have one question: for example I have several environments (dev, test and prod) and I'm using some 3rd-party services, and for each environment I have different access tokens/secret keys for these 3rd-party services. Currently, in deploy stage I decide which key/token to use and it stored in assets. But the problem that assets is public folder, and it means that every one can see all these keys.
Is there a way to hide them somehow?