How to deploy an Angular 4 app with server-side rendering on prod server

Question

I've been looking for about 3 hours for hosting an Angular 4 app on a server with "server-side rendering" enabled. For note - I have a AWS server which has Apache installed (Ubuntu).

First of all, I already know how can we host an Angular 4 app (without server-side rendering). But here my major concern is that I want to enable my app to be enabled for - server-side rendering.

In my local, I use npm start command, which automatically serves the app (with server-side rendering enabled) on - http://localhost:4000

My package.json file looks like this:

...
"scripts": {
    "serve": "ng serve",
    "prestart": "ng build --prod && ngc && webpack",
    "start": "node dist/server.js",
    "build": "ng build"
},
...

These all commands are working fine. But I'm confused that should I again run

npm start

on a production server, so that it also requires node_modules to install. Which doesn't seems the right way to me?

Can anyone please help me with hosting my app with "server-side rendering" enabled.

Answer 1

Can anyone please help me with hosting my app with "server-side rendering" enabled.

Yes. Unfortunately, I use Nginx. However, the approach shouldn't be any different in Apache or whatnot.

So this is how I am hosting my Server Side Rendering Angular application in production (I'm on DO). I wrote an article about it on my blog:

After building your SSR, you should have something like this:

After you managed to send everything within the dist/ folder onto your remote server, you run it using pm2 (which is what I use to run my node apps)

Run pm2 start path/to/dist/server.js --name name_of_process

It should be running on localhost:4000

The Nginx virtual server block below should get all requests proxied through your Nginx to the Server Side Rendering Angular application.

The nginx conf below actually serves both the statics of your angular SSR, and falls back to the proxy when request isn't for a static file.

upstream ssr_khophi_nodejs {
    server 127.0.0.1:4000;
}

server {
    listen 443 ssl http2;

    server_name staging.khophi.com; # <--- Change this part

    include /etc/nginx/ssl/ssl-params.conf;# <--- Ignore this part if not using SSL
    include /etc/nginx/ssl/khophi.com.ssl;# <--- Ignore this part if not using SSL

    root /home/khophi/khophi.com/ssr/dist/browser; # <-- Notice where we're point to

   location / {
        try_files $uri $uri @backend; # <--- This looks for requests (statics i.e js/css/fonts)
                                      # in /ssr/dist/browser folder. If nothing found, calls @backend
    }

    location @backend {
        # NOTE THERE IS NO TRAILING SLASH AT THE END. NO TRAILING SLASH. NO SLASH. NO!
        proxy_pass http://ssr_khophi_nodejs; # <--- THIS DOES NOT HAVE A TRAILING '/'
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_http_version 1.1;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

server {
    listen 80;
    server_name staging.khophi.com;
    return 301 https://$server_name$request_uri?;
}

I hope this helps you.