Build and Host an Angular application on IIS


In my previous blog, I wrote about CRUD operation in Angular with .Net Web API. In this blog, I will write about building and then hosting an Angular application on IIS.

In the development phase, we use ng serve command to run our Angular application with localhost URL.
But, do we have to do the same process for a production environment? The answer is absolute no.

Build an Angular App for Production with ng build command

Angular CLI provides various command to perform their specific tasks. To create a project package for production use below command -

ng build --prod

This command will take a few minutes and create a folder with name dist and keep all related files in this folder.

Run - ng build --prod command


Once command completed successfully, it produces output like this.


That's all you have to do to set your Angular project for the production environment.

Note: Once you open index.html file, you can find all .js and .css file name which are parallel to index.html file

You can do more with ng build command.

Suppose you want to change your base href. For example you don't want to run your Angular application from the root, instead, you want to run with a virtual directory, then run below command -

ng build --prod --base-href /angulardemo

Once your command completed successfully, you may check index.html in the dist folder. You may see base href value is set as per your command. So to host your Angular application on IIS, you have to create a virtual directory with name angulardemo.

Options available with ng build command

There is numerous option available with ng build command. But below are the main and useful option that can be used.

Command Name
Description
Example
--base-href= baseurl
It sets the base URL of the Angular application
ng build --/angulardemo
--extractCss = true | false
The default value is false. If it is true the  css extracted in a stylesheet file instead of js file.

ng build --extractCss
--prod = true | false
When it is set to true, it sets the build configuration for production target.
ng build --prod
--watch= true|false
It starts building the project as soon as there is a change in a file. The default value for this option is false.
ng build --watch
--aot = true | false
Build using ahead of Time compilation
ng build –prod --aot

How to host Angular application on IIS?

Once the application is ready for deployment, we will see how to host it on IIS. Basically, if you would have done hosting the website on IIS in past then it is very easy for you. There are no differences in hosting an Angular application or normal HTML website.

Follow the below steps to host your Angular application on IIS

1. Open IIS by running inetmgr command.
2. Expand up to Sites node.
3. Right-click on Sites node. Click on Add Website
4. Give a name to your site
5. Provide a physical path.
6. Assign a port which is accessible to you.
7. Click on OK

That's all, you have to do it for hosting an Angular application on IIS.

Select your site from the left side panel, and click on browse from the right-side panel.
And yes, if you have done it in the right way, your application will work like a charm.

Hope you like this blog.
Please share this blog on social media and give your feedback in the comment box below.
You may like other blogs -

Interview Questions and Answers Series -

MVC Interview Questions and Answers
Web API interview questions and answers

Prev - Angular CRUD Example with ASP.Net Web API

Comments

Popular