Hello everyone, welcome back to the Azure cloud series and this is chapter number six. So in previous chapter we explored Azure virtual machines. We learned about virtualization, understood how virtual machines work behind the scenes, created a virtual machine, deployed an app on it and accessed it over the internet. So now it's time to move on to another powerful computing service that is Azure app service. This is fully managed platform that allows you to quickly build, deploy and scale web apps and APIs without worrying about underlying the infrastructure. So in this chapter we will break things down like first we will understand what Azure app service is with some realtime examples. Then we will go behind the scenes to understand what happens in the background when we use app service from DNS mapping to the folder structure. And after that we will explore the supported languages on app service. Then we will talk about the CI/CD integrations including the tools and we will quickly discuss the difference between app service and app service plan which is often confused the beginners and finally we will get a hands-on with a real demo where we will deploy a small react app on Azure app service and access it over the internet. So grab a cup of coffee, open up your Azure portal and let's dive into the next exciting compute service that is Azure app service. So let's get started. So let's first understand what is Azure app service is. So basically Azure app service is a platform as a service offering from Microsoft Azure. It allows you to host your web apps, restful APIs and mobile backends without the need to manage any infrastructure. So you can deploy your application code directly on the service and Azure takes care of underlaying the hardware networking patching scaling and load balancing all for you. App service supports multiple programming languages and frameworks like NodeJS, Python, PHP, Java and even static contents. So whether you are building a full stack app just deploying a front end as your app service can handle it. So now let's talk about what happens in the background when we use Azure app service. So imagine a user accessing your app that is deployed on Azure app service. So behind the scenes your code gets deployed into a directory structure inside the app service instance. Typically it get stored like home site under the ww root folder. This is where your static files or build folder for example your index.html HTML, JavaScript and CSS file are hosted. These files are then served to the end user via the app service public DNS endpoint. All this is tied and managed through something called app service plan which is defined the underlying resources such as the pricing tier compute power scaling rules and regions. So now let's understand what languages and framework does Azure app service supports that is NodeJS, Java, Python, PHP, Docker and static HTML, CSS or JavaScript or any front-end framework React, Angular or Vue. And Azure app also support powerful CI/CD integrations out of the box. You can automatically deploy your apps using GitHub, Azure DevOps, Bitbucket, FTP or even manual zip deployment. This makes continuous delivery and version control very easy to integrate in your deployment workflow. And now let's understand one common point of confusion for beginners is the difference between app service and app service plan. So here is a simple example to make it clear. Think of the app service plan as the land and the app service as the house built on that land. App service plan provides the infrastructure like CPU, memory or scaling configuration while the app service is your application deployed on that infrastructure. So I hope this overview give you a clear picture of what Azure app service is and how it works behind the scenes. So now it's time to get our hands dirty and move to the most exciting part, the live demonstration. So let's go to the Azure portal and I'll walk you through the step by step to create and deploy a small React app using Azure app service. So let's get started. So once you log to your Azure portal, you will be navigating to this dashboard. This is the landing page or dashboard of the Azure portal. So as I already covered how to find the services or how to do the global search in my previous videos. So if you have not checked my previous videos so I recommend you to go and check in the virtual machine creations in that I have explained how to do the global search to find a particular service. So now let's quickly go and create our app service. So before that as I mentioned to create any service in Azure you have to create resource group first. So let's create resource group. So let once you click on the resource group you will be navigating to this resource group creation page and here you can either click on this button or just click on this create option and in that let's create a resource group first. So subscription as I mentioned I'm using this pay as you go so it is autoop populated. Now let's give the name that is TA app demo and then the region that is we'll use south India but if in your case you can you want to change then you can change the regions as per the requirement and then and then just click on review plus create and then here or you can review the subscription and the resource group that we enter that is T app demo and the region and let's click on create. So it is the resource group is created now let's close this and go to the home again and then now and now let's uh so as I mentioned in the previously uh we have to create the first Azure service plan and then we have to create app service so let's uh create first Azure service plan so here is the option to create app service plan and let's click on the create. And in that let's once you click on the create you will be navigating to the to this create app service plan and here on the right hand side uh you will get the estimated monthly cost details and then here you can click uh so on the basic tabs there are three tabs so in the basic tab the subscription that is autopop populated. Now let's select the resource group that we have just created that is TA app demo and then let's give the name that is TA react app and then operating system it's Linux then the region that we'll use central India and then on the pricing plan so first let's explore so we are doing this for demo purpose so we'll mostly use the free tire but you can choose as per your need. So in that we'll use this free pricing. So let's select this. So it will be and then memory is 1 GB remote storage and all those things. So now let's click on the select. So the plan is selected as free that is shared infrastructure and then on the zone redundancy type we don't need to change anything for now and then click on review plus create it is it is validating the details that we entered. So if you see the validation is in progress and once that is done then you can create the app service plan. So now the validation is done and you can see the details the subscription resource group then the apps service name. So now let's click on create. So it is starting the deployment or creating the app service plan. So deployment is in progress and if you see the app service plan is created. So now let's so on the overview you will see this tier react app app service plan is created. So once you click you will get the details of it. So if you see the resource group then the status is ready central India and as you and what are the plan that we selected that is pricing plan that is F1 that is free one and then all the details. So now let's again go back to the dashboard and let's start creating the our first app service. So on this app service it will be navigating to this app service creation page. So now let's click on create button. It will ask four options that is web app, static web app, web app plus database and WordPress on app service. We want to create as web app. So let's click on web app and it will be navigating to this web app creation page and you will see the couple of tabs where we need to fill the data. So as so let's fill the basic details. So as I mentioned that is subscription is already populated. So now let's select the resource group that is we have already created that is T app demo and then let's give the name. So we'll give the name that is TA React demo app. So it will be validating the name that we entered and once it is validated then you will see the green tick appear on the right corner of this input. Then now let's publish. We'll be publishing the code. So we'll use the radio as code. Then now in runtime stack we'll use node 20 latest. Then the operating system. So we'll mostly use on Windows operating system. And then the region we will use that it's central India and accordingly our apps or windows service plan is mapped. So you will see this TA app demo is automatically mapped and the pricing that we will use that is the free one share. So now all the details that we entered. So we need to fill all the details as we are creating this web app. So let's click on the review plus create button. It will validating the details that we entered and once that is done then we'll then we'll start creating our web app. So the validation is done and you will see all the details that we entered is present here. So now let's click on the create. It will start the deployment. Now it is submitting the deployment and you will get the current status. Deployment is in progress. And once that is done then we will be navigating to the overview page of this created web app. So now deployment is completed. So now let's click on this go to resource and it will be navigating to the overview page. Here you will get all the details of our web app that is resource group that is status location subscription and this is the default domain of our app. So once you click you will be or your react app will be open on this URL. So currently we have not pushed any code. So now let's go again and searched advanced tool option. So let's click on this advanced tools and now click on the go. It will be navigating to the new browser and in that you will get this plus. So in that we'll to upload the build folder we'll use this debug console option and in that you will get two options that is cmd or powershell. So currently we'll do this for cmd. Let's click on cmd. So once you inside the folder then we have to again go to inside site and in that there is one folder that is www root folder. So let's go inside the www root. Once we inside this root folder then there is one hostinger.html file. It is currently available. So I will delete this. It will ask for the prompt. Let's okay. And then we'll copy our code. So this is the build folder. So let's copy those. And all the files are getting copied and dropped inside their root folder. So now let's close this window and then go again back to the overview and then let's click on the default domain. So it will open our published or deployed React app. So let's click on this and you will see welcome to technarum or our react app is available over the internet. So that's all about the Azure app service. So in this chapter we explored how you can easily deploy and host your applications using Azure app service without worrying about the infrastructure. A quick recap what we covered in this video so far. So we started by understanding what is Azure app service and how it fits into the platform as a service model. Then we looked what happens at the background from file structure to the deployment flow. Then next we discuss the supported language and framework frameworks including node, Python, Java and PHP. And then we finally explored the CI/CD integration options like GitHub, Azure DeOps or Bitbucket. Then we clear up the confusion between app service versus app service plan using a simple example. And finally we wrapped up with a live demo where we created an app service plan deploy our very first react application to Azure. So if you found this video very helpful then don't forget to like, share and subscribe to support the channel and as I always say keep learning, happy coding and I'll see you in the next chapter. Until then, have a great great great