Deploy Angular/Vue/React App to Azure Portal through Azure DevOps CI/CD

Overview

Today we will learn how to deploy the angular app to Azure Portal through CI/CD. For this, first of all, you need to create new App Services in the Azure portal. You can follow the first 3 steps as mentioned in the link below. Below URL is to deploy the angular app manually through Visual studio code.

https://setiasunny.blogspot.com/2020/05/deploy-angularvue-app-to-azure-portal.html

Once your app service is ready then make sure code is check-in the Azure DevOps. The first step is to create a new build.

Step 1: Build a Pipeline

Login to Azure DevOps and click on the Pipeline link as shown in the snapshot below and then press New Pipeline

Step 2: Specify where is your code?

I'm selecting Other Git options for the angular app as our code exists in the Azure DevOps Repo.

Step 3: Select a source

Specify your Project and repository as shown below

Step 4: Select a template

I'm selecting an empty job here. So, we perform all the steps manually here.

Step 5: Add New Tasks

In the pipeline Task, you can specify the default Agent pool and specifications.

Get sources Task, Project, and Repository is already selected. if not, select your project.

Add your 3 new tasks, as shown below.

1. Npm task
2. Npm task
3. Publish build artifact

1. You need to press the "+" symbol and add a new npm task here. The First npm task is to install all npm package that is required for the angular app.

2. The second npm task is to build the project. I'm selecting custom command here and specify the working folder where you package.json exists.
Then write build command. In my example, we have run the build command 

OR

You can add build:prod for production env.

3. Add a new publish artifact task and specify the path to publish, it should be in the dist folder. In my case, it is in the folder/dist. your package.json might be outside the folder then you will write only dist and specify the artifact name, it can be anything.

OR

Step 6: Press the save and queue button.

You can see the build has succeeded and will create artifacts for you.

Step 7: Create a release

Click on the release button as shown in the snapshot below and click the "Create Release" button.

Step 8: Select the template

We will select the default template i.e Azure App Service deployment

Step 9: Add an artifact

Specify your Project and build pipeline here, so it can pick the code from that pipeline.

Step 10: Select the Deploy Azure app service task

Specify the following options

1. Connection Type
2. Subscription (Your Azure Subscription)
3. App Service Type (it should be a Web app) as we have an angular app.
4. App Service Name (Once you select the subscription, it will automatically fetch all the Web App that you have created on Azure Portal). Select that app service name here.

Step: 11 Create the release.

Once the release is succeeded, It will automatically deploy all the code to the Azure web app.

This is all about this article and let me know if you have any questions.

Deploy Angular/Vue App to Azure Portal Through Visual Studio Code

Create a new App Service in Azure Portal

Step 1: The first step is to create a web app in the Azure portal. Go to the Azure Portal and click App Services and then click Add button

Step 2 Select the following options

• Subscription, 
• Resource Group (If a resource group is not available then create a new)
• App Name(Unique name), 
• Runtime Stack - Asp.net 4.7/Node latest version
• OS (Windows)
• App Service Plan (Create a new service plan if it is not available)

Press review + Create to create a web app.

Step 3 - Once the app is created then you can see the URL in the overview as shown in the snapshot below.

Deploy your code to Azure Portal 

Step 1 - Open your code in Visual Studio Code

Step 2 - You need a Visual Code Code Extension to deploy the code

Step 3 - Search Azure App Service in the extension and install.

https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice

Step 4 - Click on the Azure Menu and log in with your Azure credentials and it will load your web app here.

Step 5 - Right-click on the web app/dist folder and click on Deploy to the Web app.

Step 6 - You need to browse your code folder. For the angular/vue app, you need to upload the dist folder

The application will automatically create the folder once you build the angular project with the npm run build. 

Note: If the dist folder is not available then you need to run the ng build command. It will create a dist folder automatically.

Once you select the folder, you can see the below-deploying message.

Step 7 - Once the deployment is completed it will display the message below.

Hurray!! The website is deployed and you can click on the Browse Website button.

Note: If your dist folder contains a subfolder then your side won't work. Then you need to go to Azure portal --> App Services --> Configuration --> Path Mappings --> Update Physical Path.

This is all about this article, if you have any questions then do let me know.

The chromedriver.exe or geckodriver.exe file does not exist in Selenium

Selenium Driver Setup

If you are getting an error like "The chromedriver.exe file does not exist in the current directory"

or "geckodriver.exe does not exist"

Step 1:

For Chrome, open the URL mentioned below. Here you need to download chromedriver.exe

http://chromedriver.storage.googleapis.com/index.html

You can choose the latest version of this file.

For Firefox, open the URL mentioned below. Here you need to download geckodriver.exe

https://github.com/mozilla/geckodriver/releases

Step 2: 

After downloading the file, place the .exe file in your project under any directory. 

Note: Location choice is yours.

Step 3: 

Specify the location in the code.

Step 4: 

If you are working on the console application then you can specify a generic path as shown in the snapshot below.

Alternate and Easy Step

Install the chrome driver only as mentioned in the snapshot below. You don't need .exe in this case.
Run the code as shown in the snapshot below

Note: You might get chrome version error. Make sure you have the latest chrome installed or update your browser.

It will open the browser successfully. In the above example, it will open the chrome browser.

Azure Data Factory: Copy Data from SQL database to Dynamic365

The below article will provide you step by step instructions to load data from SQL database to dynamic CRM.

Step 1: Go to portal.azure.com

Step 2: Create a new resource and select data factory

Step 3: Press Create button

Step 4: Select name, resource group etc.

Step 5: Press Create button

Step 6: Once the data factory is created, click on it and press the "Author & Monitor" rectangle.

Step 7: It will open a new window for adf.azure.com

Step 8: Click on Create pipeline tab

Step 9: Drag Copy Data task to the right.

Step 10: The next step is to set Source and Sink. (Sink is destination)

Step 11: Select Source, and press the New button and select the Azure SQL database.

Step 12: Set the properties, In linked Service, Select New option and enter the server name, database, username and password and press create button.

Step 13: Go to Sink, and press the New button in the Sink Dataset and search for Dynanic365 database and select

Step 14: Edit Dataset and create new linked service

Step 15: Set Service URL, Username and password for dynamic 365. Test  your connection and press the create button.

Step 16: Select the entity named in the dropdown.

Step 17: Go to Pipeline, Select Copy data and press mapping options.

              Click the button Import schema, and check your mappings are as expected. If mapping is not loaded properly the specify manually destination columns.

Step 18: Click on Publish All.

Step 19: Press Debug and it will load the data to Dynamic 365

Now it will start loading the data, If the data and mappings are correct then you will see a success message otherwise you will get a failure message.

This is all about this article. I hope you will like it.

Infrastructure As Code: ARM Templates Deployment - Azure Portal

ARM Template Deployment in the Azure Portal

An ARM template is a JSON file used to configure and deploy various Azure resources.

If you want to deploy your ARM(Azure Resource Manager) Template in the Azure Portal then it is very easy. Just open the link https://portal.azure.com and login with your subscription.

Step 1 - Click on Create a resource button on the top left as shown in the snapshot below.

Step 2 - Type "template" in the search box and you will see the Template deployment option, click on that, as shown below.

















Step 3 - Click on the create button as shown below.

Step 4 - Click on the "Build your own template in the editor"

 Step 5 - Paste your template on the right side and press save.
    

 Step 6 - Click on the purchase, it will validate and then execute the template. After then you can see the resource has been created.
     

This is all about the article. thanks for reading it.

Introduction of Azure Function, Types and Deployment

Azure Function

Azure Functions is the serverless computing service hosted on the Microsoft Azure public cloud.

Serverless computing is a very popular term. In most of the cloud technical sessions and the conference, you will hear this term.

In Serverless, you will still write your server-side logic but, unlike traditional architectures, it’s run in stateless compute containers that are event-triggered.

You use Azure Functions to host small applications, like background jobs or small tasks that only runs for a short period. Just like the Logic Apps, Azure Functions are serverless as they scale automatically and you only pay for them when they run. Its Pay as you go.

Similar Technologies

AWS Lambda
Google Cloud Functions
Open Whisk (IBM)

How Azure Function Works

Below are the prerequisite before creating Azure Function

Active Azure subscription 

Azure Storage account.

The developer creates a function and the required code will be deployed in the cloud.

Function Types

Azure Functions has predefined templates. There are many function types available. However, we will discuss the most common function types.

HTTPTrigger

It triggers the execution by using an HTTP request. You can call the Azure function through an API client like Postman.

TimeTrigger
We use this trigger when we want to run our function on a specific time interval.

BlobTrigger
We use this trigger when we want the azure function to trigger automatically when any file is being uploaded to storage Blob.

QueueTrigger

We use this trigger when we want the azure function to trigger automatically when an entry is being added to the queue.

ServiceBusTrigger

The Azure function runs automatically by listening to message queues.

Create Azure Function in Visual Studio

For creating the project in the Visual Studio, Go to File -> New ->Project

I'm using Visual Studio 2019. Find the azure function in the Project Type "Cloud"
Make sure you have a cloud component installed in visual studio.

After then It will ask you to select Function type and Storage account. Select the browse in a storage account and connect with your Azure Subscription. Azure function needs storage account as it places its default file in the azure blob.

Here in this example, I've selected Time trigger function. By default its set to 5 minutes. You can change the time interval at any point.

You can implement your logic in the Run method.

Deployment of Azure Function

You can easily deploy your azure function by right click on the project as shown in the snapshot above and click publish button

We have 3 plans available.

Consumption Plan

Azure Functions host is dynamically added and removed based on the number of incoming events. When your function runs, Azure provides all of the necessary computational resources. You don't have to worry about resource management, and you only pay for the time that your code runs.

Premium Plan

When you're using the Premium plan, instances of the Azure Functions host are added and removed based on the number of incoming events just like the Consumption plan.

App Service plan

Run your functions just like your web apps. When you are already using App Service for your other applications, you can run your functions on the same plan at no additional cost.


In my example, I'm selecting a consumption plan. You need to specify your
Function app - Name of your function app.
Subscription - Your azure subscription.
Resource group - Resource groups in Azure is a new approach to group a collection of assets.
Location - Select the global region where you want to create the Azure function.
Azure Storage - Storage to save the files.

Once the published is complete, you can see new App Service and Service plan is being created in the Azure Portal.

When you expand the "demoazurefn", you can see your function there.




Once you run the azure function, you see the log in the screenshot below. It means function ran successfully.

You can also create the azure function in the Azure Portal itself. Please follow below to create the azure function in the portal

Create Azure Function in the Azure portal.

Step 1: Click on the "Create a resource" button and search "function app"

Step 2: Click on the create button on the next page.

Step 3: Select the Function App Name, Resource Group, Storage etc as shown in the snapshot below and click create.

Step 4: Once you press the create, the system will validate all the details and create the function app in the Azure portal.
Step 5: Function app is ready now, and it's empty. You can now add your function in the function app by clicking the + button as shown below.

This is all about the azure function, hope you like it.

Check SQL Database size

SQL Query to calculate database size

Below is the query to check the disk space.

SELECT      sys.databases.name as DBName,
            CONVERT(VARCHAR,SUM(size)*8/1024)+' MB' AS [Disk Size]
FROM        sys.databases 
JOIN        sys.master_files
ON          sys.databases.database_id=sys.master_files.database_id
GROUP BY    sys.databases.name
ORDER BY    sys.databases.name

How to check log size and clear log

DBCC SQLPERF(logspace)

DBCC LOGINFO

Below is the query to shrink the log. The first parameter is the log name. you can get the name by pressing the right click on the database and click Properties and then select Files Tab. The second parameter is database size in MB

DBCC SHRINKFILE (ReportServer_log, 8);