How to launch angular Server Side Render on Server Windows?

Question

I built my project with Angular Universal succecced, i had the next folders:

Browser, Assets, Server

I copied all files from dist to my work package on a server, where before good worked my angular web site without SSR. After that I try to connect with my web-site through a browser and to get old my web-site without SSR.

I tried to find docs about what I should to do for launch my site on the server but found nothing. Please share with me information, what I should to do next for to see angular SSR web-site.

Answer 1

Step 1
You need to modify your angular.json (outputPath) file before building. Use "dist/projectName/server" path. Let replace "projectName" to your project's name.

"architect": {
"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/projectName/browser",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "inlineStyleLanguage": "scss",
    ...
  },
},
"server": {
    "builder": "@angular-devkit/build-angular:server",
    "options": {
      "outputPath": "dist",
      "main": "server.ts",
      "tsConfig": "tsconfig.server.json",
      "inlineStyleLanguage": "scss"
    },
    ...
  },

}

Step 2 Build your application using the following command:

npm run build:ssr

Step 3 You need to install 2 things on your server

• IIS Node
• URL Rewrite

IIS Node I installed old version for IIS 7-8, but i have IIS 10. All work. But need choose correct bitness(x64 or x86). New version - haven't, don't need to seek.

Step 4 Create a web-site if you still haven't in IIS. After npm build you will have two folders:

• browser
• server

browser folder copy to your web-site folder. Server folder -need copy only files and paste in your web-site folder. ("web.config" you will create at the next step.)Look the example below:

Step 5 Create web.config with the next code:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
  <iisnode nodeProcessCommandLine="C:\Program Files\nodejs\node.exe" />
  <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>

Look at the line below. The line is neccessary else your web site will get error:

The iisnode module is unable to start the node.exe process. Make sure the node.exe executable is available at the location specified in the system.webServer/iisnode/@nodeProcessCommandLine element of web.config. By default node.exe is expected in one of the directories listed in the PATH environment variable.

<iisnode nodeProcessCommandLine="C:\Program Files\nodejs\node.exe" />

Step 6 In the IIS, go to Application Pools folder -->Add Aplication Pool: Write name of web-site and in ".CLR version" choose "No managed code" . After that you need to choose your web-site in IIS -->Advanced settings-->Application pool and here need to choose our new pool with no managed code option.

Step 7 In this step need to give full permission for our folder. In file explorer open our web-site folder. Right click in folder--> Properties -->Security. Choose IIS_IUSRS-->Edit-->Full Control-->Ok

Step 8(optional) In server.ts file need to change the path in const distFolder:(change YOURPROJECTNAME to your project name)

const distFolder = join(process.cwd(), 'dist/YOURPROJECTNAME/browser');

To (it will work only production mode)

const distFolder = join(process.cwd(), 'browser');

or create new const (it will work for production mode and test(not sure))

const websiteFileLocation = environment.production? "browser" : "dist/frontend/browser"

and replace distFolder in the next line below to new const websiteFileLocation

 server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

After that all done!

Answer 2

Angular has a terrible documentation regarding Server Side Rendering, I also struggled for many days.

Step 1, you need to modify your angular.json (outputPath) file before building

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/projectName/browser",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "inlineStyleLanguage": "scss",
        ...
      },
    },
    "server": {
        "builder": "@angular-devkit/build-angular:server",
        "options": {
          "outputPath": "dist",
          "main": "server.ts",
          "tsConfig": "tsconfig.server.json",
          "inlineStyleLanguage": "scss"
        },
        ...
      },
}

UPDATE: Modify your server.ts file to the following:

let distFolder: string;
const path1 = join(process.cwd(), 'projectName/browser');         // Running from the deployed version (production)
const path2 = join(process.cwd(), 'dist/projectName/browser');    // Running from the source (local development)


if (existsSync(path1)) {
  distFolder = path1;
} else {
  distFolder = path2;
} 

Step 2, build your application using the following command:

npm run build:ssr

Step 3, you need to install 2 things on your server

1. IIS Node
2. URL Rewrite

Step 4, copy the contents of your dist folder to your server and add it to IIS.

Step 5, create a web.config file and paste the below inside 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, In the IIS, go to Application Pools and click the Advanced Settings for the Website you just created. Then change the .NET CLR Version to No Managed Code.

Finally, run your application and hopefully it works.

You can find below 2 links that helped me a lot during this process:

1. Link 1
2. Link 2, this is a stackoverflow question where Sparker73's answer worked perfectly