Angular 9 universal 9 deployment on IIS server with web.config? How to deploy angular 9 Server side rendering on IIS server

Question

How to deploy Angular 9 Server side rendering on IIS server

What will be web.config for IIS

Answer 1

Below are the steps to create a sample app and deploy in iis:

1)Install the Angular 10 CLI and initialize a new project. (you can skip this step if you already created the app and installed npm)

npm install -g @angular/cli
ng new angular-seo-app

2)Go back to your command-line interface, and start by navigating to your project's folder:

cd angular-seo-app

ng add @nguniversal/express-engine --clientProject angular-seo-app

The schematic will automatically add the required configurations and packages to your project and will even add an Express server.

The Express server will render a part of your Angular app and return HTML to the browser. The server runs on the 4000 port by default

3)Go back to your terminal and run the following commands:

npm run build:ssr 
npm run serve:ssr

This will build your project with SSR support and start the Express server from the http://localhost:4000 address.

You will see dist folder in your project folder.

4)Go to your windows server(C:\inetpub\wwwroot) and create an empty folder (name it ng-ssr for example)

5)Copy to dist folder into ng-ssr

6)Open C:\inetpub\wwwroot\ng-ssr\dist\angular-seo-app\server folder, you will find main.js file

7)copy main.js and paste it directly in ng-ssr folder

8)create web.conifg file in your ng-ssr folder and add below code in it:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>        
      <handlers>
        <add name="iisnode" path="main.js" verb="*" modules="iisnode" />
      </handlers>
      <rewrite>
        <rules>
            <rule name="DynamicContent">
                 <match url="/*" />
                 <action type="Rewrite" url="main.js"/>
            </rule>
            <rule name="StaticContent" stopProcessing="true">  
                  <match url="([\S]+[.](jpg|jpeg|gif|css|png|js|ts|cscc|less|ico|html|map|svg))" />
                  <action type="None" />
            </rule>  
       </rules>
      </rewrite>
        <staticContent>
          <clientCache cacheControlMode="UseMaxAge" />
          <remove fileExtension=".svg" />
          <remove fileExtension=".eot" />
          <remove fileExtension=".ttf" />
          <remove fileExtension=".woff" />
          <remove fileExtension=".woff2" />
          <remove fileExtension=".otf" />
          <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
          <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
          <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
          <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
          <mimeMap fileExtension=".woff2" mimeType="application/x-woff" />
          <mimeMap fileExtension=".otf" mimeType="application/otf" />
         </staticContent>      
    </system.webServer>
  </configuration>

An IIS web.config file is an XML file containing rules for a particular site (or directory) on your web server. It is similar to a .htaccess file in Apache. This file may contain rules setting 404, 403, etc. error pages for your site as well as redirection rules for older URLs.

Our web.config file is containing the URL rewrite rule,iis node setting, and mime type.

Note: Download the URL Rewrite and iisnodex64 , iisnodex86

Now your website folder must look like this:

9)Create a Web Site in IIS

and add the folder path: C:\inetpub\wwwroot\ng-ssr

10)In the IIS, go to the Application Pool for the Web Site you created, change the .Net Framework Version to No Managed Code

Note: Make sure you assigned the iis_iusrs and iusr full control permission to the ng-ssr folder.

browse your site: