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!