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.