Step-by-Step Guide for Creating an App Service Application on Azure Portal and Uploading Code into it

Introduction

Azure App Service provides a fully managed platform for developing, deploying, and scaling web applications. In this article, I'll walk you through the steps of creating an App Service application in the Azure Portal and uploading code to it.

Step 1: Sign in to the Azure Portal

• Go to the Azure Portal.
• Sign in with your Azure account credentials. If you don’t have an account, you can create a free account at azure.com/free.

Step 2: Create an App Service Application

1. Navigate to App Services:
   • Search for App Service in the search bar and select it from the results.

Configure the App Service:

• Click Create then click on +web app to start the setup process.

• Fill in the required fields:
• Subscription: Select your Azure subscription.
• Resource Group: Create a new resource group or select an existing one.

• Name: Enter a unique name for your app (e.g., kakawebapp).
• Publish: Choose Code (if you’re deploying code) or Docker Container (if you’re using a container).so since we are deploying code in this artcle we choose code
• Runtime Stack: Select the runtime stack for your application (e.g., .NET, Node.js, Python, etc.). note for example: If we choose .NET, Azure ensures the latest .NET Core or .NET Framework updates are applied.
• Operating System: Choose Windows or Linux depending on your app’s requirements.
• Region: Select the region closest to your users for better performance.

App Service Plan:

• Select an existing App Service Plan or create a new one.
• Choose the pricing tier based on your app’s needs (e.g., Free, Basic, Standard, Premium). for the sake of tutorial we use standard.
• Then click on create and review

• click on create

• Deployment in progress

• Click on Go to resource to open the App Service overview page.

Step 4: Prepare Your Code for Deployment

1. Ensure your code is ready for deployment:
2. For web apps, make sure your code includes the necessary files (e.g.,html, css,javascript, etc.).

Step 5: Upload Your Code to the App Service
There are different methods to upload your code to Azure App Service but for the sake of this tutorial we will deploy the code via azure portal.

• on the Resource overview page search for advanced tools then click on advanced tools

• Click on GO

Note when click on Go it will redirect you to sign in your Azure account. Then continue to sign in and the kudu+ page will show

• Click debug console then on the drop down click on CMD

• Click on site

• Click on wwwroot

• On the hostingstart.html page click on the pencil sign

• Copy and paste your web code on it the save

• Go back to the app service resource group and click on Default domain link. Note the code deployed is html,css and javascript chilldren math game.

Conclusion
We have successfully created an Azure App Service application and uploaded children maths code into it!. Azure App Service is a powerful platform for hosting web apps, and you may configure your app's settings, scale it, and combine it with other Azure services as necessary.

For more complex setups, see the Azure App Service documentation. Happy coding! 🚀