Easily Create and Deploy a React App From Visual Studio Code to Azure App Service

hello and welcome to our Channel my name is balram Prasad and I am working with Microsoft as a senior software engineer in this demo we are going to see how we can create react app inside Visual Studio code and how we can deploy the create app to Azure app services for that we need to have node and npm install on our machine I have already installed let's see that I have which version of node I have 18 person install and then I can see which npm person is installed so I can run that one I can see that it's installed and then I can same pass version information to check which version is that so it is 9.5.1 if you do not have npma node install then you can go to nodejs.org and then you can download whatever version you want and which type of package is either zip packages MSI based on what operating system in CPU bit size you can download and install on your machine and then you can get started so next command I am going to run called npx create react app and then we have to pass project name which is software's react demo and I am going to use the template for typescript now if we go inside this surface demo where I am right now inside and we if we see that one we do not have that folder packages so let's start this so now it is going to create that folder and required file and all the packages which required for that one so let's see that one right now only one file is there but it will download now and all the packages will come into proper template file we will see what are the files and what are the folder structure look like so now we can see that our Command is completed and it says that by you can go inside that folder and you can start with npm start and if we go inside our folder structure we can see that command has generated node underscore models where all the npm related packages will be there and then we can see other things that there are public folder where some of the files which is which should be public that is kept and we can modify and delete whatever required depending upon our use case and there are SRC folder where csys file txx file and other files are there and then some other files where packages files package lock and TS config and other things so we can go and run that one but before that if we see that one we can see all the folder from here's also but I can go inside that folder to see what is there let me select that and now we can see that TS config is there where all the configuration related to TS PS is typescript so type script related configuration we have one readme file also to read that how to start and how to test how to run build and all the details is being generated so this is good readme file we can read and use that and then we have package Json where all the dependency packages in depth dependency and deployment dependency files are there and some of the script is there and it will start with we have one index.pasx file where it has the react app starts with that one and then it will go to app.tsx where this file is there so this is how the basic structure will look like we can put the test cases inside test.tsx and all the CSS related things will come here and then we can have component and all the different things when we will go in next videos but right now I am going into terminal and then I can see that hey npm start at suggested right so now it is a starting development server then we can see that what is the page now this page looks like this is our page for reactor so now if we go inside app.tsx and if we see that hey let's see that will come to software's demo right and I will save that one it is right now compiling and then if we go and see that welcome to surface demo game right all these details are came coming so I can go ahead and remove whatever I want to remove it will remove only this uh logo logo is coming from App logo we can remove that one if required so let's go ahead and remove that so now we can see that updated page is coming now let's go to our base code now let's add one web dot config file that is required if we are going to deploy inside app services so I am going to add that and I am going to put this content which says that about routing rules required for react application to be working fine into Azure app services so that I can do let me save this file so once we add web.config inside public folder I am going to I'm going to run another command called in team run build which will generate a optimized build to running on the production which will generate one folder here you see right now build folder is not there so right now it is coming and we can see all the file will be moved on to promote place and then we will see another files also so now it is done so now let's go and create a app service so right now inside our RG we do not have app service we have other app services for this demo I am going to create a new web app and let me create a new web app for that feed create demo BS okay and then I'm going to create in this Resource Group node 18 LTS and windows now it is asking for creation of app service or select whatever we have so I'm going to create one and it will be free to here right now it is asking for application inside the sources I am going to skip for now now it is creating a web app now we can see that plate web app is succeeded and we can see this deployment pop-up let's go to this uh Resource Group and we can see our resources let me browse that one it will be default page right now let's go and try to deploy that I'm going to click on deploy now it is asking that one which folder we have to deploy so we do not have to deploy from root because root will contain code in other things so I'm going to browse and build is our place where we have optimize build for production so I am going to select that it gave some error or it but it is also asking that one that always deploy a workplace from build yes so I'm going to say yes and let's see that if it is coming something into output it gives some error but if we go one more time into setting we can see that uh there are setting came that this is that app service where it is going to deploy and it is going to deploy from build so now we can go one more time to build and from there also we can see deploy to web app or we can go to our app service and refresh this app service so that we can see our file here and we can deploy from uh this place also so let me deploy from this place now it is a starting deployment so it is going to zip everything and let's go to we are into output section only so it is going to zip everything it is going to upload and then it is going to publish all the files so it will take some time so let's wait now we can see that this files are being added and uh it says the successful it was quick deployment because all these files are pre-built for this purpose we ran command in PM run build right let's go ahead and browse website and now we can see that our website is up and that is how we can create react web app into Visual Studio code and we can deploy to Azure app service very easily I hope you will like this video thank you very much [Music]

Channel: SoftWiz Circle

Views: 3,392

Keywords: react app for beginners, react app development, react app from scratch, react app deployment, react app project, react app tutorial, react application, react on azure app service, react azure web app, deploy react on azure, react app on azure, host react on azure, react with vscode, azure app service, app service, azure app service tutorial, create react app for beginners, react app tutorial for beginners, create react app tutorial for beginners, microsoft azure

Id: y29wev_FuR4

Length: 9min 24sec (564 seconds)

Published: Tue Jun 06 2023