Frontend workspace

When to use this

Use this shape when a frontend project has several long-running commands that should start together: a public app, a backoffice app, and a code generation or Relay watcher.

Example

[global]
disable_color_env = true
log_mode = "both"

[[process]]
name = "public"
command = "npm run dev:public"

[process.readiness]
type = "log"

[process.readiness.ready]
pattern = ".*ready in.*"

[[process]]
name = "backoffice"
command = "npm run dev:backoffice"

[process.readiness]
type = "log"

[process.readiness.ready]
pattern = ".*ready in.*"

[[process]]
name = "relay"
command = "npm run relay:watch"

[process.readiness]
type = "log"

[process.readiness.ready]
pattern = ".*compiled documents.*"

Why this works

log_mode = "both" keeps the TUI useful while preserving file logs for later inspection. Each process declares its own readiness pattern because frontend tools often print different startup messages.

disable_color_env = true helps when tools emit structured or parsed logs and ANSI sequences would make matching or rendering harder.

Defaults involved here

• log_format: default text
• instances: default 1
• show_timestamps: effective default true
• ready.stream: default stdout
• log_dir: default .vectron/logs

What to customize

• Replace npm run ... commands with your package scripts.
• Adjust readiness regexes to match the exact messages printed by your tools.
• Add working_dir if the commands run from different folders.
• Add port_env only if the child process needs Vectron to inject an allocated port.

See also

• Readiness probes
• Logs and templates
• vectron.toml reference