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

Afeez Adeyemo - Oct 28 - - Dev Community

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

  1. Introduction.
  2. Download Azure CLI
  3. Creating Web App service using Azure CLI.
  4. 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

  1. Download Azure CLI
  2. On Google search for Azure CLI, click Install

Search for and install CLI

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

Version of CLI

  • 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.

Open PowerShell

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.

Login Azure

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

Pick subscription

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"

Create a resource group with Azure CLI

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

creating appservice plan with CLI

  • 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.
    Search for App ssrvices on Azure

    • Notice the app that was created
    • Click on the webapp just created YesAppServiceApp

open the webapp

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

default domain

webapp is running

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.

search for code on ChatGPT

  • Enter and copy code

code on ChatGPT

B. Prepare environment and upload the code

  • In the search box search for and select Advanced tools Advanced tools
  • Click go go
  • notice it opens up a fresh tab on your browser kudu new tab
  • Select debug console and CMD debug console and CMD
  • Click on site Site on Kudu
  • Click on WWWroot WWWroot
  • Click on the pencil icon on hostingstart.html 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)

C. Check uploaded App

  • Go back to Azure, enter into the YesAppServiceApp
  • Click on the default domain to revisit the webapp Default domain
  • See the WebApp displayed Webapp

The next article will be on how to upload code from Github into a WebApp.

Please drop comments and questions in the comment session

. . . . . . . . . .