How to create an App service application and hosting an app on it

This is a guide on how to create an app service application on Azure and how to host an app on it.

In this article, I will make use of Azure Command-Line Interface (CLI) to issue the commands to create the app and deploy it. The Azure CLI is a powerful tool that allows you to manage Azure resources directly from your terminal or command prompt, it is a quicker way to deploy, monitor and manage azure resources.

Table of Content

Introduction.
Download Azure CLI
Creating Web App service using Azure CLI.
Uploading content.

1. Introduction

Azure App Service
An Azure App Service application is a fully managed platform-as-a-service (PaaS) offering from Microsoft Azure. It enables developers to build, deploy, and scale web applications, mobile backends, and RESTful APIs quickly and efficiently. Here are some key features and benefits of Azure App Service applications:

Key Features

Multiple Language Support: Azure App Service supports various programming languages, including .NET, Java, Node.js, PHP, Python, and Ruby1. Integrated Development Environment: It integrates seamlessly with popular development environments like Visual Studio and GitHub, making it easier to deploy and manage applications2.
Scalability: You can scale your applications up or down based on demand, ensuring optimal performance and cost-efficiency3. Security: Azure App Service provides built-in security features, including authentication and authorization, SSL/TLS certificates, and compliance with industry standards3.
Continuous Integration and Deployment (CI/CD): It supports CI/CD pipelines, allowing for automated deployment and updates2.
Monitoring and Diagnostics: The platform offers comprehensive monitoring and diagnostic tools to track application performance and troubleshoot issues2.

Benefits

Ease of Use: Azure App Service simplifies the process of deploying and managing applications, reducing the need for extensive infrastructure management.
Cost-Effective: With various pricing tiers, you can choose a plan that fits your budget and scale as your application grows3.
High Availability: The platform ensures high availability and reliability, with options for automatic backups and disaster recovery3.
Global Reach: Azure’s global data centers allow you to deploy applications closer to your users, improving performance and user experience2.

Azure App Service is ideal for developers looking to focus on building their applications without worrying about the underlying infrastructure. It provides a robust, scalable, and secure environment for modern web and mobile applications.

2. Downloading Azure CLI

Download Azure CLI
On Google search for Azure CLI, click Install

Pick the version compactible to your computer (Windows or MacOS) to download

Wait for the installation file. Install Azure CLI. Wait for it to install and close it.

3. Creating the web App with Azure CLI and PowerShell

A - Open Terminal or PowerShell on your computer. They are mostly preinstalled on every system.

B - To login into Azure.

Enter the command "az login"
It will pop up the Azure login page on the browser. Login your azure account.

Observe on PowerShell that you are logged in.
Enter to confirm the default/active subscription was picked.

C - Create a resource group.
A resource group in Azure is a logical container that holds related Azure resources, such as virtual machines, storage accounts, web apps, databases, and more.

To create, enter the command "az group create --name YesAppRGAfeez --location eastus"

D - Create an App service plan

An App Service plan in Azure defines a set of compute resources for a web app to run. It is basically a compute resource that host a web app.

To create, enter the command "az appservice plan create --name YesAppAfeezPlan --resource-group YesAppRGAfeez"

This will create YesAppAfeezPlan inside the already created YesAppRGAfeez resource group

Notice the App Service Plan with name YesAppAfeezPlan has been created.

E - Create a Web App
A web app, or web application, is a software application that runs on a web server and can be accessed through a web browse.

To create, enter the command az webapp create --name YesAppServiceApp --resource-group YesAppRGAfeez --plan YesAppAfeezPlan

This will create Webapp named YesAppServiceApp inside the resource group YesAppRGAfeez inside the plan YesAppAfeezPlan.

F - Explore the webapp that has been created

Search for App services on the home page in your Azure.
- Notice the app that was created
- Click on the webapp just created YesAppServiceApp

Click on the default domain to see that the webapp is running and empty

4 - Uploading content in the webapp

A. Copy the source code from predetermined location. For the purpose of this article, a source code for a Quran app will be created using ChatGPT.

Type sample HTML CSS script application for a holy Quran application in ChatGPT or it can be any app you wish to develop.

Enter and copy code

B. Prepare environment and upload the code

In the search box search for and select Advanced tools
Click go
notice it opens up a fresh tab on your browser
Select debug console and CMD
Click on site
Click on WWWroot
Click on the pencil icon on hostingstart.html
Delete the default code in the page
Paste the code for the App generated with ChatGPT
Save ![Paste code in Kudu(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/px19xo88y71y8my8srg2.png)