Continuous Deployment Bitbucket to Azure Angular 2

Reading time: 15 minutes

Description

In this post I will explain how to setup continuous deployment with Azure DevOps. This post will also contain instructions of how to host it using Azure App Service.

What is required

• Azure Subscription
• Angular App
• Repository/Repo at AzureDevOps

---

What is continuous deployment?

Continuous deployment is the final stage of CI/CD development approach. It is responsible for deploying code to different environments. For example, develop, staging and production. Deployment happens automatically in comparison to Continuous Delivery. With continuous delivery the only difference is that the release to production happens manually. It involves someone from the engineering team or someone from product team or even management to click a button.

In a nutshell CI/CD is a practice that is followed by an engineer or a group of engineers that work on a common code of any application that is under constant development and which requires to be build, tested and released as soon as the code is being pushed to a git a branch that is responsible for kicking this process off. Normally it is a develop branch.

Main benefit of CI/CD approach is that the code is in deployable state at all times. Of course, this is in theory but in practice this could be more or less true because in order for this approach to be effective team have to be disciplined and implement whatever is required for it. There are a lot of resources online for different situations. This would all depend on the current team approach, requirements and objectives.

---

Let's roll up our sleeves and get stuff done

Setup local environment and workspace for Angular app

Install Visual Studio Code on your machine. Please use the below link.

https://code.visualstudio.com/download

Then you need to install appropriate Node.js version that is compatible with your version of Angular.

https://nodejs.org/en/download/

Create Angular app

It is a straight forward task once your local environment and workspace is set up.

• Open VS code
• Go to Terminal > New Terminal
• Install the latest Angular version globally with this command > npm install -g @angular/cli
• type in > ng new my-app
• use this command to go to code > cd my-app
• make sure it works fine by opening the app using this command > ng serve -o

Create repository on Azure DevOps

Prerequisite: you need a project on Azure DevOps. Go to your Azure DevOps main page. The url should look similar to the below one.

https://dev.azure.com/your-username-for-azure-account/

Next thing is to initialize a repository. Select Repos from left panel. If you don't have any repos in there then you should see similar page.

You need to initialize a repo for it be able to clone to your machine. Once it is cloned you need to copy files your previously created angular app into location where you have cloned the repo to. This way source control app on top of Git will detect changes. By the way you need Git installed on your machine.

*In case you got other repos on the project you can simply add another one like so.

Make sure you give a descriptive repository name. If you want to avoid complications then it should be without spaces. Also select at least README. Alternatively, you can add .gitignore. You can always delete them or replace them. This way your repository won't be empty and you can check it out with no issues.

Create Azure App Service

Select App Services at Azure portal home screen.

On next screen select Add.

Then select suitable subscription that is available on your account. For this task Free Trial subscription would be sufficient.

Next create New Resource Group.

Resource group serves as a container for related projects of your application that you host on Azure. More information at Microsoft documentation following this link https://docs.microsoft.com/en-us/azure/azure-resource-manager/management/manage-resource-groups-portal

Next fill in Instance details section.

Name is App name plus it constructs part of the URL.

In our case the app code will be published, so let's leave Code as selected option.

Runtime stack relates to this particular instance of app running on an Azure server. Whatever you choose it should be applicable to your application. In other words, your app should be able to run on this stack. Different runtime stack would behave differently, would have different DLLs running and so on.

For our case we need to run Angular app on .NET V4.7 because angular app needs a server to run the app. This will provide us with an option to run the app on IIS which comes with the framework. Alternatively, you can choose .NET Core. This might need some tweaking but in theory it has IIS server too, so should run with no issues. More information https://docs.microsoft.com/en-us/aspnet/core/fundamentals/choose-aspnet-framework?view=aspnetcore-3.1 and here https://angular.io/guide/deployment#server-configuration

As for operating system select Windows.

Depending on the Region you can have different App service plans. For example, since we are using Free Subscription not all regions will have a Free F1 plan and sometimes you need to pick the right one for your needs.

Finally, it should look similar to below image.

Confirm your app settings by clicking Review + create. All done!

Let's go back to AzureDevops to implement continuous deployment

Create build pipeline

Select Pipelines from the left menu and then click on 'Use the classic editor' in the section on the right.

Next select our previously created repository and click Continue.

For our purpose we need an Empty Job where we can customize all the steps and processes for this build pipeline. Other options are premade templates that can speed up pipeline setup.

Next screen should give you different options to structure this pipeline. What we need is to add a task to an Agent Job.

First task would be the Node.js tool installer. You would need to choose an appropriate version to run with your angular app. For example, I will pick version 12.x for Angular 9 app.

Then we need to follow the same pattern and add a npm task.

We need to replace default field content with custom values. In our case we are making sure the pipeline has latest angular installed.

Then we need add another npm task where we explicitly say to install all the packages and dependencies for our Angular app. Here we leave a default field content.

Now we need to add a production build task. Again, we will use npm task.

When app is build using 'build –prod' command it creates 'dist' folder with app name folder inside. In this folder you got app build files that would be used on the server to run your app.

As you can see on the image below inside we got a folder with app name containing transpiled and minified JS files plus other files required for app to run.

Next step is to archive files into particular location on the server. Let's search pre-set tasks for an archive task.

Change root folder to System.DefaultWorkingDirectory. It is the place where your source code files are downloaded. More details https://docs.microsoft.com/en-us/azure/devops/pipelines/build/variables?view=azure-devops&tabs=yaml

And also untick 'Prepend root folder name to archive paths'.

Last task to add will be to publish build artifacts.

There is nothing that we need to change.

So, the final set of tasks for build pipeline should look like this.

To make it so that every time there is a change to the branch it would trigger a new build we need to select 'Enable continuous integration' flag in Triggers section. By doing so we are achieving continuous integration of code.

This looks like it. Now we need to click Save & queue, add save comment and click Save and run.

This will start the build pipeline. During the build all the tasks that we established would be done sequentially.

Create release pipeline

Select Releases under Pipelines in the left side navigation menu.

If you do not have any pipelines you can add a new pipeline by clicking on New Pipeline.

In case you have existing pipelines, you can add new release pipeline by using dropdown as you can see on the image below.

Next thing to add is Azure App Service deployment task.

After that you need to click Tasks tab and select your subscription with app service for this web application.

Once this is done we need to go back to Pipeline tab and select our artifact that we published in the build pipeline.

We keep everything as it is after we choose Source build.

To enable continuous deployment, we need to activate the continuous deployment trigger. Once you have added a build artifact you can click on continuous deployment trigger icon. In the side pop out window you need to set toggle to Enabled.

Additionally, if you got a requirement to set this trigger on particular branch e.g. master, develop etc you can easily do so in the same window. This way the release pipeline will listen to a build on particular branch e.g. develop, yourtestbranch etc

Click Save, then Create release.

Go to Releases on the left pane. In the right section click on your Release created in the previous step.

You would need to deploy the first release manually. Click Deploy

That is it.

Oh, wait one more thing. Go back to Azure portal and find our previously created App Service. Select Configuration from Settings in the left side menu option. Move to the right side and select Path mappings tab. On that tab edit Physical Path under Virtual applications and directories, so that it reads site\wwwroot\dist\ng-app\

This will make sure you are able to access your web application.

Conclusion

This tutorial shows you how to setup CI/CD using Azure portal and Azure DevOps. These two work hand in hand. Since it is all under one Microsoft account it becomes really easy to connect everything together and see results straight away.

CI/CD pipelines serve as handy and straight forward mechanims that can greatly improve the performance of the team. It can also increase the output by automating a lot of processes related to building, testing and deploying of your application.

takasukagrarnices.blogspot.com

Source: https://dgtechboost.com/2020/05/04/continuous-deployment-of-angular-spa-to-azure-app-service/

Share this post