How to deploy angular universal to production

Last updated on November 8, 2019

This post will cover the step needed to take the angular universal app to the production server.

This post assumes that you have running angular universal application and which is generated by angular CLI.

Now open your terminal or command prompt, point the cursor to the project folder and run the build command as shown below.

$ cd /var/project_demo
$ npm run build:ssr

It will create a dist folder along with composed project files and which we will need to place on the server. Additionally, for some of the module dependencies, we also need to place package.json and run npm install to install node modules and in most cases, this step is not needed.

And by default Angular App is configured to start on 4000 port, once the above build generation steps complete, move all the files to the server using SCP or FTP client. And start the server with below command. For example, the project is located at /var/www/project/dist/…

$ cd /var/www/project
$ node dist/server.js

Once it is started you should able to access the website with your public IP address at http://public-ip:4000. But if you close the termail or command prompt you will lose the access to the website. To keep the node process alive, we should use something like forever, PM2 modules… etc.

In this post, we gonna use PM2, so let’s install it globally with npm install pm2 -g . After installation, let’s use PM2 to run the server as shown below.

$ cd /var/www/project
$ pm2 start dist/server.js

Now you can access the website with your public IP address at http://public-ip:4000

It is always better to use a proxy for the node app rather than directly exposing the app. Install Nginx, if it is not available already on the server. Now update the Nginx configuration file, in a way Nginx port 80 will proxy to port 4000 in background. 

Below are the Nginx configuration details

server {
    listen 80;
    server_name your_domain.com;
    location / {
        proxy_pass http://localhost:4000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}