Creating A Web App

Creating a Web App

Azure App Services provide a hosting service that developers can use to develop mobile or web
apps. Apart from this, developers can also use it to build API apps or Logic apps, which provide
integration with SaaS.
Azure Web Apps provides a platform to build an app in Azure without having to deploy,
configure and maintain your own Azure VMs. You can build a Web app using ASP.NET, PHP,
Node.js and Python. They also integrate common development environments like Visual Studio
and GitHub. With Web apps, you can host your apps anywhere in Microsoft’s global data center
infrastructure.

● Step 1: Open the Azure management portal and log in to https://portal.azure.com

● Step 2: Go to the search bar and search for “App Services”. Click on it.

● Step 3: Click on the “+ Create” button.

Copyright Dot Net Tricks Innovation Pvt. Ltd. | All rights Reserved.
 ● Step 4: After clicking create option, Fill in the required details. You have to keep some
options as it is but according to your need, you can change some of them.

1. Subscription: Choose a suitable subscription.

2. Resource group: Resource group is a container that holds related resources for an
Azure solution. You can keep the resource group as it is or you can also create one
by clicking “Create New”.
3. Name: Mention a name for your web app.
4. Publish: Select “Code” Option.
5. Runtime Stack: Select .NET 6 (LTS) from the drop-down menu.
6. Operating System: You can select either Linux or Windows.
7. Region: Region determines where your app service plan is created.

Copyright Dot Net Tricks Innovation Pvt. Ltd. | All rights Reserved.
 ● Step 5: Creating App Service Plan

App Service is a Platform as a Service (PaaS) offering and we use it to host web
applications, REST API's and backend services for mobile applications. To create App
Service, you need an App Service Plan. Without an App Service Plan you cannot create
App Service.
In the Windows plan, select an existing plan or create a plan a by selecting “Create
new”.
In Sku and size, Select “Change size”. A Spec Picker window will appear that displays the
pricing tiers with workload methods:
1. Dev/Test: As the name suggests, this category is used for development and testing
purposes of the applications with Azure App Service. There are five separate pricing
tiers in the Dev/Test category- F1, D1, B1, B2 and B3.
2. Production: As the name suggests, this category for the production workloads of
the applications. Again, there are two types under this category: standard and
premium pricing tiers. This category has a standard pricing tier, S1, S2, and S3, and
premium tier P1V2, P2V2, P3V2, P1V3, P2V3, and P3V3. All these tiers have custom
domains/SSL, Auto Scale, Staging Slots, Daily backups, and Traffic manager
features.
3. Isolation: This service plan is specifically considered for mission-critical workloads,
that are required to operate in a virtual network. This service plan enables
consumers to run their applications in private, dedicated environments in Azure
data center. This service plan has been enhanced for workloads demanding
resource isolation, maximum scalability, and advanced networking features.

Copyright Dot Net Tricks Innovation Pvt. Ltd. | All rights Reserved.
 ● Step 6: Each pricing tier has some extra features as shown below. Select the pricing tier
as per your needs and select “Apply”. Here, we selected Standard S1

Copyright Dot Net Tricks Innovation Pvt. Ltd. | All rights Reserved.
 ● Step 5: Leave all the settings as default and directly click on “Review + Create”.
Click on “Create” for the deployment process.

Copyright Dot Net Tricks Innovation Pvt. Ltd. | All rights Reserved.
 ● Step 6: After clicking on Create, the Deployment process will be completed.

● Step 7: Now, the Web App is ready for testing. Click on the “Go to resource” button.

● Step 8: Click on that URL and it’ll be redirected to a new browser in which Sample App
Page will be displayed.

Copyright Dot Net Tricks Innovation Pvt. Ltd. | All rights Reserved.
 ● Step 9: Return to the Overview page of the web app that you’ve created. Scroll down a
bit, you’ll see some charts.

● Step 10: Visit the app URL several times so that it can simulate the response request
cycle. Now, Just wait for 2-3 mins and you’ll notice the variations in graphs. Those
variations are the traffic details of the web app. Refresh the page if the graph does not
show any variations.

Copyright Dot Net Tricks Innovation Pvt. Ltd. | All rights Reserved.
 ● Step 11: You should be able to see the corresponding telemetry displayed in the charts.
These charts will include HTTP 5xx, Data In, Data Out, Requests and Response Time.

● Step 12: Web App Overview and Dashboard

1. HTTP 5xx Chart: HTTP 5xx responses indicate the server issues. A sudden spike in the
number of 5xx responses can be the result of the following:
▪ Deploying new code which contained a bug.
▪ Issues in the configuration for your app service.
▪ Your application is overwhelmed by the amount of traffic it is receiving.
▪ Errors returned by upstream services that your application depends on.
2. Data In: It shows the details of incoming data to the Web app.
3. Data Out: It shows details of outgoing data from the Web app.
4. Requests: It shows the number of requests received by the Web app over the period.
5. Response Time: It shows the amount of time the Web app took to revert to the
requests it is receiving.

Contact Us
You can always reach out to us if you need help with this practice hands-on lab. For getting
help email us at hello@scholarhat.com or connect at the #support channel on Discord.

Copyright Dot Net Tricks Innovation Pvt. Ltd. | All rights Reserved.