Deploy React app to Azure App Service. Deploy website to Azure app service. azure website deployment

Hello friends I am Muk Singh in this video uh we are going to deploy react uh JS app to Azure app service so Azure app service is a fully managed app service from Azure where we can deploy any kind of application like net Java nodejs and in this case reactjs is a nodejs application so we are going to deploy it to app service and in a we very easy way so let's get started as you can see here I'm already logged in into Azure portal so for creating web uh app Service uh we need to go here app Services then U now we have this create plus button so create and web app so here uh uh I'm not going to create a new new Resource Group so I'll uh I'll selecting the pre uh previously created Resource Group and here we have to give a globally unique name so I'm giving just my name uh and uh app so as you can see this uh green tick it means it's available so I can use it so code and run time as a runtime uh I'm selecting node uh 18 and operating system as uh Windows uh region as us East and uh here I'll Windows plan I'll leave it as is and uh here in uh pricing plan I'm taking basic uh you can uh uh take it anything based on your requirement and after that I'll uh uh just leave everything as is and hit uh review and create uh so now review is done I'll hit create uh it will uh uh take some time so I'll uh just come back once uh uh the app service is created so now uh you can see uh the resource is uh created so I'll click on go to Resource so when we come here we we see this uh default domain so it uh it is provided by Azure a default domain so if I'll click here it will open a default uh hosted website a default page as you can see it here so now what uh we want to do is we want to replace this one uh this uh uh statically hosted uh uh page uh default page uh with our uh uh reactjs uh uh uh website so so as you can see here already uh I had created this uh uh reactjs uh project uh using nextjs uh framework uh so already I had created the build so if you see here I I just ran uh uh the npm uh uh run build command so uh maybe for your S I can uh run it again so npm run build so as you can see it is a building and uh finally optimizing uh pages and everything so what it does is uh it will create uh uh this out folder and all the uh build file like the production build files are stored it here so what we want to do is we want to uh uh replace those uh static content which Azure has provided uh with our our application so so for that purpose uh I'm back into uh Azure portal so if we scroll down here we have this Advanced tools so in advanced tools we open that advanced tool in advanced tool we have uh debug console so debug console and it provides two options CMD or power so I choose CMD and here you see the site and inside site uh we have this www root folder and here this is the default hosted page so what we'll do is we'll uh uh delete this one and uh replace it with uh the our content so delete okay here you can uh see we have this out folder so what we'll do is we'll go to this out folder and we drag everything and uh drop it here so I'll just select everything and uh drop it here and as you can see everything is uh uploaded here so if I go to this here and uh if I refresh so now you can see uh uh get started to deploy with Muk Singh so yeah so thanks everyone thanks for watching and please do like share and subscribe to my channel thank you

Channel: TechWorld with Mukesh

Views: 3,870

Keywords: react, azure, azure app service, website, deploy, cloud, nextjs, next

Id: C5rtNyOHhnM

Length: 6min 19sec (379 seconds)

Published: Mon Jan 01 2024