Deploy Angular App in IIS from Scratch

what some YouTube welcome to Cod affection in this video I'm gonna show you how to deploy an angular application into iis before getting into this topic i would like to thank for your paypal donations for my previous books in order to make more helpful and quality tutorials like this you can support me through PayPal donation I have given the donation link in force command and video description so without further ado let get started in order to demonstrate the procedures involved in deploying an angular application to I is I have a system in my network which is here which I have remotely connected which is a fresh system nothing is installed except Windows 10 so I will show how to deploy an angular application inside this Windows 10 I is so that you won't miss any steps now let me minimize this remote desktop connection back to my system here here I have an angular application which we have discussed in previous tutorial the main agenda behind building this application is to understand how to upload and retrieve images into firebase cloud storage so I have given a video a link in which we have discussed how to build this angular image gallery from scratch using firebase you can see the video a link in I chord or you can see in video description or you can see in force comment now let's come to this video here we have the corresponding project angular project for this image gallery before building this angular application for production we have to make sure few points every methods that we have used in this development stage may not work in production for example in order to reference and image inside this IMG control we have given the image reference like this in order to work this in production we have to remove this forward slash which will work in both production and development stages so we have to remove this forward slash while referencing image files or files okay same thing we have to do in this IMG or image component here so we have to remove this forward slash from here you don't have to understand the details of this project just make sure that everything that we have implemented in development States will work in production development also so that is what we have done here we have removed four slash from file references along with that in order to configure this application with five based configurations we have used this file here environment dirtiest inside this constant environment we have saved the file based configuration inside this property here while in case of production development we don't use this type script file environment or TS instead of that in case of production we will use this file here environment dot dot dot t-- s so we have to copy the configurations or properties that we have saved inside this file into this file here so let me copy and paste that here so every properties that we have here inside this environment or TS file should be present inside this portion also now I hope everything works in development stage should work in production also so let's build this application for that let me open one more terminal here in order to build this application currently we are inside the project folder directory so you can run this command ng build now we have to build this project for production so we have to use this plaque prod after that we can name this application using this flag here base - h r EF and it will be something like this forward slash image gallery forward slash so when we deploy this application in now I is we should use the same name image gallery as we have given here so after deploying this application in iis we have to use this prefix image gallery after deploying this application we have to use this prefix forward slash image gallery okay so let's execute this command here so finally as a result of this command execution inside this project folder you can see a new folder dist here let me see that in our project folder so here is the folder list as a result of the build production built inside that we have another fault of this project named image gallery with angular and firebase so here we have the files which is to be deployed in our I is so here we have built angular application for production now let's configure this new system in our remote desktop for iis deployment so first of all we have to open IIS for that you have to use this run command net mg R click on OK currently Windows can't find this eye net MGR command so first of all we have to enable I is inside this application which means Internet Information Service so let me close this window in order to enable I is inside this application first of all we have to open programs and features for that we can use this run command here abbvie's dot Cpl hit enter you only want to enable iis if you can't access is using eye net MGR command so in order to enable this first of all you can open these programs and features using AB this dot Cpl command then click on this turn Windows Features on or off then search for Internet Information Service here which is the full form of I is now click on OK so here we have successfully enabled I is now let's open a is let me close this programs and features window now let's try the same command again I net MGR I net MGR so here we have the IAS manager now let's move to the next step we have to create a new application inside IAS but that you can expand this connections here inside that we have sides inside this default website you can create a new application for that you can right click on it and click on add application then name your application as we have provided inside the command here image gallery so few minutes gallery now we have to copy the files which we have generated as a result of production build so let me copy all of these paths from here then back to the remote connection here and we have to copy that inside the C Drive so here we have the C Drive inside that I'm gonna create a new folder image gallery inside then I will paste all of those files now back to iis and we have to mention the physical path here so inside see we have image gallery we have selected the folder now click on ok so that's it now click on ok so here we have successfully deployed our angular application now let's look how it looks like in production environment for that you can click on this browse button here so that it will open this application in our browser currently we only have this default web browser ends and here we have the angular application we have loaded this application from localhost by default it will be from the port number 88 0 and followed by the application name image gallery and here we have the route that we have configured inside the angular application now we have a problem if you reload this application here we will get an error of the type for not for it means we have to configure I is further you can see the same or even if you copy this URL from here and then try to load that in another tab here this is because I is do not allow them linking by default so we have to configure this iis or this application for deep linking so that we can access the application after reloading or after manually typing the URL in web browser so in order to fix this problem we have to install an IAS extension URL rewrite so first of all let's search for that hi yes you are rewrite so here is the corresponding link have given this link in our video description now click on this install this extension button we have successfully downloaded the file now let's turn that if you are trying to install an IAS extension for the first time first of all it will install Microsoft web platform installer so currently we are installing web platform installer which is required to install any extension into I is now we can install you I'll rewrite so click on install then I accept this license and Terms so here we have successfully installed the extension now click on finish exit from the web platform installer now inside this is you should see the extension URL rewrite only if you restart this is manager so let me close this now let's launch this is manager again from command I net MGR so you can see the extension URL rewrite okay now in order to fix this problem we have to do one more thing we have to add web config into this image gallery deployment folder so let's create a web config file for that right click here the new text document then I will name it as web dot config even though you can see that it is considered as a text document instead of configuration file so in order to fix this go to view then check this option here file name extensions we have to change this extension into config let's confirm the operation inside this file inside this file we have to give an XML document for now I will paste the XML code here so here you can see the URL rewrite into this prefix forward slash image gallery so this is what we want to do I will give this web config XML in my video description you can copy from the now let me save this let me close this then back to this tab here let me reload so inside this image gallery here we have deformed to upload an image and here we have the images that we have uploaded so far currently we have nine images recently we have uploaded this cat image now let's check if it works after deployment in order to upload a new image you can click on this dummy image for navigation it will take you to this form for image upload currently inside this fresh system I don't have an image so I will copy that from my system here so I will copy this image and I will paste that inside this system desktop here and back to the application browse for the image it is inside the desktop let me select this click on open so here we have the selected image preview now we have to give a caption for the selected image it will be rabid corresponding image category will be animal now click on submit since for MS we said to its initial state it should be uploaded let's check that inside the gallery here go to gallery so here you can see the newly uploaded image for rabbit so that's it guys in this video we have successfully deployed an angular application with firebase to I is hope you found this video helpful in order to make more helpful and quality tutorials like this you can support me through PayPal donation I have given internationally enforced comment and video description please like and share this video with your friends and colleagues so that they can benefit from this have a nice day bye

Channel: CodAffection

Views: 42,703

Keywords: deploy angular app to IIS, host angualr app in IIS, angualr IIS url rewrite, deploying an angular app, how to deploy angular app to IIS from scratch, angular build for production, angular 404 error after deployment, IIS url rewrite for angular, IIS web config for angular url rewrite, CodAffection

Id: Px6Va5VKMl8

Length: 13min 26sec (806 seconds)

Published: Mon Jun 10 2019