ElCom Electricity Price Website

An electricity price comparison website for Switzerland that provides interactive maps, charts, and time-series visualizations of electricity prices from Swiss providers. Built with Next.js 15, TypeScript, and Material-UI, the application exposes a GraphQL API, which uses the Swiss Federal Administration Open Data (LINDAS) to get data on operator, prices, municipalities.

For development patterns and coding guidelines, see Claude.md.

Configuration through Environment Variables

Variable	Required	Example Value
SPARQL_ENDPOINT	yes	https://lindas.admin.ch/query
SPARQL_EDITOR	yes	https://lindas.admin.ch/sparql
GITLAB_WIKI_TOKEN	yes	xyz
GITLAB_WIKI_URL	yes	https://gitlab.ldbar.ch/api/v4/projects/9999/wikis
I18N_DOMAINS		{"de": "www.elcom.local", "fr": "fr.elcom.local", "it": "it.elcom.local"}
BASIC_AUTH_CREDENTIALS		user:password
MATOMO_ID		123
CURRENT_PERIOD		2022
FIRST_PERIOD		2009
PUBLIC_URL	no	http://localhost:3000
EIAM_CERTIFICATE_PASSWORD	yes	See in Elcom PWD certificates in 1Password
EIAM_CERTIFICATE_CONTENT	yes	See in Elcom PWD certificates in 1Password. Result of cat certificate.p12 | base64
GEVER_BINDING_IPSTS		https://idp-cert.gate-r.eiam.admin.ch/auth/sts/v14/certificatetransport. Ask Roger Flurry.
GEVER_BINDING_RPSTS		https://feds-r.eiam.admin.ch/adfs/services/trust/13/issuedtokenmixedsymmetricbasic256
GEVER_BINDING_SERVICE		https://api-bv.egov-abn.uvek.admin.ch/BusinessManagement/GeverService/GeverServiceAdvanced.svc

Development Environment

To start the development environment, you need Node.js (v22 recommended) and pnpm as package manager.

The usage of Nix to install system-level packages is recommended.

Setting up the dev environment

Ensure that Node.js and pnpm are available in your environment

Install system-level dependencies

Either use the installers

• Node.js installer
• pnpm installation

Or – if using Nix – entering a new Nix shell will install Node.js and pnpm automatically:

nix develop

Run the application setup

Run the setup script:

pnpm setup

This will install npm dependencies and run setup scripts.

Dev server

Once the application's set up, you can start the development server with

pnpm dev

👉 In Visual Studio Code, you also can run the default build task (CMD-SHIFT-B) to start the dev server, and TypeScript checker (you'll need Nix for that to work).

Versioning

New versions of package.json are built on CI into a separate image that will be deployed to the test environment.

pnpm version

This will prompt for a new version. The postversion script will automatically try to push the created version tag to the origin repo.

Localization

The application supports German (de), French (fr), Italian (it), English (en), and AA (test language). Translations are managed using Lingui with Accent for translation management.

Project in Accent.

Workflow

# Extract translatable strings from source code
pnpm locales:extract

# Manage translations via Accent interface
pnpm locales:browse

# Pull translations from Accent service
pnpm locales:sync

# Compile translations (runs automatically during pnpm build)
pnpm locales:compile

Preparing geodata

Run

make geodata

Since Switzerland's municipalities can change each year, the yearly Shapefiles from 2010 on prepared by BFS will be downloaded and transformed into TopoJSON format which can be loaded efficiently client-side.

The detailed transformation steps are described in this project's Makefile.

Http Proxy

On the government infrastructure, an HTTP proxy is used for external requests. This is for example used to fetch the gitlab content. The proxy is configured via the ./configure-proxy.js script that is required in the package.json start command. It uses the HTTP_PROXY environment variable

• For some of the server requests (SAML requests), we must not use this proxy, and the agent is configured there manually.
• For external requests that should use the proxy, we can use https.globalAgent.

const https = require('https')
const data = fetch(url, {
  agent: https.globalAgent
})

EIAM certificates

EIAM certificates are used to authenticate against the GEVER API serving the electricity provider documents.

They are stored in 1Password as "Elcom PWD certificates".

EIAM certificate content and password are passed as environment variable. The certificate content is a p12 certificate encoded as base 64.

In dev, you have to edit env.local to add the EIAM_CERTIFICATE_CONTENT and EIAM_CERTIFICATE_PASSWORD variables.

# Get the base64 certificate content that can be put in EIAM_CERTIFICATE_CONTENT
cat ../../../vault/svc.spw-d.elcom.admin.ch.p12 | base64

Load testing

See Load Testing document for more information.

Energy prices CLI

A debugging tool for the energy prices map, usable by humans and AI agents alike. See Energy Prices CLI.

Docker

Both the frontend and the screenshot service can be built as docker images and spin up through docker-compose.

pnpm docker:build # Build the image and tag it as interactivethings/electricity-prices-switzerland
docker compose up

Trivy is used for vulnerability scanning and must pass for the image to be accepted on the Federal Administration infrastructure. A check is done before publishing the docker image on GHCR. It can also be run against a local image.

pnpm docker:trivy # Runs trivy against interactivethings/electricity-prices-switzerland:latest

SPARQL notebook

A notebook containing Elcom specific SPARQL queries is available at ./book.sparqlbook. You need the SPARQL Notebook Extension to open it.

Home map screenshots

It is possible to regenerate the home map screenshots automatically using Playwright.

pnpm design:generate-home-maps