Create a Node.js web app in Azure with Visual Studio Code and App Service

hello guys welcome back to our Channel my name is balram Prasad and I'm working with Microsoft Edge senior software engineer and in this demo we are going to see how we are going to create a node.js web app using visual studio code and deploy to Azure app services this is the number from stack Overflow developer survey 2021 where we can see that node.js is one of the widely used languages uh in the world that's why I thought that let's see how we can deploy a node.js into Azure and how complex it is so let's see that so we are into Azure portal in Resource Group named node demo where we are going to create a node where we will create app services and hostnode.js web app so let's see that one for that we need to install node.js and npm so let me install node.js with npm go to node.js.org and then we can go to download section and then let's download Windows installer let's run this let's finish now let's go to visual studio code I have already installed Visual Studio code first so let me create one folder this will be my root folder let's try to see that our in beam runs also not so yeah it is running in pm so we can also see that which version of node is available so we can say that node in on the partition command we can see that 18.14.2 which we have just installed so that is okay now let's use one Express with a node itself one express application generator tools comes so I am going to run that command for now and the command if we see so we are going to run npx tool and using Express generator to generate our web app and name is my Express app we can change that um let's see that soft page Express app so let me generate that let's install that package now let's see this this folder has been generated this is the package and other things so I will go inside this folder now let me go and let me open internal one more time and let's install all this packages which is into my package.json with the command of npin installed so I'm going to install all this there are few issues with these tools this packages but I'm going to keep that one right now I'm not going to fix it now I can go ahead and run another command to run this web apps let me try to install this app with income start let's try to browse equal host now we can see this Express app is running now if I go ahead and try to change anything let me see this is our index one let's try to see that change will come to scarf page and save this now it is getting all the details and if we go and refresh that one I can see that update is there uh let me replace once more time so this is how this page is looks like now let's go ahead and deploy this node.js app inside Azure so I'm into Azure extension into visual studio and then I am going to select inside my subscription and I will go inside app services and I have few application but I can go ahead and create from here right now it is not given option so what we have to do that we have to go and say that in extension app Services one let me try to select app Services Azure app Services let me install this extension now it is installed let me go ahead and refresh this now I can see this option and now I am going to create uh with this Advanced option and it is asking to give a globally unique name I can keep that same name for whatever we have given for our application and I guess that should be there so now it is asking which resource Group so we have a resource group called node.thenode demo no demo where no resources is present so let me select that and it's in saying then which runtime mistake so we have installed node 18 so I am going to select node 18. and windows or Linux which version so we did on to Windows so let's select windows it says that create a new web service plan let's create that yeah and let's see that which one so it is saying that free is recommended so we can go ahead and select the free one only and it says that you can skip application inside creation or create in that one so I am going to skip for now now it is going to create a web app with this service plan we can go ahead and see in the deployment section if it is trying to deploy with arm another thing if it is trying to deploy with power cell then it it will be not coming here now it is coming that it apps that this plan has been created now let's see what is that this says that app service plan written successfully so let's see I see this app service there is apps one app this is app is here so if we go it is coming here now to it takes little bit while so now I am going to deploy if I browse right now this app sub is so default Azure page will come because we have not deployed anything so let me go ahead and deploy this one from Visual Studio code it's and it is asking a folder so this is what our folder is there we have this web app so let me deploy that yes see what happened so let's see if it deployed anything or not because it throwed an error so now so let's see one setting we have to do in the application setting let's add one setting and this setting this is this key we have to provide and uh what should be the value so let me put the value so we can see that settings here now and now we can go and see that it's one more time deploy to web app what is your want to okay deploy let's see in output window what is happening here so ensuring this exist creating web it happened it was that last time it was some error came during the refresh of the property now it is zipping all these things and committing all the code from local and now it is trying to deploy that one so let's wait for some time it is copying all the required files it says that deployment is successful we can browse the website and if we browse website our page should come here it page again so we can see it from here and if we go into our first page which was here I can go ahead and replace it is coming right now if you browse from here it is coming so we can make any changes from here let's go ahead and quickly make one change and let's see that V1 right and now I'm going to say one more time that into app services and deploy deploy now it is again starting to do all the activities now it says that deployment is succeeded you can go and browse this is V1 let me replace the older ones this is also v1's all the older one this is localhost which we have all this V1 so this is what I wanted to show you that how we can deploy a node.js application web app from Visual Studio code very easily into azure thank you [Music] foreign

Channel: SoftWiz Circle

Views: 10,387

Keywords: azure app service tutorial, azure app service, app service configuration in azure, app service, Node.js web app, Node.js web app in Azure, how to deploy node, how to deploy nodejs app, how to deploy node js, node js website, node js web application, node js website project, node js web app, node js website tutorial, node js web app tutorial, deploy node js on azure, how to deploy node js application on azure app service, azure node js web app, node js website example

Id: SSIz69ur5do

Length: 10min 28sec (628 seconds)

Published: Thu Mar 09 2023