geomag-web-image

Web dashboard frontend for the GeoNet Geomagnetic API. This repository contains the static web dashboard that connects to the geomag-api-image via HTTP.

Overview

This is a containerized web application that serves a real-time geomagnetic data dashboard. The dashboard displays:

• Real-time geomagnetic field components (X-magnetic north, Y-magnetic east)
• Rate of change calculations
• Data delivery speed metrics
• Interactive charts and visualizations

The web dashboard communicates with the API service via HTTP, allowing for independent deployment and scaling.

Quick Start

Using Docker Compose (Recommended)

The easiest way to run the full stack locally:

docker-compose up

This will:

• Pull the API image from ghcr.io/platformfuzz/geomag-api-image:latest
• Build the web image locally
• Start both services with proper networking

Access:

• Web dashboard: http://localhost:8080
• API: http://localhost:8000

Build and Run Manually

Build the web image:

docker build -t geomag-web-image:latest .

Run the container:

docker run -p 8080:80 -e API_BASE_URL=http://localhost:8000 geomag-web-image:latest

Note: Ensure the API service is running and accessible at the URL specified in API_BASE_URL.

Configuration

Environment Variables

• API_BASE_URL: Base URL of the API service (default: http://localhost:8000)
  • Used to configure where the dashboard makes API requests
  • In docker-compose, use http://localhost:8000 (browser needs host-accessible URL)
  • For standalone deployment, use full URL: http://your-api-host:8000

API Connection

The dashboard automatically configures the API endpoint using the /api-config.js file, which is generated at container startup from the API_BASE_URL environment variable.

Local Development

Prerequisites

• Docker and Docker Compose
• Access to ghcr.io/platformfuzz/geomag-api-image:latest (or run API locally)

Development Workflow

1. Full stack testing:

   docker-compose up

   • Web: http://localhost:8080
   • API: http://localhost:8000

2. Web-only testing:

   docker build -t geomag-web:local .
   docker run -p 8080:80 -e API_BASE_URL=http://localhost:8000 geomag-web:local

   • Assumes API is running separately

3. Modify dashboard:

   • Edit app/static/dashboard.html
   • Rebuild image: docker build -t geomag-web:local .
   • Restart container

Production Deployment

Option 1: Separate Containers

Deploy web and API as separate containers:

services:
  api:
    image: ghcr.io/platformfuzz/geomag-api-image:latest
    # ... API configuration

  web:
    image: ghcr.io/platformfuzz/geomag-web-image:latest
    environment:
      - API_BASE_URL=http://localhost:8000  # Use localhost for browser access
    # ... Web configuration

Option 2: Reverse Proxy (Same Origin)

Use a reverse proxy (nginx/traefik) to route requests:

• Routes /api/* to API container
• Routes /* to web container
• No CORS needed (same origin)

Example nginx config:

location /api/ {
    proxy_pass http://api:8000/;
}

location / {
    proxy_pass http://web:80/;
}

CI/CD

The repository includes GitHub Actions workflows that:

• Build Docker images on push to main
• Push to GitHub Container Registry (GHCR)
• Support semantic versioning with tags
• Create GitHub releases for version tags

Images are available at: ghcr.io/platformfuzz/geomag-web-image

Requirements

• API CORS: The API service must have CORS enabled to allow cross-origin requests from the web dashboard. This is configured in the geomag-api-image repository.

Project Structure

geomag-web-image/
├── Dockerfile                 # Web-only image (nginx:alpine)
├── docker-compose.yml         # Local testing with API from GHCR
├── entrypoint.sh              # Entrypoint script for API URL injection
├── nginx-default.conf         # Nginx config with health endpoint
├── app/
│   └── static/
│       └── dashboard.html     # Dashboard HTML
├── .github/
│   └── workflows/
│       ├── ci.yml             # CI workflow for PRs
│       └── build-and-release.yml  # CI/CD to build and push to GHCR
└── README.md

License

MIT License - see LICENSE file for details.

Related Projects

• geomag-api-image - Backend API service