How To Deploy SSR Angular Universal To IIS

In this article, we will learn how to deploy server-side rendering angular universal application to IIS.

If you want to run your angular application with server-side rendering, you can follow the link given below to implement server-side rendering in Angular.

Server-Side Rendering In Angular 11

Let’s follow the steps given below, to deploy SSR angular universal application to IIS.

STEP 1

Firstly execute the command given below to build an Angular app with the express server.

npm run build:ssr

STEP 2

Now you can see the dist folder in your project folder.

STEP 3

Create a new folder in your windows server (for example name it as ssr-demo) and copy the dist folder from the project folder here.

STEP 4

Copy main.js file from ssr-demo/dist/[your-project-name]/server folder and paste it direct in ssr-demo folder.

STEP 5

Create and open the Web.config file and add the code to 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>

STEP 6

Install IIS Node & URL Rewrite on the server.

STEP 7

Add Website… in IIS.

STEP 8

In the IIS, go to Application Pools and click the Advanced Settings… for the Website you created (ssr-demo). Then change the .NET CLR Version to No Managed Code.

Done, you can check the result on the Host name you provided.

Output:

Please give your valuable feedback and if you have any questions or issues about this article, please let me know.

Also, check Drag & Drop Image Upload In Angular 10 With .NET Core

4 Comments

  1. ChrisPenga

    Is there anyone facing a issue on Production with the Wildcard (**) route, getting 401s and this is not redirecting to my defined wildcard component.

    0
    0
    Reply
  2. Raden

    thank you

    0
    0
    Reply
  3. Weng

    I believe the web.config can be simplied as follows

    0
    0
    Reply
  4. Kamyar

    hi. this is what i got

    **********************************************************************

    iisnode encountered an error when processing the request.

    HRESULT: 0x2
    HTTP status: 500
    HTTP subStatus: 1002
    HTTP reason: Internal Server Error

    You are receiving this HTTP 200 response because system.webServer/iisnode/@devErrorsEnabled configuration setting is ‘true’.

    In addition to the log of stdout and stderr of the node.exe process, consider using debugging and ETW traces to further diagnose the problem.

    The node.exe process has not written any information to stderr or iisnode was unable to capture this information. Frequent reason is that the iisnode module is unable to create a log file to capture stdout and stderr output from node.exe. Please check that the identity of the IIS application pool running the node.js application has read and write access permissions to the directory on the server where the node.js application is located. Alternatively you can disable logging by setting system.webServer/iisnode/@loggingEnabled element of web.config to ‘false’.

    0
    0
    Reply

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories