🐳 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

Windows + WSL2 Quick Install

If you are on Windows and want Docker Engine running inside WSL (with Docker Compose), use the automated scripts:

:: Run as Administrator from project root
public\install-wsl2.bat

What the script does:

• Checks and installs Node.js LTS (via winget when available)
• Installs/enables WSL2 and Ubuntu
• Calls bash inside WSL to install Docker Engine and Docker Compose
• Verifies both with docker --version and compose version checks

You can also run the Linux-side script directly inside Ubuntu/WSL:

chmod +x public/install-docker-wsl2.sh
./public/install-docker-wsl2.sh

Verify after installation inside WSL:

docker --version
docker compose version
docker run hello-world

Installation

1. Clone the repository

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

2. Install dependencies

   # Backend dependenciescd backend && npm install
   # Frontend dependenciescd ../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

💡 WSL2 Tip: If your project uses docker-compose.yml, run compose commands from inside WSL for the WSL daemon:

docker compose up -d
docker compose ps
docker compose logs -f
docker compose down

📖 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 # Windowskill -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 DockerfileFROM 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!