Skip to content
TilloTech Docs

Frontend Development

This guide is the canonical frontend setup and development reference.

For repository-wide quickstart steps, see docs/setup.md.

Prerequisites

  • Run commands inside nix develop.
  • Start backend services first if your work depends on API responses.

First-Time Frontend Setup

From the project root:

shell
ni
nr build

Common Commands

Run these commands inside nix develop.

shell
# install front-end dependencies
ni

# clean install front-end dependencies
nci

# run package scripts
nr {command}

# serve http://core.test with hot-module-reloading
nr dev

# build for production
nr build

# run unit tests
nr test

# run type-checker against the front-end
nr type:check

Troubleshooting

  • If commands like node, npm, ni, or nr are missing, ensure you are inside nix develop.
  • This repository uses npm lockfiles (package-lock.json), so ni resolves to npm here.
  • If shell setup changed and commands look stale, exit and re-run nix develop.

Quality Checks

Format, typecheck, and lint frontend changes before finalizing work (required for agent-driven changes — agents do not use editor format-on-save):

shell
nr format:all
nr type:check
nr lint:check

format:all applies Prettier; CircleCI format-ui runs format:check. type:check matches CircleCI typecheck-ui. Agent harness rule: .ai/guidelines/frontend-verification.md.