Skip to content

Frontend - Infrastructure

Tech Stack

  • React 19 - UI library
  • TypeScript - Type safety
  • TanStack Router - Type-safe routing
  • Vite - Build tool and dev server
  • Tailwind CSS - Styling
  • shadcn/ui - UI components

Running the Service

Install Dependencies

bash
pnpm install

Environment variables

  1. Add a .env.dev at the service root
  2. Get the environment variables from 1password for the corresponding service

Commands

bash
# Development
nx run frontend:dev

# Build
nx run frontend:build

# Test
nx run frontend:test

# Lint
nx run frontend:lint

# Run in Docker
docker compose -f 'docker-compose.yml' up -d --build 'frontend'

# Check dependencies
nx show project frontend

# Show affected projects (based on git changes)
nx affected:graph

Note that you might need to run the other services to make it work, depending on what feature you're gonna test:

Shared Packages

The shared packages (dto, models, utils) are automatically linked and can be imported in both backend and frontend applications. Any changes to these packages will trigger rebuilds in dependent applications.

These packages mostly contain global functions (like logger, utils, ...) shared among services, providing common functionality and ensuring consistency across the monorepo.

Available Packages

  • dto - Data Transfer Objects
  • models - Shared data models
  • utils - Utility functions and helpers

API

Generate clients

When you change the API on the backend services, you will need to re-generate the clients used by the front end.

Note: make sure your environment variables are setup for each backend services

bash
nx run frontend:generate:clients