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