In this ever-changing world, web apps are one of the most useful resources we use in day-to-day life. Building a scalable and reliable web app while managing traffic is quite challenging. Leveraging the advantage of cloud technologies is one of the biggest advantages of building web apps. There are a lot of cloud computing platforms in the market but choosing the right platform depends on various factors. In this article, let us understand one of the popular Microsoft Azure services, Azure web apps.

Getting Started with Azure Web Apps

Before understanding What Azure Web Apps is, let us discuss Azure App Service.

Azure App Service

Azure Web Apps is a kind of hosting environment in Azure that allows us to host web applications, Mobile backends, or RESTful APIs. It also allows applications to auto-scale, High-availability which allows to host the applications on various Operating systems like Windows or Linux.

Overview of Azure Web Apps

• Azure web apps are a part of the Azure App Service suite, which allows the hosting of web applications on Azure. It has various features and allows developers to build, deploy, and manage web applications. Let us dive into the features of Azure Web Apps.
• The web app registered in Azure web app service is similar to the regular web apps that we deploy in any hosting environment. When users register in an Azure web app service, their application gets a registered name.
• Underneath the web app, we have a folder structure that contains a folder structure.
• The www root folder contains an index.html page which is the actual application.
• This web app is embedded into the Azure App service plan, this plan helps the user to register multiple web apps within the same App service plan.

Features of Azure Web Apps

Let us see some features of Azure web apps.

• Scalability: Scalability is one of the most important features of Azure web apps. Azure web apps provide an auto-scaling option that allows us to scale our applications up or down based on the demand. It is a better option for traffic management.
• Platform-as-a-service(PaaS): Azure web apps is a PaaS model that allows developers to concentrate solely on the logic building and all the necessary tools and utilities like servers, storage, and infrastructure are provided by Azure.
• Language and framework support: Azure web apps support various frameworks including Java, .Net, Python, C#, Node.js, Ruby, etc. so it has large community support and the developers have the flexibility to choose their technology stack not bothering about the hosting platform support.
• Vast Deployment Optionsa : Azure Web apps provide various deployment options to deploy our code. It supports various options like FTP, Git, GitHub, etc. There are also options to set up CI/CD process for continuous deployment.
• Security: Security is the key aspect of any web app. Azure provides various security options for the developer to integrate such as SSL certificate, Authentication, and Authorization through Azure Active Directory, etc.
• Disaster Recovery: Azure Web apps provide various options to ensure high availability such as Data centers, Automatic backups traffic managers, etc. These allow the application to remain unaffected after a disaster and can be easily recovered.

Along with these features, Azure Web apps are also cost-effective and provide services to monitor and diagnose the application.

Step by Step Guide to Create and Deploy a Web App in Azure Web App service

Let us understand step by step guide for creating and deploying a web app in Azure web app services:

Step 1: Get your prerequisites ready

• create and code your application which you want to deploy in the Azure web app service. In my case, I am using ReactJS to build my application. If you want to build your own react application, refer this
• Once your application is created, Create a build folder for your app.

• If you want to integrate CI/CD process into your code, you can use GitHub to manage your code. For now, I’ll keep it simple.

Step 2: Creating a Azure web App Instance

• Navigate to the Azure portal and Login with your credentials
• Navigate to Market place and search for Azure App Services

• Click on the create button to view the available options to create a web app like a web app with database, WordPress web app, web app with database integrated or a static web app.

• Lets create a web app.

• In the Basics tab, mention the project details like subscription type and resource group name. We can use a existing resource group or create a new resource group according to our requirement. Let’s create a new resource group. To do that click on create new link and enter the name of thee resource group and click ok. Now we have a new resource group.

• Now, mention the Instance details like name of the web app. If you want a unique hostname, you can toggle the unique default hostname on.
• As we have a code ready with us, our publish type will be code.

• Now choose the runtime stack of your code. As I am using React I choose Nodejs latest version. There are a bunch of options available for you like C#, Java, Python, Ruby etc.

• And choose the OS between Linux and windows according to your requirement.

• Another important details to mention is pricing plan. As we are using Linux operating system. The Linux OS plan will be assigned by default. Choose the pricing plan for your web app.

• Next section goes with Database, we can import the data from our local system to Azure database services and we integrate that database to our web app.

• These are the list of services available for creating database. CosmoDB database is recommended to use.

• You can check the create a database option if you want one and choose the service you want and enter the name.
• Next section goes with deployment. If you want to integrate with continuous Integration and continuous deployment(CI/CD) process, connect with GitHub to manage the code and enter the respective credentials. For now, I am disabling this option.

• These are some of the important details we need to focus on. Now review your details and create the instance.

Step 2: Deploying the code

• click on the Go to resource button to navigate to the deployed instance. In the left vertical menu, we see the development tools section. Under the development tools, click on the Advanced tools.

• click on Go. To open the Kudu console.

Kudu console: Kudu is an essential tool for developers using Azure App Services, providing a comprehensive set of features for deployment, management, and troubleshooting. By leveraging the Kudu console, you can enhance your ability to manage and maintain your applications effectively.

• Once the kudu console is opened, In the Navbar we can find the Debug console and under that click on CMD.

• Now a list of folders will be appeared. Click on site folder.

• Now click on wwwroot folder to upload the build files.

• Now, Navigate to the file explorer in you system and go to your react application followed by build folder. Drag and drop the build files in the wwwroot folder.

• Now, Navigate back to the home page of your web app service, where you can find the domain URL.

• Click or copy-paste the URL in the browser to see your web app hosted.

• In this way, we can create and deploy a web app in Azure web app services.
• Note: We can use serval services to do this. There are multiple technology stack support and we can integrate with other Azure services as well. This article shows one such approach to creating and hosting your react web app.

Azure Web Apps – FAQs

What is Azure Web App Service?

Azure Web App Service is a fully managed platform for building, deploying, and scaling web apps. It supports multiple programming languages, including .NET, Java, PHP, Node.js, Python, and more. It offers built-in features like continuous integration and deployment (CI/CD), high availability, and automated patching.

How do I deploy my web app to Azure Web App Service?

There are multiple options are there to deploy your web app in Azure web app service including Azure Portal, Azure CLI, CI/CD pipelines, Visual studio.

How do I scale my web app?

In Azure web app services we have two options to scale our application: Horizantal and vertical scaling.

What languages and frameworks are supported?

Azure web app services supports wide range of languages and frameworks including C#, Java, Python, Ruby, .NET, Spring boot and more.