Hello everyone, in this article we are going to learn how to build and deploy Angular application on IIS Server with the help of angular CLI. In our last article we have developed an Angular application with third-party tools i.e bootstrap and font-awesome and also have one image. If you have not gone through this article Creating Angular Application using bootstrap, recommend you to first cover up that article as we are going to use same application that has been created and explained in the previous article. You can also download the source code from Github.
Open the terminal and switch into Social project directory using cd Social, once you are in the Social project directory run the following command to build our Social Application.
ng build --prod --base-href /Social/
Above command is telling Angular CLI to build the application for a production server with the base href /Social/. By Default during setting up the application the base href is single slash (/). If you open Index.html of our Social Angular Application, you will see something like this.
After building if we now look into our project directory Social we will find a folder has been created with the name dist. Under this folder we have all the compiled and bundled files, images and other necessary files that will be hosted on the server.
If we look into the dist folder, assets folder contains folder and images that we have used in our application, font-awesome files, styles.css contains bootstrap CSS bundled and minified with other styles in the same styles file.
Open Index.html in the editor and look for the base href value, you will find the value is set to /Social/
Ok now we can do one of the two things, when we will create an application on IIS Server and either we point it to dist folder, or we will move the files from dist folder to a separate folder and point the server application to that folder. My Choice is the second. The reason why I prefer this because whenever we modify our Angular Application, we have to build our application, and during build dist folder will be deleted and a new dist folder with the newly compiled files will be generated. If we have done any mistake during the development we might lose the previously compiled files, if we haven’t created a backup. Also, we might have set up config file when hosted, and if we point the IIS application to dist folder, we will lose the config file during build.
So, let’s create a new folder in C: drive naming LiveSpace(you can give any meaningful name) and add one more sub-folder naming same as our Angular Application, in this case, Social. The second folder is just to separate our applications, in future when we are going to build more applications, we will place the compiled files in the LiveSpace folder under a different subfolder. Now, copy all the files from dist folder of the Social Angular Application and paste them in LiveSpace/Social folder.
Next step is to deploy an angular application to IIS, open IIS Server, type inetmgr in the run window and press enter, this will open IIS server. On the left-hand side, expand Sites, Right click on Default Web Site and Select Add Application.
An add application window will open, Type Social in the alias(remember the name that we have set for the base href during the build will be typed here) and under Physical path point to the folder where we have copy pasted the files from the dist folder. Press OK.
A Social Application is now hosted on the IIS server. Right Click on Social, navigate to Manage Application and select Browse.
Hurray, we have successfully deployed our application on IIS Server.
If this article is meaningful to you and meets your requirements, do share with the colleagues and subscribe to our blog. Thanks for reading.