Deploy angular application on IIS Server

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.

So, what we are basically going to do with our Social Angular Application is we are going to build our application for the production server. What sort of things will happen during the build, Angular CLI will compile all typescripts code to JavaScript, and bundle them to one or more files (as the browser cannot understand typescript), bundles styles into one or more files and moves all these files and images to a separate folder dist. Let’s see them practically for clear understanding.

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.

Note: We have used Social (you can give any meaningful name you want) after href, this name should be used as an alias on the IIS server during setting.

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.

Index Development

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.

Dist Created

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.

Dist Folder

Open Index.html in the editor and look for the base href value, you will find the value is set to /Social/

Index Prod

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.

LiveSpace

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.

IIS

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.

Add Application

A Social Application is now hosted on the IIS server. Right Click on Social, navigate to Manage Application and select Browse.

Hosted

Hurray, we have successfully deployed our application on IIS Server.

deploy angular 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.

2 thoughts on “Deploy angular application on IIS Server”

  1. Pingback: ASP.NET MVC - Custom 404 page for invalid request - code-adda
  2. Trackback: ASP.NET MVC - Custom 404 page for invalid request - code-adda
  3. Pingback: Deploy Angular App On Tomcat Server - code-adda
  4. Trackback: Deploy Angular App On Tomcat Server - code-adda

Leave a Reply