Skip to main content

Frontend Installation

The PMP4PG frontend is a pre-compiled Angular single-page application served by Nginx. No Node.js or build toolchain is required on the server.

Step 1 — Install Nginx​

Rocky Linux / RHEL / AlmaLinux​

dnf install -y nginx
systemctl enable nginx

Ubuntu / Debian​

apt-get install -y nginx
systemctl enable nginx

Step 2 — Deploy the Frontend Bundle​

# Create the web root directory
mkdir -p /var/www/pmp4pg

# Extract the frontend bundle
tar -xzf pmp4pg-frontend-v1.0.0.tar.gz -C /var/www/pmp4pg

# Set ownership
chown -R nginx:nginx /var/www/pmp4pg    # Rocky Linux
# or
chown -R www-data:www-data /var/www/pmp4pg  # Ubuntu

# Verify content
ls /var/www/pmp4pg
# Should contain: index.html  main.js  polyfills.js  styles.css  assets/  ...

Step 3 — Configure Nginx​

Create a dedicated Nginx configuration file for PMP4PG:

cat > /etc/nginx/conf.d/pmp4pg.conf << 'EOF'
server {
    listen 80;
    server_name pmp.data-resilience.fr;

    root /var/www/pmp4pg;
    index index.html;

    # Serve the Angular app — fallback to index.html for client-side routing
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Proxy API calls to the backend
    location /pmp/api/ {
        proxy_pass         http://localhost:8080;
        proxy_http_version 1.1;
        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-Proto $scheme;
        proxy_read_timeout 120s;
    }

    # Proxy actuator (optional — restrict in production)
    location /pmp/actuator/ {
        proxy_pass         http://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header   Host $host;
    }

    # Cache static assets
    location ~* \.(js|css|png|jpg|ico|svg|woff2?)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # Security headers
    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-Content-Type-Options "nosniff";
    add_header Referrer-Policy "strict-origin-when-cross-origin";

    # Gzip compression
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
    gzip_min_length 1024;
}
EOF

Step 4 — Enable HTTPS (Recommended)​

For a production deployment, enable HTTPS using Let's Encrypt:

# Install Certbot
dnf install -y certbot python3-certbot-nginx    # Rocky Linux
# or
apt-get install -y certbot python3-certbot-nginx # Ubuntu

# Obtain and install the certificate
certbot --nginx -d pmp.data-resilience.fr

# Certbot will automatically update your Nginx config for HTTPS
# and set up automatic renewal
tip

After obtaining the certificate, Certbot modifies the Nginx config to redirect HTTP to HTTPS automatically.

Step 5 — Test and Reload Nginx​

# Test the Nginx configuration
nginx -t

# Expected output:
# nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
# nginx: configuration file /etc/nginx/nginx.conf test is successful

# Reload Nginx
systemctl reload nginx

Step 6 — Verify the Frontend​

Open your browser and navigate to:

http://pmp.data-resilience.fr

You should see the PMP4PG login page.

{screenshot: login-page}

Upgrading the Frontend​

To upgrade to a new version:

# Remove the old bundle
rm -rf /var/www/pmp4pg/*

# Extract the new bundle
tar -xzf pmp4pg-frontend-vX.Y.Z.tar.gz -C /var/www/pmp4pg

# Fix ownership
chown -R nginx:nginx /var/www/pmp4pg

# Reload Nginx (not strictly required for static files, but good practice)
systemctl reload nginx

Next Steps​