How to deploy Angular Universal 9 app to production

Question

We have an angular 9 app that works great when deployed into IIS server.

We have also a branch of this app where another company integrated Universal.

Now we need to understand how to deploy our app with ssr into production. We can do everything on production server so we have no limits in installing software.

Requisite is only that production webserver must remain IIS. This doesn't mean that we can't use node for SSR. We don't understand what are the exact steps to make a production build and then, which folder, files put in the root of our iis site, and how to run node (if needed) and which file use to have a complete ssr rendered app.

This is the scripts part of package.json:

 "scripts": {
    "ng": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng",
    "start": "npm run ng -- serve",
    "serve:server": "node ./dist-server/main.js",
    "serve:server:debug": "node --inspect ./dist-server/main.js",
    "start:server": "npm run build:server && node ./dist-server/main.js",
    "start:server:debug": "npm run build:server && node ./dist-server/main.js --inspect",
    "build": "npm run ng -- build",
    "build:server": "ng run my-app:server:production",
    "ssr:watch": "ng run my-app:serve-ssr:production",
    "demo:ssr:watch": "ng run universal-demo:serve-ssr:dev",
    "build-all": "npm-run-all build-production build:server-app:prod",
    "start:express-server": "ts-node -P ./src/tsconfig.server.json ./server.ts",
    "prerender": "ts-node -P ./server.tsconfig.json ./prerender.ts",
    "prerender:debug": "ts-node -P ./server.tsconfig.json --inspect ./prerender.ts",
    "test": "npm run ng -- test",
    "lint": "npm run ng -- lint",
    "e2e": "npm run ng -- e2e",
    "analyze": "webpack-bundle-analyzer dist/stats.json",
    "compodoc": "npx compodoc -p src/tsconfig.app.json",
    "build:stats": "ng build --stats-json --prod",
    "build-preprod": "ng build --configuration preprod --index=/src/index/preprod/index.html",
    "build-production": "ng build --configuration production --index=/src/index/production/index.html",
    "build-staging": "ng build --configuration staging --index=/src/index/staging/index.html"
  }

I know that we need to generate a production build, but here there are too many command and I don't know which one is the correct one for production. Withour SSR I would use "npm run build-production" to have a prod bundle. A dist folder would be created and I would copy its entire content to root folder of my site in IIS.

I tried some of these commands. They generated 2 folders: dist dist-server

The second one contains main.js

Now, what I have to copy to server and what is the folder tree from the root of site in IIS and how to install/configure/run with node server?

Here I found also something about configuring iis with node: Link

Do I need this?

Thanks for your help

Luke Luke · Accepted Answer · 2020-05-21T15:41:52

I answer myself, this is what I did: ng build --configuration production --index=/src/index/production/index.html then ng run my-app:server:production I copied generated folders "dist" and "dist-server" into the root of my site In webserver I set a rule to proxy everything to nodeserver on port 4200 and I started it with: node dist-server/main.js It seems to work even if I don't understand why I see rendered html only when I do a ctrl+f5 in view-source and not the first time I access the page

How to deploy Angular Universal 9 app to production

1 Answers