Navigator Frontend

A modern, theme-capable frontend application for the Climate Policy Radar Navigator platform. This repository contains the code necessary to build and deploy the navigator-frontend container.

🚀 Quick Start

# Install dependencies
npm install

# Set up environment
cp .env.example .env

# Run development server (default theme)
npm run dev

# Run with specific theme
THEME=cclw npm run dev

📋 Prerequisites

• Node.js (v18 or higher)
• Docker
• Make
• Trunk.io for code quality

First-time setup:

make install_trunk  # Only if trunk.io not already installed

🏗️ Development

Local Development Options

1. Docker (recommended)

   make        # Default theme
   # or
   make THEME=cclw

2. Manual Setup

   npm install
   npm run dev

Environment Configuration

Configuration is managed through environment variables. See .env.example for all available options.

Key variables:

• THEME: Set the active theme (e.g., 'cclw', 'default')
• API_URL: Backend API endpoint
• AUTH_URL: Authentication service URL

🧪 Testing

This project uses:

• Vitest for unit testing
• Playwright for E2E testing
• BrowserStack for cross-browser testing
• Act for GitHub workflows debugging/testing (click here for our act scripts)

Run tests:

# Unit tests
npm run test

# E2E tests
npm run test-e2e

🏭 Deployment

Containers are automatically:

1. Built and tested via GitHub Actions
2. Pushed to AWS ECR
3. Deployed via navigator-infra

🎨 Theming

Themes are configured in themes/[theme-name]/config.ts. Each theme can override:

• Styling
• Feature flags
• Environment-specific configurations

🏴‍☠️ Feature flags

Theme features

We have the ability to turn features on per theme. These are controlled via the themeConfig.features.

These are accessed via ./src/utils/features.ts.

📜 License

This project is licensed under the terms specified in LICENSE.md.