Files
zonemaster.es/zonemaster/docs/public/configuration/gui/configuring-using-tsconfig-json.md
Malin 8d4eaa1489 feat: add full Zonemaster stack with Docker and Spanish UI
- Clone all 5 Zonemaster component repos (LDNS, Engine, CLI, Backend, GUI)
- Dockerfile.backend: 8-stage multi-stage build LDNS→Engine→CLI→Backend
- Dockerfile.gui: Astro static build served via nginx
- docker-compose.yml: backend (internal) + frontend (port 5353)
- nginx.conf: root redirects to /es/, /api/ proxied to backend
- zonemaster-gui/config.ts: defaultLanguage set to 'es' (Spanish)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-21 08:19:24 +02:00

2.2 KiB

Advanced build-time configuring Zonemaster-GUI using "tsconfig.json"

The tsconfig.json configuration file can be used for build-time settings of Zonemaster-GUI. Any changes to this file require a rebuild of the installation package.

Finding "tsconfig.json"

In the source tree the file is found as tsconfig.json relative to the root of the Git tree. It does not exist in the installed Zonemaster-GUI, as the values have been built-in.

Rebuilding Zonemaster-GUI after update

When tsconfig.json has been updated, Zonemaster-GUI has to be rebuilt. See building installation package for how to get the source tree and building a new installation package.

Default "tsconfig`.json"

The tsconfig.json file is a TypeScript configuration file that includes path aliases like @theme/* to simplify imports and make theming more manageable.

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@theme/*": ["./src/themes/default/*"]
    },
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

@theme/* Alias in "tsconfig.json"

The path alias configuration allows importing from the default theme directory using the @theme prefix, which makes it possible to create a customize the look-and-feel of the Zonemaster-GUI, e.g. set other colors and type faces.

{
  "paths": {
    "@/*": ["./src/*"],
    "@theme/*": ["./src/themes/default/*"]
  }
}

This alias makes it easier to import theme-specific components and styles in your code. For example, instead of writing:

import Button from '../../themes/default/components/Button';

You can use:

import Button from '@theme/components/Button';

This approach simplifies imports and makes it easier to switch between different themes by changing the alias path.

Theming

In the Theming Zonemaster-GUI document you will find instructions how to add custom theming to Zonemaster-GUI.