Climate Action Navigator

Table of Contents

1. About the Project
2. Getting Started
   • Prerequisites
   • Installation
   • Backend Server
3. Build
4. Docker
5. Tests

About the Project

This is the repository of the frontend website of HeiGIT's Climate Action project. Visit the Demo Website to view the current status of the dashboard, and access the available plugins.

Getting Started

Prerequisites

• pnpm
• Angular CLI pnpm install -g @angular/cli
• Docker Engine for Linux or Docker Desktop for Mac/Windows in case you wish to run the backend server

Installation

1. Clone the repository locally
2. Run pnpm install to install the dependencies
3. Create the configuration file:
   • Copy src/assets/env.template.js to src/assets/env.js
   • Edit env.js with your settings:
     • ENVIRONMENT_TYPE: Set to 'development' for local development
     • GEOCODE_API_KEY: Get an API key from HeiGIT for the Search function
     • CLIMATE_ACTION_API_URL: Set to 'api/v1/gateway' for local development with the backend
     • Other values can typically use the defaults provided
4. Run pnpm dev or ng serve to start the dev server
5. Navigate to http://localhost:4200/

The application will automatically reload if you change any of the source files.

Note: The src/assets/env.js file contains configuration for local development. For production deployments, these values are injected at runtime via environment variables (see Docker section below).

Backend Server

To see more than the raw website and access the plugins, you will need to set up a local dev environment of the Climate Action Infrastructure.

Make sure to start at least one plugin along with the API Gateway, for example docker compose up -d ca-plugin-blueprint ca-api-gateway

Build

Run pnpm build to build the project. The application is built as a single, environment-agnostic bundle that can be configured at runtime via environment variables.

Docker

The web app is Dockerised with runtime configuration support.

Building the Docker image

docker build . --tag repo.heigit.org/climate-action/web-app:{image_tag}

Running with environment variables

docker run --publish 8080:80 \
  -e ENVIRONMENT_TYPE="development" \
  -e CLIMATE_ACTION_API_URL="http://localhost/api/v1/gateway" \
  -e GEOCODE_API_KEY="your-ors-api-key" \
  -e APPWRITE_PROJECT_ID="your-project-id" \
  -e APPWRITE_ENDPOINT="appwrite-api-endpoint" \
  -e APPWRITE_WEBSITE_URL="appwrite-frontend" \
  repo.heigit.org/climate-action/web-app:{image_tag}

Then head to localhost:8080.

Pushing to Docker Hub

docker image push repo.heigit.org/climate-action/web-app:{image_tag}

Note: The same Docker image can be used for all environments (development, staging, production - if compatible) by simply changing the environment variables at runtime.

Incident & Maintenance Announcements

Incident and maintenance announcements are fetched from Cachet and displayed in the web app. The Cachet URL is stored in the CACHET_URL environment variable. The watched components are stored in the CACHET_WATCHED_COMPONENTS environment variable. This is a comma-separated list of Group: Component pairs (e.g. Climate Action: Climate Action Navigator, OpenRouteService: Directions API); an announcement is surfaced only when it references a component whose name and parent group both match one of these pairs. The number of days to look ahead for maintenance announcements is stored in the SCHEDULE_LOOKAHEAD_DAYS environment variable.

Tests

Run pnpm test:all to execute the unit & integration tests on Jest and E2E tests on Cypress. For the cypress tests to succeed you will need a running instance of your app (see 4. under Installation). Additionally, for interactive cypress runs using cy:open you need to make sure your test-browser is set to English.

References

• Matplotlib Colormaps

Attribution

• Stars background image: Photo by Olena Bohovyk on Unsplash