Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Configure Docker Development Environment #40

Merged
merged 17 commits into from
Dec 3, 2024

Conversation

AhmedFatthy1040
Copy link
Owner

Configure Docker Development Environment

Description

This PR sets up a comprehensive Docker development environment for the HIAS project, enabling hot-reloading, proper service isolation, and streamlined development workflow.

Changes

Docker Configuration

  • Optimized Dockerfiles for development environment
  • Added volume mounts for hot-reloading
  • Configured proper service dependencies
  • Implemented development-specific entrypoint scripts

Environment Setup

  • Added development environment variables
  • Configured ports for local development
  • Set up database connection strings
  • Added API URL for frontend-backend communication

Development Workflow

  • Enabled hot-reloading for both API and React app
  • Added Prisma migration handling
  • Configured TypeScript compilation
  • Improved dependency management

File Changes

  • Dockerfile.api: Optimize for development with hot-reloading
  • Dockerfile.app: Configure React development environment
  • docker-compose.yml: Set up development services and volumes
  • scripts/docker-entrypoint.sh: Add API service startup script
  • scripts/docker-entrypoint-app.sh: Add React app startup script
  • api/src/server.ts: Update server configuration for Docker
  • package.json: Configure workspace and dependencies
  • api/package.json: Set up API development scripts
  • app/package.json: Configure React development environment

Testing

  1. Start the development environment:
docker-compose up --build
  1. Verify access points:
  1. Verify hot-reloading:
  • Make changes to React components
  • Modify API endpoints
  • Check for automatic rebuilds

Notes

  • Development environment only - production configuration will be handled separately
  • Database data persists between container restarts
  • ESLint warnings present in React app (non-critical)
  • Prisma update available (optional)

Security Considerations

  • Development-only credentials used
  • Environment variables properly configured
  • No sensitive data in version control
  • Local-only development setup

Next Steps

  • Add production Docker configuration
  • Implement comprehensive testing
  • Add detailed API documentation
  • Configure logging system

Related Issues

Closes #35

…elds

- Updated Prisma schema models and fields to follow lowercase and snake_case naming
  convention.
- Applied `@map` directive for fields to convert camelCase to snake_case (e.g.,
  `createdAt` -> `created_at`).
- Applied `@@map` directive for models to enforce lowercase table names (e.g.,
  `Annotations` -> `annotations`).
- Move entrypoint script to scripts directory
- Remove production build steps
- Keep development dependencies for hot-reloading
- Add nodemon and ts-node for development server
- Add OpenSSL installation for Prisma client
- Use development-specific entrypoint script
- Remove multi-stage build process
- Configure for hot-reloading development
- Add volume mounts for hot-reloading
- Configure environment variables for development
- Update service ports and dependencies
- Add API URL for frontend communication
- Add PostgreSQL readiness check
- Configure Prisma migration handling
- Set up development environment variables
- Implement proper startup sequence
- Create minimal startup configuration
- Remove unnecessary database checks
- Optimize for frontend development
- Enable proper command execution
- Create Users table with authentication fields
- Add Categories table for image organization
- Set up Images table with metadata
- Implement Annotations table with relationships
- Add foreign key constraints and indexes
- Configure workspace for monorepo structure
- Add shared development dependencies
- Set up root-level scripts
- Define workspace packages for api and app
- Add Express and TypeScript dependencies
- Configure Prisma ORM and types
- Set up development scripts with ts-node-dev
- Add type checking and build scripts
- Add React and TypeScript dependencies
- Configure development server scripts
- Add testing and build configuration
- Include necessary type definitions
- Configure server to listen on all interfaces (0.0.0.0)
- Add fallback port 5000 for development
- Improve logging for container startup
Copy link
Collaborator

@justFadel19 justFadel19 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

UR him :D

@justFadel19 justFadel19 merged commit 6962357 into main Dec 3, 2024
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Dockerize the Frontend (React App)
3 participants