Deploy angular app to IIS

this is part 26 of Anglet zeolite tutorial in this video well discuss deploying our angular application to IAS server let's look at the steps required for this naturally the first step is to build our angular application we can either deploy a development build or a production well in our case let's deploy a production build so the first step is to do a production bail so to do a production world we use this command ng build along with - - prod option notice we are also using the base hf option here so what is this option going to do this is going to set the base h ref element in our index dot HTML - 4 /e portal 4 / by default the base hf element value index dot HTML is a single four slash now the important point to keep in mind is whatever value is specified for the base href element we have to create an application with that name in our is so the base edged of element value and the is application name should match in just a bit well create an application with this name in IAS but before that that's to a production Perl I have this command already typed within the command prompt window before we execute this lets fix an error that we have within our home component in our home component class we have a function called cat text and if you look at that function here we are missing that letter D so let's fix this error save the changes and then do a production world there we go our production build is complete now if we take a look at the dist folder that is generated within that we have our index dot HTML let's open this with notepad and look at the base href element value notice the base href element value right here it is set to 4 /b Potter 4 / as expected the next step is to create a folder on the server where you have is installed and copy all the contents of the dist folder into that folder in my case I'm going to deploy the application on my machine itself so I have already created a folder within my C Drive and I named this production Bell so into this production build folder I'm going to copy all the contents of the dist folder remember this dist folder contains our production world so I'm going to copy all these files into our production build folder in our C Drive the next step is to create an application in IAS and point that application to the folder that contained the build files in our case we have to point the application with an IAS to this folder C colon backslash production Val and notice here we named our application with an IAS eport all remember this has to match the value that we have specified for the base href element so let's do this now to open is the easiest way is to launch the run window and then type this command I net MGR and then click OK so this is going to launch is so with an IAS expand it root node and then expand the sites folder right click on default website and then select this option add application from the context menu and the application name is ephoto and we want to point this application to this physical folder c colon production world and then click OK there we go our is application with name I portal is successfully created now let's launch our application within the browser to do that right click on the e-portfolio sir in my case the default browser is Google Chrome and look at the URL right here localhost a portal is the name of our application with an IAS and we have the home rod so we see the message homeworks when I click on employees we see employees works it appears as if everything is working fine but we actually have a problem now when I click on this reload this page button look at what happens we get 4:04 to fix this error we have to include a URL rewrite rule in web dot config file as you can see this rule rewrites all requests to this URL for /e portal of course with a few exceptions at the moment but no production build folder we don't have a web config file so let's add a new text document and then change the name of that to web dot config and within this web config let's include the URL rewrite rule that we have seen on the slide so let's open this with a notepad and then paste that same rule save the changes and close the file now let's go back to a web page and when we reload this by clicking the button notice it now works as expected now if you're wondering why did we have to create this separate folder production build and then make our eius application point to this folder why can't we point our is application directly to the dist folder within our routing demo project folder this test folder contains all the required build files so why can't we make our is application point directly to this dist folder well there's nothing stopping us from doing that the only downside is if we have our web config file within the test folder every time we do a new build we know this test folder will be deleted and recreated that means we will lose the web config file so every time we do a new bill we'll have to copy the web config file with the URL rewrite rule into the test folder so if you don't want to lose your web config file then choose a folder other than the dist folder maybe something like this production build folder if you are ok with copying the web dot config file every time you do a new bill then probably can make your is application point directly to the dist folder which approach you choose depends purely on your personal preference thank you for listening and have a great day

Channel: kudvenkat

Views: 114,156

Keywords: angularjs 2 browser refresh not working, angularjs 2 refresh page 404, angular 2 deployment iis, angular 4 deploy to iis, angular deploy to iis, angular not working in iis, angular not running on iis, host angular app in iis, angular deployment to server, angular application deployment, angular web app deployment, angular iis url rewrite, angular iis 404, angular iis web.config, iis angular not working, iis angular 2 rewrite

Id: VkGmaVm6-IQ

Length: 6min 32sec (392 seconds)

Published: Thu Nov 30 2017