Skip to main content
Jet provides a comprehensive set of development tools to ensure code quality and maintain consistency across your project.

Development Server

1

Start the development server

Run the Angular development server:
ng serve
Or using npm:
npm start
The application will be available at http://localhost:4200 by default.
2

Development with build watch

To continuously rebuild on file changes:
npm run watch

Building for Production

Build your application with production optimizations:
ng build --subresource-integrity
Or using npm:
npm run build

Build Features

The production build includes:
  • Subresource Integrity (SRI): Ensures downloaded resources haven’t been tampered with
  • Output hashing: Automatic cache busting for deployed assets
  • Service Worker: PWA support with offline capabilities
  • Post-build optimizations:
    • Icon font preload tag injection
    • Translation file optimization

Build Budgets

Jet enforces strict size budgets:
  • Initial bundle: 500kB warning, 1MB error
  • Component styles: 4kB warning, 8kB error

Code Quality

Linting

Lint your TypeScript and HTML files:
ng lint
Jet uses:
  • ESLint with Angular ESLint rules
  • typescript-eslint for TypeScript-specific linting
  • eslint-plugin-perfectionist for consistent code organization
Linting runs automatically before every commit via Husky.

Formatting

Format only staged files (runs automatically on commit):
npm run format-staged
This uses lint-staged to format files efficiently.

Prettier Configuration

Jet uses Prettier with specialized plugins:
  • prettier-plugin-organize-imports: Automatically organizes imports
  • prettier-plugin-css-order: Orders CSS properties consistently
  • prettier-plugin-sql-cst: Formats SQL in migration files

Testing

Run unit tests with Vitest:
ng test
Or:
npm test
Jet uses Vitest for fast, modern unit testing with:
  • JSDOM for DOM testing
  • Angular testing utilities
  • Signal-aware test helpers

Committing Code

Conventional Commits

Jet enforces Conventional Commits for changelog generation and versioning.
1

Interactive commit

Use the interactive commit prompt:
npm run commit
2

Manual commit

Or commit directly with a valid message:
git commit -m "feat(angular): add new component"

Commit Message Format

<type>(<scope>): <description>

[optional body]

[optional footer]

Valid Scopes

  • angular: Angular-specific changes
  • general: General project changes
  • supabase: Supabase-related changes

Common Types

  • feat: New feature
  • fix: Bug fix
  • docs: Documentation changes
  • style: Code style changes (formatting, etc.)
  • refactor: Code refactoring
  • perf: Performance improvements
  • test: Test additions or modifications
  • chore: Build process or tooling changes
Commits that don’t follow Conventional Commits will be blocked by Commitlint.

Update Commit Scopes

To add or modify allowed scopes, edit .commitlintrc.json:
{
  "extends": ["@commitlint/config-conventional"],
  "rules": {
    "scope-case": [2, "always", "lower-case"],
    "scope-empty": [2, "never"],
    "scope-enum": [2, "always", ["angular", "general", "supabase", "your-scope"]]
  }
}

Pre-commit Hooks

Husky automatically runs these tasks before every commit:
  1. Format staged files: npm run format-staged
  2. Lint code: npm run lint
  3. Build project: npm run build

Customize Pre-commit Tasks

Edit .husky/pre-commit to modify pre-commit behavior:
npm run format-staged && npm run lint && npm run build
More tasks mean longer commit times. Balance thoroughness with developer experience.

Disable Husky

If you need to temporarily skip hooks:
git commit --no-verify -m "your message"

Internationalization (i18n) Tools

Extract Translation Keys

Extract translation keys from your templates:
npm run i18n:extract

Find Missing Translations

Find missing or unused translation keys:
npm run i18n:find
These tools use Transloco Keys Manager to maintain translation files.

Dependency Management

Jet includes scripts to update all dependencies to their latest versions:
npm run reinstall-dependencies
This runs:
  1. Uninstall all devDependencies
  2. Uninstall all dependencies
  3. Remove build artifacts and node_modules
  4. Reinstall dependencies (latest versions)
  5. Reinstall devDependencies (latest versions)
Keep the helper scripts (x:install-* and x:uninstall-*) in package.json updated when adding or removing dependencies.

Development Environment

The development server includes security headers matching production:
  • Content Security Policy (CSP)
  • Cross-Origin-Embedder-Policy
  • Cross-Origin-Opener-Policy
  • Cross-Origin-Resource-Policy
  • Referrer-Policy
  • Strict-Transport-Security
  • X-Content-Type-Options
This ensures you catch CSP violations during development.

Build docs developers (and LLMs) love