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, ornrare missing, ensure you are insidenix develop. - This repository uses npm lockfiles (
package-lock.json), soniresolves 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.