🐳 Docker Web Desktop

A modern, web-based Docker management interface built with Vue.js and Node.js that provides a Docker Desktop-like experience for managing containers, images, volumes, and networks.

Manage your Docker containers, images, volumes, and networks with an intuitive web interface that rivals Docker Desktop

🚀 Quick Start • 📖 Documentation • 🛠️ Features • 🤝 Contributing

✨ Features

🎨 Modern Interface

• 📱 Responsive Design: Works on desktop, tablet, and mobile
• 🎯 Intuitive UI: Clean, user-friendly interface
• 🌈 Bootstrap 5: Modern styling and components
• 🔍 Smart Port Detection: Automatic protocol suggestions
• 📋 Detailed Views: Comprehensive resource information
• 🚀 Fast Performance: Optimized for speed and efficiency

🐳 Docker Management

• Containers: Start, stop, restart, remove, and view logs
• Images: View, remove, and inspect Docker images
• Volumes: Manage Docker volumes with usage information
• Networks: Configure and manage Docker networks
• Real-time Updates: WebSocket integration for live status updates
• Resource Statistics: Dashboard with system overview

🏗️ Architecture

docker-web-desktop/
├── 🖥️ backend/                 # Node.js Express API Server
│   ├── src/
│   │   ├── routes/            # RESTful API endpoints
│   │   │   ├── containers.js  # Container management
│   │   │   ├── images.js      # Image operations
│   │   │   ├── volumes.js     # Volume management
│   │   │   └── networks.js    # Network configuration
│   │   ├── services/
│   │   │   └── docker.js      # Docker API integration
│   │   └── server.js          # Main application server
│   └── package.json
│
├── 🎨 frontend/                # Vue.js Single Page Application
│   ├── src/
│   │   ├── components/        # Reusable Vue components
│   │   │   ├── Sidebar.vue    # Navigation sidebar
│   │   │   ├── ContainerCard.vue
│   │   │   └── ...
│   │   ├── views/             # Page components
│   │   │   ├── DashboardView.vue
│   │   │   ├── ContainersView.vue
│   │   │   ├── ResourcesView.vue
│   │   │   ├── InstallationView.vue
│   │   │   └── AboutView.vue
│   │   ├── stores/            # Pinia state management
│   │   ├── services/          # API communication layer
│   │   ├── router/            # Vue Router configuration
│   │   └── main.js
│   └── package.json
│
├── 📝 README.md
├── 📋 instructions.txt
└── 🔧 Configuration files

🚀 Quick Start

Prerequisites

Before you begin, ensure you have the following installed:

Requirement	Version	Download
🟢 Node.js	18+	nodejs.org
🐳 Docker Desktop	Latest	docker.com
📦 npm	8+	Included with Node.js
🔧 Git	Latest	git-scm.com

Installation

1. Clone the repository

   git clone https://github.com/devremoto/docker-web-desktop.git
   cd docker-web-desktop

2. Install dependencies

   # Backend dependencies
   cd backend && npm install
   
   # Frontend dependencies
   cd ../frontend && npm install

3. Start the application

   # Terminal 1: Start backend (from project root)
   cd backend && npm run dev
   
   # Terminal 2: Start frontend (from project root)
   cd frontend && npm run dev

4. Access the application

   • 🌐 Frontend: http://localhost:5173
   • 🔧 Backend API: http://localhost:3000
   • ❤️ Health Check: http://localhost:3000/api/health

💡 Tip: Use the provided batch scripts on Windows: start-backend.bat and start-frontend.bat

📖 Documentation

🔌 API Reference

🗂️ Container Endpoints

Method	Endpoint	Description
GET	/api/containers	List all containers
GET	/api/containers/:id	Get container details
POST	/api/containers/:id/start	Start container
POST	/api/containers/:id/stop	Stop container
DELETE	/api/containers/:id	Remove container
GET	/api/containers/:id/logs	Get container logs

🖼️ Image Endpoints

Method	Endpoint	Description
GET	/api/images	List all images
GET	/api/images/:id	Get image details
DELETE	/api/images/:id	Remove image

💾 Volume Endpoints

Method	Endpoint	Description
GET	/api/volumes	List all volumes
DELETE	/api/volumes/:name	Remove volume

🌐 Network Endpoints

Method	Endpoint	Description
GET	/api/networks	List all networks
DELETE	/api/networks/:id	Remove network

🛠️ Technology Stack

Backend Technologies

• Node.js - JavaScript runtime
• Express.js - Web framework
• Dockerode - Docker API client
• Socket.IO - Real-time communication

Frontend Technologies

• Vue.js 3 - Progressive framework
• Bootstrap 5 - CSS framework
• Pinia - State management
• Vite - Build tool

⚙️ Configuration

Environment Variables

Create a .env file in the backend directory:

# Server Configuration
PORT=3000
NODE_ENV=development

# Docker Configuration (automatically detected)
# DOCKER_SOCKET_PATH=/var/run/docker.sock    # Linux/Mac
# Windows uses: \\.\pipe\docker_engine

# CORS Settings
FRONTEND_URL=http://localhost:5173

Port Configuration

Service	Default Port	Environment Variable
Backend API	3000	PORT
Frontend Dev	5173	Configured in vite.config.js
WebSocket	3000	Same as backend

🔧 Development

Available Scripts

Backend Scripts

npm start          # Start production server
npm run dev        # Start development with nodemon
npm test           # Run tests
npm run lint       # Run ESLint

Frontend Scripts

npm run dev        # Start development server
npm run build      # Build for production
npm run preview    # Preview production build
npm run lint       # Run ESLint

🐛 Debugging & Troubleshooting

🔧 Common Issues

Docker Connection Issues

# Check Docker status
docker version
docker ps

# On Linux/Mac - Fix permissions
sudo chmod 666 /var/run/docker.sock
sudo usermod -aG docker $USER

# Restart Docker Desktop

Port Conflicts

# Find process using port
netstat -ano | findstr :3000    # Windows
lsof -i :3000                   # Mac/Linux

# Kill process
taskkill /PID <PID> /F          # Windows
kill -9 <PID>                   # Mac/Linux

Node.js Version Issues

# Check version
node --version

# Clear npm cache
npm cache clean --force

# Reinstall dependencies
rm -rf node_modules package-lock.json
npm install

🚢 Deployment

Production Build

1. Build the frontend

   cd frontend
   npm run build

2. Configure backend for production

   cd backend
   npm install --production

3. Start production server

   npm start

Docker Deployment

# Example Dockerfile
FROM node:18-alpine

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

COPY . .
EXPOSE 3000

CMD ["npm", "start"]

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• 📝 Follow existing code style
• ✅ Add tests for new features
• 📚 Update documentation
• 🧪 Test thoroughly before submitting

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Adilson de Almeida Pedro

• 🌐 Website: adilson.almeidapedro.com.br
• 🐙 GitHub: @devremoto
• 🐦 Twitter: @zumcoder
• 💼 LinkedIn: Adilson Pedro
• 💬 WhatsApp: +351 924 498 223 | +55 11 9353-6732

💖 Support

If you find this project helpful, consider supporting its development:

• ⭐ Star this repository
• 🐛 Report bugs and suggest features
• 🤝 Contribute to the codebase
• ☕ Buy me a coffee via Ko-fi

🙏 Acknowledgments

• 🐳 Docker team for the amazing containerization platform
• 🎨 Vue.js team for the excellent frontend framework
• 🎯 Bootstrap team for the beautiful UI components
• 🌟 Open Source Community for the incredible tools and libraries

---

Built with ❤️ by Adilson Pedro

Star ⭐ this repository if you find it useful!