Angular 15 deployment in IIS Server | Hosting angular in IIS Server | Nihira Techiees

Hello friends welcome to my channel Hira techies and in this video Let Me Explain how to deploy our angular 15 application in the IIs server the step is very simple first we have to generate the Builder file using this NG build command let me go to my application okay basically it will take some time so meanwhile we can open our IES server so here in this side section just right click and add website and then provide the site name I am providing material UI then in this physical path so let me create the deployment folder so inside the deployment let me create one more folder angular okay so from our IA server we can choose this path deployment and angular so let me click OK and the port number defaultly we can see this 80. So based on your available Port you have to change the port number I am providing 83 then let me click this is okay and the next in the Apple section so we can see this material UI and the Dartmouth CLR version is 4.0 but actually our application in angular so go to the advanced settings you can add this one the basic settings so here you can see this dark mode CLR version just to change this into no managed code okay then we can click this okay server point of view we almost done so next let me go to our application okay so here I am getting the warning bundle initiation exceeded and also one error so the expected limit is around 1 MB but it is crossed around 1 to 7.63 KB so in this case just go to your angular.json so here we have this budgets so in this area we can just increase the volume okay so instead of this 500 KB let me give 1 MB or else we can give 3MB that's fine at the maximum error scenario we can give 5 MB because our application size is Big so that's what we are getting the files like this so we can save this one let me execute the NG build once again okay see the bullet file is generated now what we supposed to do just to go to our application folder okay this angular material so inside that we have this disto folder okay this is our build file okay copy all the items and go to our deployment folder copy all the files just to refresh it now in our IES server just to restart once again and click this browse link okay see our application is hosted the same URL I am trying to open in The 8G browser also see it will work so if I am trying to click some other menus see auto complete and home everything is working so in this autocomplete yeah the details are loaded so if I'm typing something see it is working but still we have one problem because we hosted in the IES server so we have to set the rules for rewrite otherwise if you are refreshing the screen it will throw the error see the same issue we can reflect in our Google Chrome also the home page I mean our base page it is not a problem if you are in some other route then it will show the error okay now let me go to the IAS server once again so here we have this URL rewrite option right so in case if you don't have this option just to go to the browser and type like URL rewrite download go to the first link so in this bottom we have the option download URL rewrite model 2.1 and in this section So based on your system configuration download 64 or 86 installer and the download and install it so once it is installed adjust the ratio duration so obviously so the rewrite option enabled in our IES okay and the next thing is we have to include one web config file there only we can Define our rewrite rules so just go to our deployment folder and right click and add one text to documents and provide the name is web config okay just remove this text extension okay now it is the pure web config file just to right click and open in the notepad so here you have to include some codes so that actually I will add in the description so you have to use it and here we have to provide our base URL okay so let me save this one and we can close this one so let me refresh this one and again in our ISR also we can restart once again so now I am going to refresh this one okay see now it will work so even though you can go to the slider and here I'm trying to refresh it will work not an issue and one more Ur line on the table see even the datas are also loaded if I'm trying to click this edit I am able to get the datas and if I'm trying to add some data so that also will happen test see 32 31 the count also getting increased and if you are following my angle material videos so you know I have used the Json server IP you won't like so you may have the question whether our Json server will work with an IA server definitely no then you may have the question then how our application is working because in the locally I have run over Json server APA it is in the running mode so that's why our application is working so in case if I'm trying to stop this one Let me refresh the screen see none of the data is loaded so hope you got some idea so in this real time scenario like you are deploying somewhere make sure you should have the valid APA okay so that is a very important thing at the base URL okay here the base URL is just empty one so instead of that if you want to provide some basic URL also that we can manage so in this case uh while generating the build itself we have to provide our base URL so initially I have created the build using this NG build so if you want to give the base URL then add like base href and space then you have to provide our base URL I am going to provide material UI so let me enter once again okay see the build file is once again created so let me check in the disto folder we can copy all the items now let me go to my deployment folder so here we can replace the files okay so the web config file that actually we have created manually so we can keep the world on okay next we can go to our is server just to restart this one and see the basic URL I'm not provided anything if I'm refreshing the screen see this material included so if I'm browsing some other menus also it'll be there okay okay great now we are in the end of the video still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 3,352

Keywords: angular 15 deployment in iis server, angular deployment in iis server, angular 15 hosting in iis server, angular hosting in iis server, how to deploy angular application in iis server, how to generate build files in angular appliaction, how to handle url rewrite in iis server, create site in iis server, angular build with base href, bundle initial exceeded maximum budget. Budget 1.00 MB was not met, bundle initial exceeded maximum budget. Budget 500.00 kB was not met

Id: yrUCWuPAmS8

Length: 9min 19sec (559 seconds)

Published: Mon Apr 24 2023