MyInfra Frontend

MyInfra system.

Prerequisites

• Node.js 20 or higher
• Docker and Docker Compose (for containerized development)

Getting Started

Local Development

1. Clone the repository

git clone <repository-url>
cd myinfra-frontend

2. Install dependencies

npm install

3. Copy environment variables

cp .env.example .env

4. Run development server

npm run dev

The application will be available at http://localhost:3000

Docker Development

1. Copy environment variables

cp .env.example .env

2. Start development with Docker Compose

docker-compose up

The application will be available at http://localhost:3000 with hot-reload enabled.

To rebuild the containers:

docker-compose up --build

Production Build

Local Build

npm run build
npm run preview

Docker Production

docker-compose -f docker-compose.prod.yml up -d

To rebuild for production:

docker-compose -f docker-compose.prod.yml up -d --build

Available Scripts

Development

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run generate - Generate static site
• npm run lint - Run ESLint

Testing

• npm run test - Run tests in watch mode
• npm run test:ci - Run tests once (CI mode)
• npm run test:coverage - Run tests with coverage report
• npm run test:ui - Open Vitest UI

Test Coverage: 614 tests (98.2% passing) across services, composables, middleware, stores, and components

Docker Commands

Development

• docker-compose up - Start development environment
• docker-compose down - Stop development environment
• docker-compose logs -f - View logs
• docker-compose exec nuxt-dev sh - Access container shell

Production

• docker-compose -f docker-compose.prod.yml up -d - Start production
• docker-compose -f docker-compose.prod.yml down - Stop production
• docker-compose -f docker-compose.prod.yml logs -f - View logs
• docker-compose -f docker-compose.prod.yml ps - Check container status

Environment Variables

See .env.example for required environment variables:

• NODE_ENV - Application environment (development/production)
• NUXT_HOST - Host to bind (default: 0.0.0.0)
• NUXT_PORT - Port to bind (default: 3000)
• NUXT_PUBLIC_API_BASE - API base URL
• NUXT_AUTH_SECRET - Authentication secret
• NUXT_PUBLIC_MAPBOX_TOKEN - Mapbox API token (if using maps)
• NUXT_PUBLIC_MAPS_API_KEY - Google Maps API key

Project Structure

myinfra-frontend/
├── components/          # Vue components
├── pages/              # Nuxt pages
├── public/             # Static assets
├── server/             # Server middleware
├── Dockerfile          # Multi-stage Docker configuration
├── docker-compose.yml  # Development Docker Compose
└── docker-compose.prod.yml # Production Docker Compose

Troubleshooting

Port Already in Use

If port 3000 is already in use, you can change it in:

• .env file: Update NUXT_PORT
• docker-compose.yml: Update the ports mapping

Docker Build Issues

• Clear Docker cache: docker system prune -a
• Rebuild without cache: docker-compose build --no-cache

Permission Issues in Docker

If you encounter permission issues, ensure the node user has proper permissions:

docker-compose exec nuxt-dev chown -R node:node /app

... ... ...