Notifo Documentation

Notifo requires HTTPS to function. When running on localhost, you must configure Caddy (the reverse proxy) to use a local certificate authority instead of Let's Encrypt.

1. Configure Caddy: In your docker-compose.yml file, ensure the SITE_SETTINGS environment variable is set to "tls internal". If it is currently commented out, uncomment it:

- SITE_SETTINGS="tls internal"

2. Install the Root Certificate: Since the certificate is generated inside the Docker container, you must manually download and install it to your host machine's trusted root authorities store to avoid HTTPS errors in your browser.

First, download the certificate from the running proxy container:

docker cp docker-compose-notifo_proxy-1:/data/caddy/pki/authorities/local/root.crt .

Then, install the downloaded root.crt into your operating system's trusted root authorities store. You may need to restart your browser (e.g., Chrome) for the changes to take effect.

Notifo can be deployed as a multi-container setup using Docker Compose. The deployment consists of three main services:

1. notifo_notifo: The core Notifo application service.
2. notifo_mongo: A MongoDB instance for data persistence.
3. notifo_proxy: A Caddy-based proxy for handling HTTP/HTTPS traffic and SSL.

All services communicate over an internal bridge network named internal.

version: "3.5"
services:
  notifo_mongo:
    image: mongo:5
    volumes:
      - /etc/notifo/mongo/db:/data/db
    networks:
      - internal
    restart: unless-stopped

  notifo_notifo:
    image: "squidex/notifo:1"
    environment:
      - URLS__BASEURL=https://${NOTIFO_DOMAIN}
      - STORAGE__MONGODB__CONNECTIONSTRING=mongodb://notifo_mongo
      - IDENTITY__GOOGLECLIENT=${NOTIFO_GOOGLECLIENT}
      - IDENTITY__GOOGLESECRET=${NOTIFO_GOOGLESECRET}
      - IDENTITY__GITHUBCLIENT=${NOTIFO_GITHUBCLIENT}
      - IDENTITY__GITHUBSECRET=${NOTIFO_GITHUBSECRET}
      - IDENTITY__MICROSOFTCLIENT=${NOTIFO_MICROSOFTCLIENT}
      - IDENTITY__MICROSOFTSECRET=${NOTIFO_MICROSOFTSECRET}
      - ASPNETCORE_URLS=http://+:5000
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:5000/healthz"]
      start_period: 60s
    depends_on:
      - notifo_mongo
    volumes:
      - /etc/notifo/assets:/app/Assets
    networks:
      - internal
    restart: unless-stopped

  notifo_proxy:
    image: squidex/caddy-proxy:2.7.6
    ports:
      - "80:80"
      - "443:443"
    environment:
      - SITE_ADDRESS=${NOTIFO_DOMAIN}
      - SITE_SERVER="notifo_notifo:5000"
    volumes:
      - /etc/notifo/caddy/data:/data
      - /etc/notifo/caddy/config:/config
    depends_on:
      - notifo_notifo
    networks:
      - internal
    restart: unless-stopped

networks:
  internal:
    driver: bridge

The UI module provides the primary entrypoints for integrating Notifo notification overlays, topic management, and Web Push subscription prompts into your web application. You can target a specific DOM element by providing either its id (as a string) or the HTMLElement itself.

Core Functions

• setupNotifications(elementOrId, opts, config): Renders the main notification overlay.
• setupTopic(elementOrId, topic, opts, config): Renders a UI component for a specific topic.
• askForWebPush(config, options): Triggers a Web Push subscription prompt (e.g., a permission dialog).
• release(elementOrId): Cleans up and removes the Notifo UI from the specified element.

Configuration and Styles

If config.styleUrl is provided, the SDK will automatically load the CSS from that URL before rendering the UI components.

import { UI } from '@notifo/ui'; // Assuming package name

// 1. Setup Notifications
await UI.setupNotifications('#notification-container', {
  // NotificationsOptions
}, {
  styleUrl: 'https://cdn.example.com/notifo.css',
  // SDKConfig
});

// 2. Ask for Web Push permission
const granted = await UI.askForWebPush(config);
if (granted) {
  console.log('User allowed notifications');
}

// 3. Clean up
UI.release('#notification-container');