rexorbrave/angular-nginx-server repository overview

⁠Angular Nginx Server (SSR/Prerender Ready)

A lightweight, production-ready Nginx wrapper specifically optimized for Angular applications (v17+). This image is designed to be used as a standalone web server or behind a reverse proxy like nginx-proxy with automatic SSL.

⁠Key Features:

• Angular Routing Fix: Built-in try_files configuration to prevent 404 errors on page refreshes.
• Lightweight: Based on nginx:alpine (~25MB).
• Multi-Arch: Supports both amd64 (Intel/AMD) and arm64 (Apple Silicon/Raspberry Pi).
• Security: Non-root execution friendly and optimized for read-only volume mounts.
• API Integration: allows direct integration of your api docker container to avoid CORS implementation issues.

⁠Quick Start (Docker Compose)

The easiest way to use this image is to point it at your Angular browser folder (the output of ng build. dist>appname>browser).

services:
  web:
    image: rexorbrave/angular-nginx-server:latest
    ports:
      - "8080:80"
    environment:
      - API_UPSTREAM=nodejs-api # OPTIONAL: This matches the service name of the api
      - API_PORT=3000 # OPTIONAL: The port on which the API listens
    volumes:
      # Map your local 'browser' folder to the container
      - ./dist/my-app/browser:/var/www/angular-app:ro

Automatic HTTPS (with nginx-proxy & ACME)

If you are using the nginx-proxy and acme-companion stack, use this configuration:

services:
  web:
    image: rexorbrave/angular-nginx-server:latest
    expose:
      - "80"
    environment:
      - API_UPSTREAM=nodejs-api # OPTIONAL: This matches the service name of the api
      - API_PORT=3000 # OPTIONAL: The port on which the API listens
      - VIRTUAL_HOST=yourdomain.com
      - LETSENCRYPT_HOST=yourdomain.com
    volumes:
      - ./browser:/var/www/angular-app:ro
    networks:
      - proxy-network

networks:
  proxy-network:
    external: true

⁠Configuration Details

• Internal Root: /var/www/angular-app
• Nginx Config Location: /etc/nginx/conf.d/default.conf
• Default Port: 80

⁠Why use this image?

Modern Angular builds (especially with Prerendering/SSG) produce a browser folder. Standard Nginx images require you to manually write a config to handle Angular's Client Side Routing. This image handles that logic out of the box, ensuring that routes like /dashboard or /profile work even when deep-linked or refreshed.