How to Create an app service and deploy a web on it?

Introduction

Cloud computing has made it easy to host and run websites without the need to buy or manage physical servers. Microsoft Azure is one of the most popular cloud platforms, offering many services for developers and students. One of its main services is Azure App Service, which lets us create, deploy, and manage web applications quickly.

In this practical, we completed the entire process of deploying a web application on Azure. First, we already created an App Service Plan named `appdemo` in the resource group `appwork`. Using this plan, we created a new web app called `namal web`. After successfully creating the app service, we accessed Azure’s Advanced Tools, known as Kudu, to reach the File Manager. Through the File Manager, we uploaded our HTML and CSS code for Namal University’s website into the `wwwroot` folder.

Once the code was uploaded, we copied the default URL from the App Service overview and opened it in a browser. The website loaded successfully, confirming that the deployment was done correctly. This exercise helped us understand how Azure App Service functions as a Platform-as-a-Service and how it simplifies the process of hosting web applications on the cloud with minimal setup.

Created an app service plan with the name appdemo and in the resource group named as

appwork.

ScreenShot .1 Deployment of App service plan

Created An app service named step by step .

Step 1: Open App services and create a web app.

ScreenShot .2 App services

Step 2:Web App manual Creation with named as namal web in the same resource group

ScreenShot .3 New App service Connection

Step 3: Then after creation it is deployed successfully

ScreenShot .4 Deployment Successfull

Step 4:Used advance tool to get a collection of developer oriented tool

ScreenShot .5 Advance Tools

Then through file manager in the root folder of site saved my web code .

ScreenShot.6 FileManager Info

Code of Namal Web

ScreenShot .7 Code

Copied the link from the overview and run it in my browser ,it showed my deployed web

ScreenShot .1 Web Interface 1

Observation:

The deployment process demonstrated the efficiency of Azure App Services in hosting a

Node.js runtime stack within a managed Windows environment. By utilizing the Advanced

Tools (Kudu) and the integrated File Manager, the web code was successfully uploaded to the

root directory, ensuring that the custom HTML/CSS interface for Namal University was

accessible via a public .azurewebsites.net URL.

Conclusion:

The deployment of the "Namal Web" application successfully validated the end-to-end functionality of Azure App Service. Using the pre-created App Service Plan `appdemo` in resource group `appwork`, the web app was manually provisioned and deployed without infrastructure management overhead. 

Key outcomes from the process:

1. Managed Hosting Efficiency - Azure App Service provided a ready-to-use Windows environment with http://Node.js runtime, eliminating server setup and maintenance.

2. Streamlined Deployment - Advanced Tools (Kudu) and the built-in File Manager enabled direct upload of HTML/CSS code to the `wwwroot` folder, making the deployment process quick and developer-friendly.

3. Instant Public Accessibility - Upon successful deployment, the custom web interface for Namal University became immediately accessible via the default `azurewebsites.net` URL, confirming correct configuration.

4. Platform Reliability - The process demonstrated Azure’s ability to host, scale, and serve web applications with minimal effort while providing developer-oriented tools for troubleshooting and file management.

Overall, Azure App Service proved to be an efficient, scalable, and user-friendly platform for hosting web applications, suitable for both academic projects and production workloads.