A complete Docker-based development and production environment for React applications with hot reload, optimized builds, and production-ready deployment.
---powershell
.\start-dev.ps1
docker-compose up -d
---powershell
.\start-prod.ps1
docker-compose -f docker-compose.prod.yml up -d --build
- React 18 with hot reload
- React Router for client-side routing
- Fast Refresh for instant updates
- Volume mounting for live code editing
- Node.js 20 Alpine-based image
- Multi-stage build for optimized size
- Nginx web server with custom configuration
- Gzip compression for faster loading
- Security headers built-in
- Health checks for monitoring
- Non-root user for security
| Environment | URL | Port |
|---|---|---|
| Development | http://localhost:3000 | 3000 |
| Production | http://localhost:8080 | 8080 |
| Health Check | http://localhost:8080/health | 8080 |
docker-react/ ├── src/ # React source code │ ├── App.js # Main React component │ ├── App.css # Styles │ └── index.js # React entry point ├── public/ # Public assets │ └── index.html # HTML template ├── Dockerfile # Production build configuration ├── docker-compose.yml # Development environment ├── docker-compose.prod.yml # Production environment ├── nginx.conf # Nginx configuration ├── .dockerignore # Docker ignore rules ├── start-dev.ps1 # Development startup script ├── start-prod.ps1 # Production startup script └── README.md # This file
---powershell
docker-compose up -d
docker-compose logs -f react-dev
docker-compose down
docker-compose restart
docker-compose exec react-dev npm install package-name docker-compose exec react-dev npm test
---powershell
docker-compose -f docker-compose.prod.yml up -d --build
docker-compose -f docker-compose.prod.yml logs -f react-prod
docker-compose -f docker-compose.prod.yml down
curl http://localhost:8080/health
---powershell
Create a .env file in the root directory:
---env
REACT_APP_API_URL=http://localhost:8000
REACT_APP_ENVIRONMENT=development
Edit nginx.conf for custom server settings, caching rules, or proxy configurations.
- Port 3000 in use: Change port in
docker-compose.yml - Hot reload not working: Ensure
CHOKIDAR_USEPOLLING=trueis set - Permission errors: Check Docker Desktop file sharing settings
- Build fails: Check
docker-compose -f docker-compose.prod.yml logs react-prod - Nginx errors: Verify
nginx.confsyntax - Static files not loading: Check build output in
/app/build
- File watching issues: The environment variables
CHOKIDAR_USEPOLLINGandWATCHPACK_POLLINGare set for Windows compatibility - Path issues: Use PowerShell or CMD, not WSL for running scripts
- ✅ Hot reload with Fast Refresh
- ✅ Persistent node_modules volume
- ✅ Optimized file watching for Windows
- ✅ Multi-stage build (smaller image size)
- ✅ Gzip compression
- ✅ Static asset caching
- ✅ Security headers
- ✅ Health monitoring
- ✅ Non-root user execution
Both environments include health checks:
- Development: Checks React dev server
- Production: Nginx health endpoint
---powershell
docker-compose logs -f react-dev
- Non-root user in production
- Security headers (X-Frame-Options, X-Content-Type-Options, etc.)
- Minimal attack surface with Alpine images
- Proper signal handling with dumb-init
- Always use development mode when coding
- Test production builds before deployment
- Use the PowerShell scripts for convenience
- Check logs if something doesn't work
- Keep Docker Desktop updated for best performance
Happy coding! 🎉