Building Simple Angular6 app and deploy it to IIS

In this blog post, I will show how to create a demo Angular application and deploy it to IIS.

In this blog post, I will show how to create a demo Angular application and deploy it to IIS.

Angular is a front end MVC framework use to build modern single page applications. In this post we will get you started with setting up your windows environment, creating simple angular app and deploy it to IIS. This article is written considering you are using windows machine as your development machine.

1. Setting up

The first thing you have to do is Download NodeJS for windows and install it. If you are not sure if you already have NodeJS in your machine, you can run following command to find it out:

node --version && npm --version

If you see version message, that means you already have NodeJS installed. If not, go ahead and download it from above link, install it and restart your machine. Run the command again to make sure you see installed version message.

2. Installing Angular-CLI

Angular-CLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. You can install Angular-CLI using following command:

npm install -g @angular/cli

3. Create a simple Angular6 Application

Open command prompt and locate to the path where you want to create a new application. Run following command to create a new Angular6 Application:

ng new my-app

Once the application is created, you can run following command to run it:

ng serve

4. Publishing Angular6 Application

Use following command to publish your Angular6 Application

ng build --prod

Once the publishing process is finished, you will see a dist folder in your project root that will have a published Angular6 application. Files under that folder will be deployed to your server for hosting it as a production website. In real life, applications are much more complicated but since our focus is to understand the process of deploying to IIS, we are using a basic Angular application for simplicity.

5. Deploying to IIS

• Download and install Microsoft URL Rewrite Module 2.0
• Create a new web site under IIS and point it to the folder under your dist folder which is generated after publishing Angular6 application
• Change application pool to use "No managed code" option.
• Add web.config with following content in the root folder:

5. Testing

That's pretty much it. You can now try out your IIS site that is up and running.

Conclusion

In this article we created a dummy angular application, published it in production mode and deployed it to IIS to demonstrate how you can deploy your own real-life angular application in IIS.

I hope this helps!