Configuration

How to personalize Vaxla to your workspace.

By default, Vaxla could cover most cases without any configuration. However, if you wish to customize, we should provide full type-safety.

Folder Location

We select the configuration file based on the following priority:

  1. Any directory flag in a CLI command like --dir. Not recommended long-term.
  2. In the package.json file, like: { "vaxla": { "config": "example/vaxla" } }.
  3. The vaxla or tools/vaxla folder if it exists.
  4. We build the configuration file by scanning the file system for package.json files.

Vaxla can be dropped into any project, here is an example of how you may setup your Vaxla configuration:

Personalizing

Packages

Packages tend to represent a single application or service (usually with an associated package.json file). Packages can be organized in any way and don't need to have a folder.

The color of the package is a variable originating from tailwindcss's color palette.

vaxla/config.ts
import { defineVaxlaConfig, colors } from "@vaxla/cli";

export default defineVaxlaConfig({
    packages: {
        web: {
            name: "Web",
            path: "./apps/web",
            color: colors.red,
            links: {},
            scripts: {},
        },
    },
});

Scripts

Scripts run code that controls your workspace, the same way you would run a command in your terminal. Traditionally, scripts are defined in the package.json file, Vaxla allows you to define scripts in a more flexible way.

vaxla/config.ts
import { defineVaxlaConfig, colors } from "@vaxla/cli";

export default defineVaxlaConfig({
    packages: {
        web: {
            path: "./apps/web", // Helps provide context
            scripts: {
                dev: {
                    label: 'dev',
                    command: { package: true, npm: "dev" },
                    icon: "lucide:rocket",
                },
            },
        },
    },
});

Commands can either be a shell command, or a function. All scripts run in an isolated child process. There are plenty of ways to define shell scripts (though they all resolve to a string).

// Shell script
"command": "npm run dev" // npm run dev
"command": { npm: "dev" } // npm run dev
"command": { shell: "pnpm run dev" } // npm run dev
"command": { package: true, npm: "dev" } // cd ./apps/web && npm run dev
"command": { package: true, shell: "npm run dev" } // cd ./apps/web && npm run dev

// Function script
"command": { fn: async () => console.log("Hello, world!") } // "Hello, world!"

Specify external links to save and share links directing to other internal documentation.

vaxla/config.ts
import { defineVaxlaConfig } from "@vaxla/cli";

export default defineVaxlaConfig({
    externalLinks: {
        wiki: {
            href: 'https://example.com',
            name: 'Internal Wiki',
            icon: 'lucide:book',
        },
    },
});