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 installEnvironment variables
- Add a
.env.devat the service root - 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:graphNote 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