angular-iis-deployment.md

Angular Frontend & SSR Deployment on IIS

Videos

Angular Front

Deploy angular app to IIS - YouTube (Kudvenkat) https://www.youtube.com/watch?v=VkGmaVm6-IQ

Angular 15 deployment in IIS Server | Hosting angular in IIS Server | Nihira Techiees - YouTube https://www.youtube.com/watch?v=yrUCWuPAmS8

Node.js with IISNode

How to install IISNode on Windows - YouTube https://www.youtube.com/watch?v=JUYCDnqR8p0

IISNode GitHub: https://github.com/tjanczuk/iisnode

URL Rewrite for IIS: http://www.iis.net/downloads/microsof...

You can read my blog post on how to install IINode here: http://harveywilliams.net/blog/instal...

The GitHub gist for the IISNode basic setup is here: https://gist.github.com/harvzor/a6078...

How to deploy node application in IIS | Deployment | IIS | Node JS | Tutorial 8 - YouTube https://www.youtube.com/watch?v=WJhpIbUFwo4

Angular SSR Netlify

Converting an Angular SPA to SSR with Deployment - Angular Universal - YouTube https://www.youtube.com/watch?v=juvYWRrLtAg

• GCP => Angular University SSR course

Blogs

Angular: Deploying Angular 9 Server Side Rendering on an IIS Server using Web.config https://copyprogramming.com/howto/angular-9-universal-9-deployment-on-iis-server-with-web-config-how-to-deploy-angular-9-server-side-rendering-on-iis-server

IIS Hosting Nodejs Application. Prerequisites: | by Adrian Jenkins | Medium https://adrianjnkns.medium.com/iis-hosting-nodejs-application-572d81689f9e

Deploy Node JS application on IIS | by Adarsh Dayanand | Medium https://medium.com/@adarsh-d/deploy-node-js-application-on-iis-9703d5dfcaca

Enable IIS and Host nodejs application on IIS | by Unlikelycreator | Medium https://medium.com/@unlikelycreator/enable-iis-and-host-nodejs-application-on-iis-a27058e1ca79

Remote Debugging Node.Js apps on IIS with IISNode (setup for Express 4) Part 2: NTVS | by Bogac Guven | Medium https://medium.com/@bogac/remote-debugging-node-js-apps-on-iis-with-iisnode-setup-for-express-4-part-2-ntvs-5eabe99d2ae9

Outlines

> ng build production --base-href <your-app>

When deploying an Angular application to a production environment, it's essential to build the application with the correct configuration to ensure optimal performance and compatibility. The ng build --prod command is typically used to build an Angular application for production. Here's why it's important and what the --prod flag does:

Optimization: The --prod flag triggers a series of build optimizations that are crucial for production deployment. These optimizations include minification of JavaScript, CSS, and HTML files, tree shaking to remove unused code, and Ahead-of-Time (AOT) compilation of Angular templates. These optimizations result in smaller bundle sizes and faster loading times for your application.

Environment-specific settings: When deploying to different environments, such as local development, staging, or production, you may need to configure certain settings specific to each environment. The --prod flag uses the production environment configuration by default, which typically includes settings optimized for performance and security.

Base Href: The --base-href option allows you to specify the base URL for the application. This is important when deploying an Angular application to a subdirectory on a server, such as when deploying to a specific path on IIS. Specifying the correct base href ensures that Angular's router and other resources are correctly referenced relative to the application's URL.

So, when deploying an Angular application to IIS or any other production environment, it's recommended to use the ng build --prod --base-href command to build the application with production optimizations and configure the correct base href for the deployment environment. This ensures that your application performs well and functions as expected in the production environment.

Here's how you can configure IIS to redirect requests to the main index.html file:

Open the IIS Manager.
Select your website or application.
Double-click on "URL Rewrite" to open its settings.
Click "Add Rule(s)..." and select "Blank rule" to create a new URL Rewrite rule.
Configure the rule with the following settings:
Name: Enter a name for the rule.
Match URL: Set the requested URL to .* (matches all URLs).
Conditions: Add a condition where the input {REQUEST_FILENAME} does not match a file.
Action: Set the action type to "Rewrite" and specify the rewrite URL as /index.html.

To configure URL rewriting and handle 404 redirects in the web.config file for an Angular application deployed on IIS, you'll need to add a section within the <system.webServer> section. Here's how you can do it:

Open or create the web.config file in the root directory of your Angular application.

Add the following XML code inside the element:

<system.webServer>
    <rewrite>
        <rules>
            <rule name="Angular Routes" stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="/" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>

This configuration sets up a URL rewrite rule that redirects all requests to the root index.html file of your Angular application, allowing Angular to handle the routing internally.

Save the web.config file.
With this configuration, any requests that do not match an existing file or directory will be rewritten to /index.html, effectively routing all requests to your Angular application. This allows Angular to handle the routing internally, including handling 404 errors.

Make sure to test your application thoroughly after adding or modifying the web.config file to ensure that routing and error handling work as expected on IIS.

Azra recommendation - Angular 15 deployment in IIS Server | Hosting angular in IIS Server | Nihira Techiees - YouTube
https://www.youtube.com/watch?v=yrUCWuPAmS8