Install an Angular Application on an Ubuntu Server

Updated on: 03/01/2025 Danny

We are going to deploy our Web Application on an Ubuntu server .

This application was developed with the Angular javascript framework version 19.2.0

If you don't have time to read this entire guide,
download it now

What are we going to do?

The basic Angular project we will be using has the following features

Generated with Angular CLI
Routing
Lazy Loading
Bootstrap CSS Framework
Server Side Rendering
HttpClient
Transfer State
Progressive Web App

The corresponding demo is available at https://angular.ganatan.com/

The source code or repository of this project is available on github at the following address
https://github.com/ganatan/angular-app

Before you start

Ubuntu is a Linux operating system developed by Canonical.
It is the most widely used operating system on cloud systems and computer servers.

We will be using Ubuntu Server 22.04.1 LTS version.

This version can be downloaded from the website https://www.ubuntu.com/download/server

We need to have a virtual machine from a provider to be able to install our application.

In our example the IP address of the virtual machine will be 10.0.0.80

Installation Summary

The different stages of our installation will be summarized.

Ubuntu Server Update
Installing the nginx HTTP server
Install cURL if needed
Installing Node.js and npm
Compiling and installing the web application
Configuring nginx
Installing pm2

Prerequisites

In order to deploy our application we will use the following elements.

git version 2.42.0
nginx version 1.25.2
curl version 8.2.1
nodejs version 18.17.1
pm2 version 5.3.0

The latest versions of these tools are available below

Ubuntu Update

First we need to connect to our server with an ssh client.
We will then be able to run a number of scripts.

The version used in this tutorial is Ubuntu 22.4.01 LTS
Let's check the version installed on our ubuntu server

# Ubuntu Server Version Test
cat /etc/issue

We are going to update our version of ubuntu.

# Update the list of available files
# Update all packages installed on the system

# Method 1
sudo apt-get update
sudo apt-get upgrade --yes 

# Method 2
sudo apt-get update && sudo apt-get upgrade -y

Nginx installation

At this point in the tutorial if we type in our server address (http://10.0.0.80/)
We get the message This site is inaccessible in our browser.

Which makes sense since no HTTP server is installed.

Nginx is the HTTP server we will be using.
We can install or uninstall it by typing the following commands.

# Installation
sudo apt-get install nginx --yes

# Uninstall
sudo apt-get purge nginx nginx-common nginx-full --yes

Let's install nginx on our server.
At this point we can verify that our server is working.
Type the IP address of the server we provisioned in the previous tutorial.

http://10.0.0.80/

nginx has been installed and is acting as an http server, so we get the nginx welcome window.

Welcome to nginx!
If you see this page, the nginx web server is successfully installed and working. Further configuration is required.

For online documentation and support please refer to nginx.org.
Commercial support is available at nginx.com.

Thank you for using nginx.

Installing curl

cURL (client URL request library) is a command line interface.
It will allow us to retrieve the contents of a resource.

If cURL is not installed on the server you can do it with the following commands.

# version check
curl --version

# installation
sudo apt-get --yes install curl

Node.js Installation

Node.js is the JavaScript platform we will use to run our application.

We can use the script recommended at this address
https://github.com/nodesource/distributions#debinstall
In our example Node.js v18.x

To install it on the server we need to run the following commands.

# Installing Node.js
curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

# npm update
sudo npm install npm -g

# Checking node version
node --version

# Checking npm version
npm --version

Using git

Now we will create our web application on our workstation
We will first need to install the Node.js, npm and Git software.

The steps will be as follows:

Retrieve the application source code
position yourself in the application directory
Install dependencies
Compile the application

# Retrieving the application repository
git clone https://github.com/ganatan/angular-app.git

# Position yourself
cd angular-app

# Installation
npm install

# Compilation
npm run build:ssr

The dist directory contains the compiled application.
This directory constitutes the deliverable or artifact to be installed on our server.

We need to copy this directory to the Ubuntu server.
On our workstation we can use scp (for Ubuntu) or Winscp (on Windows).

The destination location does not matter.
In our example we copy the dist directory to /var/www/angular.

We need to copy the corresponding nginx configuration.
The nginx.conf file contained in the repository must be copied to the Ubuntu server in /etc/nginx .

This configuration file contains some optimizations and especially the redirection elements.

user nobody nogroup;
worker_processes auto;
events {
    worker_connections 1024;
}
http {
    gzip on;
    gzip_http_version 1.1;
    gzip_comp_level 5;
    gzip_min_length 256;
    gzip_proxied any;
    gzip_vary on;
    gzip_types application/atom+xml
        application/javascript
        application/json
        application/rss+xml
        application/vnd.ms-fontobject
        application/x-font-ttf
        application/x-web-app-manifest+json
        application/xhtml+xml
        application/xml
        font/opentype
        image/svg+xml
        image/x-icon
        text/css
        text/plain
        text/x-component;
    sendfile on;
    upstream main.module {
        server 127.0.0.1:4000;
    }
    server {
        listen *:80 default_server;
        server_name "";
        location / {
            proxy_pass http://main.module;
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Host $server_name;
        }
    }
}

All that remains is to go to the application directory.
In our example /var/www/angular

Then run the node dist/server command
Check the application with for example http://10.0.0.80/

The web application is displayed in our browser.

Installing pm2

The installation we have carried out is manual for the moment.
We will automate the execution of the web application using PM2 for this.

PM2 is a process manager for JavaScript under Node.js.
We will install it on the server with the following command.

# Installation
sudo npm install -g pm2

When deploying the application we will use a configuration file process.config.js .
This file present on the repository must be added on Ubuntu in /var/www/angular

module.exports = {
    apps : [
      {
        name      : 'angular-webapp',
        script    : 'dist/server',
        env: {
          COMMON_VARIABLE: 'true'
        },
        env_dev : {
          NODE_ENV: 'dev'
        },
        env_prod : {
          NODE_ENV: 'prod'
        }
      }
    ],
  };

Automation

Finally we launch the orders

Running the application via PM2
PM2 storage
Restarting the nginx server
Restarting Ubuntu Server

# Running the application
pm2 start process.config.js --env prod

# PM2 storage
pm2 startup
pm2 save

# Restarting nginx
sudo service nginx restart

# Restart ubuntu server
reboot

Tests

All that remains is to test the application.
Several scenarios can arise.

1/ Installation on an Ubuntu workstation.
2/ Installation on a Windows workstation and use of Ubuntu via virtual box .
3/ Installation on an Ubuntu virtual machine from a supplier

If the IP address is for example 10.0.0.80

In any case the application test will be as follows