= {
+ 'docker-hello-world': helloWorldLab,
+ 'docker-images-basics': dockerImagesLab,
+};
+
+export const getLabById = (id: string): Lab | undefined => {
+ return labRegistry[id];
+};
+
+export const getLabsByCategory = (category: string): Lab[] => {
+ return Object.values(labRegistry).filter(lab => lab.category === category);
+};
+
+export const getAllLabs = (): Lab[] => {
+ return Object.values(labRegistry);
+};
+
+export const getFeaturedLabs = (): Lab[] => {
+ return Object.values(labRegistry).filter(lab => lab.featured);
+};
diff --git a/dockerlabs/tsconfig.json b/dockerlabs/tsconfig.json
new file mode 100644
index 000000000..3dafde093
--- /dev/null
+++ b/dockerlabs/tsconfig.json
@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "es6"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "baseUrl": "src",
+ "paths": {
+ "@/*": ["*"]
+ }
+ },
+ "include": ["src"]
+}
diff --git a/migrate.sh b/migrate.sh
new file mode 100644
index 000000000..a6797d23b
--- /dev/null
+++ b/migrate.sh
@@ -0,0 +1,1524 @@
+#!/bin/bash
+
+# Script to create all migrated Docker lab files
+# Run this after setting up the repository structure
+
+echo "🚀 Creating migrated Docker lab files..."
+
+# Create the lab type definition
+cat > src/types/lab.ts << 'EOF'
+export interface Lab {
+ id: string;
+ title: string;
+ description: string;
+ category: 'beginners' | 'intermediate' | 'advanced' | 'networking' | 'security' | 'cloud';
+ difficulty: 1 | 2 | 3 | 4 | 5;
+ duration: string;
+ prerequisites: string[];
+ tags: string[];
+ author: string;
+ lastUpdated: string;
+ featured: boolean;
+ sections: LabSection[];
+ nextLab?: string;
+ previousLab?: string;
+}
+
+export interface LabSection {
+ id: string;
+ title: string;
+ type: 'text' | 'code' | 'command' | 'warning' | 'info' | 'image';
+ content: string;
+ language?: string;
+ imageUrl?: string;
+}
+EOF
+
+# Create Lab 1: Hello World
+cat > src/labs/beginners/hello-world.ts << 'EOF'
+import { Lab } from '@/types/lab';
+
+export const helloWorldLab: Lab = {
+ id: 'docker-hello-world',
+ title: 'Docker Hello World: Your First Container',
+ description: 'Learn Docker fundamentals by running your very first container. Understand the Docker workflow and basic commands through the classic hello-world example.',
+ category: 'beginners',
+ difficulty: 1,
+ duration: '5-10 minutes',
+ prerequisites: [
+ 'Docker installed on your system',
+ 'Access to command line/terminal'
+ ],
+ tags: [
+ 'docker',
+ 'hello-world',
+ 'containers',
+ 'beginner',
+ 'first-steps',
+ 'docker-run'
+ ],
+ author: 'Docker Community',
+ lastUpdated: '2024-06-30',
+ featured: true,
+ sections: [
+ {
+ id: 'introduction',
+ title: 'Introduction to Docker Containers',
+ type: 'text',
+ content: `
+Welcome to your first Docker lab! In this tutorial, you'll run your very first Docker container using the famous "hello-world" image.
+
+**What you'll learn:**
+- How to run your first Docker container
+- Understanding the Docker workflow
+- Basic Docker commands
+- How Docker pulls images from Docker Hub
+- Container lifecycle basics
+
+The hello-world image is a minimal Docker image designed to demonstrate that Docker is working correctly on your system.
+ `
+ },
+ {
+ id: 'run-hello-world',
+ title: 'Run Your First Container',
+ type: 'command',
+ content: 'docker run hello-world'
+ },
+ {
+ id: 'understanding-output',
+ title: 'Understanding the Output',
+ type: 'text',
+ content: `
+When you ran the command above, you should see output similar to this:
+
+\`\`\`
+Unable to find image 'hello-world:latest' locally
+latest: Pulling from library/hello-world
+b8dfde127a29: Pull complete
+Digest: sha256:5122f6204b6a3596e048758cabba3c46b1c937a46b5be6225b835d091b90e46c
+Status: Downloaded newer image for hello-world:latest
+
+Hello from Docker!
+This message shows that your installation appears to be working correctly.
+\`\`\`
+
+**What happened step by step:**
+1. Docker client contacted the Docker daemon
+2. Daemon looked for the image locally (didn't find it)
+3. Daemon pulled the image from Docker Hub
+4. Daemon created a new container from the image
+5. Container executed and produced the output
+6. Container exited after completing its task
+ `
+ },
+ {
+ id: 'docker-workflow-info',
+ title: 'The Docker Workflow',
+ type: 'info',
+ content: `
+
+
Understanding what happened when you ran docker run hello-world:
+
+ - Image Pull: Docker automatically downloaded the hello-world image from Docker Hub
+ - Container Creation: A new container was created from the image
+ - Execution: The container ran its program (printing the message)
+ - Exit: The container stopped after completing its task
+
+
Note: Each time you run docker run, it creates a new container. Over time, you may accumulate many stopped containers. Use docker container prune to clean up stopped containers when needed.
+ `
+ },
+ {
+ id: 'next-steps',
+ title: 'What\'s Next?',
+ type: 'text',
+ content: `
+Congratulations! You've successfully:
+- ✅ Run your first Docker container
+- ✅ Understood the Docker workflow
+- ✅ Learned basic Docker commands
+- ✅ Explored container and image concepts
+
+**Ready for more?** In the next lab, you'll learn about:
+- Building your own Docker images
+- Working with Dockerfiles
+- Managing container data
+ `
+ }
+ ],
+ nextLab: 'docker-images-basics',
+ previousLab: null
+};
+EOF
+
+# Create Lab 2: Docker Images
+cat > src/labs/beginners/docker-images.ts << 'EOF'
+import { Lab } from '@/types/lab';
+
+export const dockerImagesLab: Lab = {
+ id: 'docker-images-basics',
+ title: 'Working with Docker Images',
+ description: 'Learn how to search, pull, inspect, and manage Docker images. Understand the difference between images and containers, and explore Docker Hub.',
+ category: 'beginners',
+ difficulty: 2,
+ duration: '15-20 minutes',
+ prerequisites: [
+ 'Docker installed on your system',
+ 'Completed "Docker Hello World" lab',
+ 'Basic command line knowledge'
+ ],
+ tags: [
+ 'docker',
+ 'images',
+ 'docker-hub',
+ 'pull',
+ 'search',
+ 'inspect',
+ 'beginner'
+ ],
+ author: 'Docker Community',
+ lastUpdated: '2024-06-30',
+ featured: false,
+ sections: [
+ {
+ id: 'introduction',
+ title: 'Understanding Docker Images',
+ type: 'text',
+ content: `
+Docker images are the foundation of containers. Think of an image as a read-only template that contains:
+- Application code
+- Runtime environment
+- System tools and libraries
+- Settings and configurations
+
+**Key concepts:**
+- **Images** are templates used to create containers
+- **Containers** are running instances of images
+- **Docker Hub** is the default public registry for images
+- Images are built in layers for efficiency
+
+In this lab, you'll learn how to find, download, and inspect Docker images.
+ `
+ },
+ {
+ id: 'search-images',
+ title: 'Search for Images on Docker Hub',
+ type: 'command',
+ content: 'docker search nginx'
+ },
+ {
+ id: 'search-explanation',
+ title: 'Understanding Search Results',
+ type: 'text',
+ content: `
+The search command shows available images on Docker Hub. You'll see output like:
+
+\`\`\`
+NAME DESCRIPTION STARS OFFICIAL AUTOMATED
+nginx Official build of Nginx. 15000 [OK]
+nginx/nginx-... NGINX Plus and NGINX based... 75
+nginxinc/nginx-... NGINX Unprivileged 20
+\`\`\`
+
+**Key columns:**
+- **NAME**: Repository name (official images have simple names)
+- **DESCRIPTION**: Brief description of the image
+- **STARS**: Community rating (like GitHub stars)
+- **OFFICIAL**: Maintained by Docker or the original software vendor
+- **AUTOMATED**: Automatically built from source code
+ `
+ },
+ {
+ id: 'pull-image',
+ title: 'Pull an Image',
+ type: 'command',
+ content: 'docker pull nginx:alpine'
+ },
+ {
+ id: 'pull-explanation',
+ title: 'Understanding Image Tags',
+ type: 'text',
+ content: `
+The \`docker pull\` command downloads an image to your local system. Notice we used \`nginx:alpine\`:
+
+- **nginx** is the image name
+- **alpine** is the tag (version)
+- If no tag is specified, Docker uses \`:latest\` by default
+
+**Common tag patterns:**
+- \`latest\` - Most recent stable version
+- \`alpine\` - Smaller version based on Alpine Linux
+- \`1.21\` - Specific version number
+- \`1.21-alpine\` - Specific version with Alpine base
+ `
+ },
+ {
+ id: 'list-local-images',
+ title: 'List Local Images',
+ type: 'command',
+ content: 'docker images'
+ },
+ {
+ id: 'inspect-image',
+ title: 'Inspect an Image',
+ type: 'command',
+ content: 'docker inspect nginx:alpine'
+ },
+ {
+ id: 'inspect-explanation',
+ title: 'Understanding Image Details',
+ type: 'text',
+ content: `
+The \`docker inspect\` command provides detailed information about an image including:
+- Configuration settings
+- Environment variables
+- Exposed ports
+- Volume mount points
+- Layer information
+- Creation date and size
+
+This metadata helps you understand how to properly run containers from the image.
+ `
+ },
+ {
+ id: 'image-history',
+ title: 'View Image Layers',
+ type: 'command',
+ content: 'docker history nginx:alpine'
+ },
+ {
+ id: 'layers-explanation',
+ title: 'Understanding Image Layers',
+ type: 'info',
+ content: `
+
+
Docker images are built in layers for efficiency:
+
+ - Base Layer: Usually an OS like Alpine or Ubuntu
+ - Application Layers: Your app code and dependencies
+ - Configuration Layers: Settings and metadata
+ - Shared Layers: Common layers are reused between images
+
+
This layered approach saves disk space and speeds up image downloads!
+
+
Official Images:
+
+ - Maintained by Docker or the software vendor
+ - Regularly updated and security-patched
+ - Simple names like
nginx, mysql, python
+ - Best choice for production use
+
+
Community Images:
+
+ - Created by community members
+ - Format:
username/imagename
+ - May include specialized configurations
+ - Always verify trustworthiness before use
+
+
Important: Images can consume significant disk space. Use docker system df to see space usage and docker image prune to remove unused images. Be careful not to remove images you still need!
+ `
+ },
+ {
+ id: 'next-steps',
+ title: 'What You\'ve Learned',
+ type: 'text',
+ content: `
+Excellent work! You now understand:
+- ✅ How to search for images on Docker Hub
+- ✅ How to pull images with specific tags
+- ✅ How to inspect image details and layers
+- ✅ The difference between official and community images
+- ✅ How to run containers from images
+- ✅ Basic image management and cleanup
+
+**Coming up next:** Learn how to create your own custom Docker images using Dockerfiles!
+ `
+ }
+ ],
+ nextLab: 'dockerfile-basics',
+ previousLab: 'docker-hello-world'
+};
+EOF
+
+# Create Lab 3: Dockerfile Basics
+cat > src/labs/beginners/dockerfile-basics.ts << 'EOF'
+import { Lab } from '@/types/lab';
+
+export const dockerfileBasicsLab: Lab = {
+ id: 'dockerfile-basics',
+ title: 'Dockerfile Basics: Building Your First Image',
+ description: 'Learn how to create Dockerfiles and build custom Docker images. Understand essential Dockerfile instructions and best practices for creating efficient images.',
+ category: 'beginners',
+ difficulty: 3,
+ duration: '25-30 minutes',
+ prerequisites: [
+ 'Docker installed on your system',
+ 'Completed "Working with Docker Images" lab',
+ 'Basic understanding of containers and images',
+ 'Text editor knowledge'
+ ],
+ tags: [
+ 'dockerfile',
+ 'docker-build',
+ 'custom-images',
+ 'FROM',
+ 'RUN',
+ 'COPY',
+ 'CMD',
+ 'EXPOSE',
+ 'beginner'
+ ],
+ author: 'Docker Community',
+ lastUpdated: '2024-06-30',
+ featured: false,
+ sections: [
+ {
+ id: 'introduction',
+ title: 'What is a Dockerfile?',
+ type: 'text',
+ content: `
+A **Dockerfile** is a text file containing a series of instructions that Docker uses to automatically build images. Think of it as a recipe for creating your custom Docker image.
+
+**Key benefits:**
+- **Reproducible**: Same Dockerfile always builds the same image
+- **Version controlled**: Store Dockerfiles in Git alongside your code
+- **Automated**: No manual steps required to build images
+- **Portable**: Works the same way on any Docker-enabled system
+
+**Common Dockerfile instructions:**
+- \`FROM\` - Specifies the base image
+- \`RUN\` - Executes commands during build
+- \`COPY\` - Copies files from host to image
+- \`CMD\` - Specifies the default command to run
+- \`EXPOSE\` - Documents which ports the app uses
+ `
+ },
+ {
+ id: 'create-project',
+ title: 'Create a Project Directory',
+ type: 'command',
+ content: 'mkdir my-first-dockerfile && cd my-first-dockerfile'
+ },
+ {
+ id: 'create-html-file',
+ title: 'Create a Simple HTML File',
+ type: 'code',
+ language: 'bash',
+ content: `cat > index.html << 'EOF'
+
+
+
+ My First Docker App
+
+
+
+
+
🐳 Hello from Docker!
+
This HTML file is served from a custom Docker container.
+
Built with: Dockerfile
+
+
Let's break down each instruction:
+
+ - FROM nginx:alpine - Starts with the official nginx image based on Alpine Linux
+ - LABEL - Adds metadata to the image (like version info or maintainer)
+ - COPY index.html /usr/share/nginx/html/ - Copies our HTML file into the nginx web directory
+ - EXPOSE 80 - Documents that this container listens on port 80
+ - CMD - Not needed here since nginx:alpine already has a CMD to start the web server
+
+
+
Key best practices for writing Dockerfiles:
+
+ - Use official base images when possible (more secure and maintained)
+ - Keep images small - use Alpine variants for smaller size
+ - Minimize layers - combine RUN commands with && when logical
+ - Use .dockerignore to exclude unnecessary files
+ - Don't run as root - create and use a non-root user
+ - Use specific tags - avoid 'latest' in production
+
+
Security Best Practice: Always avoid including sensitive information like passwords, API keys, or certificates directly in Dockerfiles. Use environment variables, Docker secrets, or external configuration management instead.
+ `
+ },
+ {
+ id: 'next-steps',
+ title: 'Congratulations!',
+ type: 'text',
+ content: `
+You've successfully learned Dockerfile fundamentals! You can now:
+- ✅ Write basic Dockerfiles with essential instructions
+- ✅ Build custom Docker images from source code
+- ✅ Understand the layered architecture of images
+- ✅ Apply basic security and efficiency best practices
+- ✅ Run containers from your custom images
+
+**Next up:** Learn about Docker volumes for persistent data and advanced container networking!
+ `
+ }
+ ],
+ nextLab: 'docker-volumes-basics',
+ previousLab: 'docker-images-basics'
+};
+EOF
+
+# Create Lab 4: Docker Volumes
+cat > src/labs/beginners/docker-volumes.ts << 'EOF'
+import { Lab } from '@/types/lab';
+
+export const dockerVolumesLab: Lab = {
+ id: 'docker-volumes-basics',
+ title: 'Docker Volumes: Managing Persistent Data',
+ description: 'Learn how to use Docker volumes to persist data, share files between containers and host, and manage container storage effectively.',
+ category: 'beginners',
+ difficulty: 3,
+ duration: '20-25 minutes',
+ prerequisites: [
+ 'Docker installed on your system',
+ 'Completed "Dockerfile Basics" lab',
+ 'Understanding of containers and images',
+ 'Basic file system knowledge'
+ ],
+ tags: [
+ 'docker',
+ 'volumes',
+ 'persistent-data',
+ 'bind-mounts',
+ 'storage',
+ 'data-management',
+ 'beginner'
+ ],
+ author: 'Docker Community',
+ lastUpdated: '2024-06-30',
+ featured: false,
+ sections: [
+ {
+ id: 'introduction',
+ title: 'Understanding Docker Storage',
+ type: 'text',
+ content: `
+By default, data created inside a Docker container is lost when the container is removed. This is where **Docker volumes** come to the rescue!
+
+**Storage types in Docker:**
+- **Container layer**: Temporary, lost when container is removed
+- **Bind mounts**: Direct access to host filesystem
+- **Volumes**: Docker-managed storage (recommended)
+- **tmpfs mounts**: In-memory storage (temporary)
+
+**Why use volumes?**
+- Persist data beyond container lifecycle
+- Share data between containers
+- Back up and migrate data easily
+- Better performance than bind mounts on Windows/Mac
+ `
+ },
+ {
+ id: 'problem-demo',
+ title: 'Demonstrate the Problem',
+ type: 'command',
+ content: 'docker run --rm -it alpine sh -c "echo Hello > /tmp/test.txt && cat /tmp/test.txt"'
+ },
+ {
+ id: 'problem-explanation',
+ title: 'The Data Loss Problem',
+ type: 'text',
+ content: `
+The command above created a file inside the container, displayed it, then the container was removed (--rm flag).
+
+Let's verify the data is gone by trying to access it again:
+ `
+ },
+ {
+ id: 'verify-data-loss',
+ title: 'Verify Data is Lost',
+ type: 'command',
+ content: 'docker run --rm -it alpine sh -c "cat /tmp/test.txt || echo File not found"'
+ },
+ {
+ id: 'create-volume',
+ title: 'Create a Named Volume',
+ type: 'command',
+ content: 'docker volume create my-data-volume'
+ },
+ {
+ id: 'list-volumes',
+ title: 'List Docker Volumes',
+ type: 'command',
+ content: 'docker volume ls'
+ },
+ {
+ id: 'inspect-volume',
+ title: 'Inspect Volume Details',
+ type: 'command',
+ content: 'docker volume inspect my-data-volume'
+ },
+ {
+ id: 'volume-info',
+ title: 'Understanding Volume Details',
+ type: 'info',
+ content: `
+
+
The docker volume inspect command shows important information:
+
+ - Mountpoint: Where Docker stores the volume data on the host
+ - Driver: Storage driver used (usually 'local')
+ - Labels: Metadata attached to the volume
+ - Options: Additional configuration options
+
+
Note: Don't directly access the mountpoint - always use Docker commands!
+
+
Bind Mounts:
+
+ - Mount a specific host path into container
+ - Syntax:
-v /host/path:/container/path
+ - Good for development (editing files with host tools)
+ - Host-dependent (path must exist on host)
+
+
Named Volumes:
+
+ - Docker manages the storage location
+ - Syntax:
-v volume-name:/container/path
+ - Good for production (portable, managed by Docker)
+ - Better performance on Windows/Mac
+
+
Hello from Volume!
This content is stored in a Docker volume.
\' > /data/index.html"'
+ },
+ {
+ id: 'test-web-server',
+ title: 'Test the Web Server',
+ type: 'text',
+ content: `
+Visit **http://localhost:8080** in your browser. You should see the HTML content we just created!
+
+This demonstrates how volumes can be used to:
+- Provide content to web servers
+- Share data between containers
+- Persist important application data
+ `
+ },
+ {
+ id: 'sharing-volumes',
+ title: 'Share Volume Between Containers',
+ type: 'command',
+ content: 'docker run --rm -v my-data-volume:/shared alpine sh -c "echo Additional content >> /shared/index.html"'
+ },
+ {
+ id: 'volume-backup',
+ title: 'Backup Volume Data',
+ type: 'command',
+ content: 'docker run --rm -v my-data-volume:/backup-source -v $(pwd):/backup-dest alpine tar czf /backup-dest/my-volume-backup.tar.gz -C /backup-source .'
+ },
+ {
+ id: 'backup-explanation',
+ title: 'Understanding Volume Backup',
+ type: 'text',
+ content: `
+The backup command above:
+1. Mounts the volume as \`/backup-source\`
+2. Mounts current directory as \`/backup-dest\`
+3. Creates a compressed archive of the volume content
+4. Saves it to your host filesystem
+
+This is a common pattern for backing up Docker volume data. You can restore by reversing the process!
+ `
+ },
+ {
+ id: 'cleanup-containers',
+ title: 'Clean Up Containers',
+ type: 'command',
+ content: 'docker stop web-server && docker rm web-server'
+ },
+ {
+ id: 'volume-commands',
+ title: 'Essential Volume Commands',
+ type: 'code',
+ language: 'bash',
+ content: `# List all volumes
+docker volume ls
+
+# Create a volume
+docker volume create volume-name
+
+# Inspect volume details
+docker volume inspect volume-name
+
+# Remove a volume (only if not in use)
+docker volume rm volume-name
+
+# Remove all unused volumes
+docker volume prune
+
+# Run container with volume
+docker run -v volume-name:/mount/path image-name`
+ },
+ {
+ id: 'volume-warning',
+ title: 'Important Volume Notes',
+ type: 'warning',
+ content: `
+Warning: Removing a volume deletes all its data permanently! Always backup important volumes before removal. Use docker volume prune carefully as it removes ALL unused volumes.
+ `
+ },
+ {
+ id: 'volume-cleanup',
+ title: 'Clean Up Demo Volume',
+ type: 'command',
+ content: 'docker volume rm my-data-volume'
+ },
+ {
+ id: 'next-steps',
+ title: 'Volume Mastery Complete!',
+ type: 'text',
+ content: `
+Excellent! You now understand Docker volume fundamentals:
+- ✅ Why volumes are needed for persistent storage
+- ✅ How to create and manage named volumes
+- ✅ Difference between volumes and bind mounts
+- ✅ How to share data between containers
+- ✅ How to backup and restore volume data
+- ✅ Essential volume management commands
+
+**Coming next:** Learn about Docker Compose to orchestrate multi-container applications!
+ `
+ }
+ ],
+ nextLab: 'docker-compose-basics',
+ previousLab: 'dockerfile-basics'
+};
+EOF
+
+# Create Lab 5: Docker Compose
+cat > src/labs/beginners/docker-compose.ts << 'EOF'
+import { Lab } from '@/types/lab';
+
+export const dockerComposeLab: Lab = {
+ id: 'docker-compose-basics',
+ title: 'Docker Compose: Multi-Container Applications',
+ description: 'Learn how to use Docker Compose to define, run, and manage multi-container applications with YAML configuration files.',
+ category: 'beginners',
+ difficulty: 4,
+ duration: '30-35 minutes',
+ prerequisites: [
+ 'Docker installed on your system',
+ 'Docker Compose installed (included with Docker Desktop)',
+ 'Completed previous Docker labs',
+ 'Basic YAML syntax knowledge',
+ 'Understanding of containers, images, and volumes'
+ ],
+ tags: [
+ 'docker-compose',
+ 'yaml',
+ 'multi-container',
+ 'microservices',
+ 'orchestration',
+ 'services',
+ 'networks',
+ 'beginner'
+ ],
+ author: 'Docker Community',
+ lastUpdated: '2024-06-30',
+ featured: true,
+ sections: [
+ {
+ id: 'introduction',
+ title: 'What is Docker Compose?',
+ type: 'text',
+ content: `
+**Docker Compose** is a tool for defining and running multi-container Docker applications. Instead of running multiple \`docker run\` commands, you define your entire application stack in a single YAML file.
+
+**Key benefits:**
+- **Single file configuration** - Define all services in one place
+- **Easy orchestration** - Start/stop entire application with one command
+- **Environment management** - Different configs for dev/staging/prod
+- **Service dependencies** - Control startup order and dependencies
+- **Network isolation** - Automatic network creation between services
+- **Volume management** - Persistent data across service restarts
+
+**Common use cases:**
+- Web application + database
+- Microservices architecture
+- Development environments
+- Testing and CI/CD pipelines
+ `
+ },
+ {
+ id: 'verify-compose',
+ title: 'Verify Docker Compose Installation',
+ type: 'command',
+ content: 'docker-compose --version'
+ },
+ {
+ id: 'create-project-directory',
+ title: 'Create Project Directory',
+ type: 'command',
+ content: 'mkdir wordpress-app && cd wordpress-app'
+ },
+ {
+ id: 'create-compose-file',
+ title: 'Create Docker Compose File',
+ type: 'code',
+ language: 'yaml',
+ content: `# Create docker-compose.yml
+cat > docker-compose.yml << 'EOF'
+version: '3.8'
+
+services:
+ # WordPress web application
+ wordpress:
+ image: wordpress:latest
+ ports:
+ - "8080:80"
+ environment:
+ WORDPRESS_DB_HOST: db:3306
+ WORDPRESS_DB_USER: wordpress
+ WORDPRESS_DB_PASSWORD: secure_password
+ WORDPRESS_DB_NAME: wordpress_db
+ volumes:
+ - wordpress_data:/var/www/html
+ depends_on:
+ - db
+ restart: unless-stopped
+
+ # MySQL database
+ db:
+ image: mysql:8.0
+ environment:
+ MYSQL_DATABASE: wordpress_db
+ MYSQL_USER: wordpress
+ MYSQL_PASSWORD: secure_password
+ MYSQL_ROOT_PASSWORD: root_password
+ volumes:
+ - db_data:/var/lib/mysql
+ restart: unless-stopped
+
+# Named volumes for persistent data
+volumes:
+ wordpress_data:
+ db_data:
+EOF`
+ },
+ {
+ id: 'compose-explanation',
+ title: 'Understanding the Compose File',
+ type: 'info',
+ content: `
+
+
Let's break down the docker-compose.yml structure:
+
+ - version: Compose file format version (3.8 is recommended)
+ - services: Defines the containers in your application
+ - image: Specifies which Docker image to use
+ - ports: Maps host ports to container ports
+ - environment: Sets environment variables
+ - volumes: Mounts volumes for persistent data
+ - depends_on: Controls service startup order
+ - restart: Restart policy for containers
+
+
Note: The scaling command above will fail because both WordPress containers try to use port 8080. In production, you'd use a load balancer. For now, let's scale back to 1 instance.
+ `
+ },
+ {
+ id: 'scale-back',
+ title: 'Scale Back to Single Instance',
+ type: 'command',
+ content: 'docker-compose up -d --scale wordpress=1'
+ },
+ {
+ id: 'exec-into-service',
+ title: 'Execute Commands in Services',
+ type: 'command',
+ content: 'docker-compose exec wordpress bash'
+ },
+ {
+ id: 'exec-commands',
+ title: 'Test Service Communication',
+ type: 'code',
+ language: 'bash',
+ content: `# Inside the WordPress container, test database connection:
+mysql -h db -u wordpress -psecure_password wordpress_db -e "SHOW TABLES;"
+
+# Check if we can resolve the database service name:
+nslookup db
+
+# Exit the container:
+exit`
+ },
+ {
+ id: 'networking-explanation',
+ title: 'Compose Networking Magic',
+ type: 'info',
+ content: `
+
+
Docker Compose automatically creates:
+
+ - Dedicated network: All services can communicate
+ - Service discovery: Services can reach each other by name
+ - DNS resolution: "db" resolves to the database container's IP
+ - Isolation: Your app is isolated from other Docker applications
+
+
This is why WordPress can connect to MySQL using "db:3306" as the host!
+
+
Best practices for Docker Compose:
+
+ - Use specific image tags instead of 'latest' for predictability
+ - Set restart policies for production services
+ - Use environment files (.env) for secrets and config
+ - Name your volumes for easier management
+ - Use health checks for critical services
+ - Keep compose files in version control with your code
+ - Use override files for environment-specific settings
+
+
Important: While Compose is great for development and simple deployments, consider using Docker Swarm, Kubernetes, or other orchestration tools for production environments that require high availability, scaling, and advanced networking.
+ `
+ },
+ {
+ id: 'completion',
+ title: 'Docker Compose Mastery!',
+ type: 'text',
+ content: `
+Outstanding! You've mastered Docker Compose fundamentals:
+- ✅ Understanding multi-container application architecture
+- ✅ Writing docker-compose.yml files with proper syntax
+- ✅ Managing services, networks, and volumes declaratively
+- ✅ Using essential Compose commands for daily workflows
+- ✅ Understanding service communication and networking
+- ✅ Managing different environments with override files
+- ✅ Following best practices for maintainable applications
+
+**You've completed the Docker Beginner track!** You now have the foundation to build and deploy containerized applications. Consider exploring intermediate topics like Docker Swarm, container security, and production deployment strategies.
+ `
+ }
+ ],
+ nextLab: 'docker-networking-basics',
+ previousLab: 'docker-volumes-basics'
+};
+EOF
+
+# Create the lab registry
+cat > src/utils/labRegistry.ts << 'EOF'
+import { Lab } from '@/types/lab';
+import { helloWorldLab } from '@/labs/beginners/hello-world';
+import { dockerImagesLab } from '@/labs/beginners/docker-images';
+import { dockerfileBasicsLab } from '@/labs/beginners/dockerfile-basics';
+import { dockerVolumesLab } from '@/labs/beginners/docker-volumes';
+import { dockerComposeLab } from '@/labs/beginners/docker-compose';
+
+export const labRegistry: Record = {
+ 'docker-hello-world': helloWorldLab,
+ 'docker-images-basics': dockerImagesLab,
+ 'dockerfile-basics': dockerfileBasicsLab,
+ 'docker-volumes-basics': dockerVolumesLab,
+ 'docker-compose-basics': dockerComposeLab,
+};
+
+export const getLabById = (id: string): Lab | undefined => {
+ return labRegistry[id];
+};
+
+export const getLabsByCategory = (category: string): Lab[] => {
+ return Object.values(labRegistry).filter(lab => lab.category === category);
+};
+
+export const getAllLabs = (): Lab[] => {
+ return Object.values(labRegistry);
+};
+
+export const getFeaturedLabs = (): Lab[] => {
+ return Object.values(labRegistry).filter(lab => lab.featured);
+};
+EOF
+
+echo "✅ All Docker lab files created successfully!"
+echo ""
+echo "📁 Files created:"
+echo " - src/types/lab.ts (TypeScript interfaces)"
+echo " - src/labs/beginners/hello-world.ts"
+echo " - src/labs/beginners/docker-images.ts"
+echo " - src/labs/beginners/dockerfile-basics.ts"
+echo " - src/labs/beginners/docker-volumes.ts"
+echo " - src/labs/beginners/docker-compose.ts"
+echo " - src/utils/labRegistry.ts (Lab management)"
+echo ""
+echo "🚀 Next steps:"
+echo " 1. Run this script after setting up your repository structure"
+echo " 2. Install dependencies: npm install"
+echo " 3. Create the React components for the modern UI"
+echo " 4. Test the labs with Docker Desktop"
+echo " 5. Push to your repository!"
+echo ""
+echo "🎉 You now have 5 fully migrated Docker labs ready to use!"
diff --git a/package-lock.json b/package-lock.json
index 664a61765..3498a2989 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -61,19 +61,19 @@
"devDependencies": {
"@eslint/js": "^9.9.0",
"@tailwindcss/typography": "^0.5.15",
- "@types/node": "^22.5.5",
- "@types/react": "^18.3.3",
- "@types/react-dom": "^18.3.0",
+ "@types/node": "^22.15.34",
+ "@types/react": "^18.3.23",
+ "@types/react-dom": "^18.3.7",
"@vitejs/plugin-react-swc": "^3.5.0",
- "autoprefixer": "^10.4.20",
+ "autoprefixer": "^10.4.21",
"eslint": "^9.9.0",
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.9",
"globals": "^15.9.0",
"lovable-tagger": "^1.1.7",
- "postcss": "^8.4.47",
- "tailwindcss": "^3.4.11",
- "typescript": "^5.5.3",
+ "postcss": "^8.5.6",
+ "tailwindcss": "^3.4.17",
+ "typescript": "^5.8.3",
"typescript-eslint": "^8.0.1",
"vite": "^5.4.1"
}
diff --git a/package.json b/package.json
index 95aad28f2..822a92e3f 100644
--- a/package.json
+++ b/package.json
@@ -5,10 +5,12 @@
"type": "module",
"scripts": {
"dev": "vite",
- "build": "vite build",
+ "build": "react-scripts build",
"build:dev": "vite build --mode development",
- "lint": "eslint .",
- "preview": "vite preview"
+ "lint": "eslint src --ext .ts,.tsx",
+ "preview": "vite preview",
+ "start": "react-scripts start",
+ "test": "react-scripts test"
},
"dependencies": {
"@hookform/resolvers": "^3.9.0",
@@ -64,19 +66,19 @@
"devDependencies": {
"@eslint/js": "^9.9.0",
"@tailwindcss/typography": "^0.5.15",
- "@types/node": "^22.5.5",
- "@types/react": "^18.3.3",
- "@types/react-dom": "^18.3.0",
+ "@types/node": "^22.15.34",
+ "@types/react": "^18.3.23",
+ "@types/react-dom": "^18.3.7",
"@vitejs/plugin-react-swc": "^3.5.0",
- "autoprefixer": "^10.4.20",
+ "autoprefixer": "^10.4.21",
"eslint": "^9.9.0",
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.9",
"globals": "^15.9.0",
"lovable-tagger": "^1.1.7",
- "postcss": "^8.4.47",
- "tailwindcss": "^3.4.11",
- "typescript": "^5.5.3",
+ "postcss": "^8.5.6",
+ "tailwindcss": "^3.4.17",
+ "typescript": "^5.8.3",
"typescript-eslint": "^8.0.1",
"vite": "^5.4.1"
}
diff --git a/src/labs/beginners/docker-compose.ts b/src/labs/beginners/docker-compose.ts
new file mode 100644
index 000000000..a1fbca6e9
--- /dev/null
+++ b/src/labs/beginners/docker-compose.ts
@@ -0,0 +1,406 @@
+import { Lab } from '@/types/lab';
+
+export const dockerComposeLab: Lab = {
+ id: 'docker-compose-basics',
+ title: 'Docker Compose: Multi-Container Applications',
+ description: 'Learn how to use Docker Compose to define, run, and manage multi-container applications with YAML configuration files.',
+ category: 'beginners',
+ difficulty: 4,
+ duration: '30-35 minutes',
+ prerequisites: [
+ 'Docker installed on your system',
+ 'Docker Compose installed (included with Docker Desktop)',
+ 'Completed previous Docker labs',
+ 'Basic YAML syntax knowledge',
+ 'Understanding of containers, images, and volumes'
+ ],
+ tags: [
+ 'docker-compose',
+ 'yaml',
+ 'multi-container',
+ 'microservices',
+ 'orchestration',
+ 'services',
+ 'networks',
+ 'beginner'
+ ],
+ author: 'Docker Community',
+ lastUpdated: '2024-06-30',
+ featured: true,
+ sections: [
+ {
+ id: 'introduction',
+ title: 'What is Docker Compose?',
+ type: 'text',
+ content: `
+**Docker Compose** is a tool for defining and running multi-container Docker applications. Instead of running multiple \`docker run\` commands, you define your entire application stack in a single YAML file.
+
+**Key benefits:**
+- **Single file configuration** - Define all services in one place
+- **Easy orchestration** - Start/stop entire application with one command
+- **Environment management** - Different configs for dev/staging/prod
+- **Service dependencies** - Control startup order and dependencies
+- **Network isolation** - Automatic network creation between services
+- **Volume management** - Persistent data across service restarts
+
+**Common use cases:**
+- Web application + database
+- Microservices architecture
+- Development environments
+- Testing and CI/CD pipelines
+ `
+ },
+ {
+ id: 'verify-compose',
+ title: 'Verify Docker Compose Installation',
+ type: 'command',
+ content: 'docker-compose --version'
+ },
+ {
+ id: 'create-project-directory',
+ title: 'Create Project Directory',
+ type: 'command',
+ content: 'mkdir wordpress-app && cd wordpress-app'
+ },
+ {
+ id: 'create-compose-file',
+ title: 'Create Docker Compose File',
+ type: 'code',
+ language: 'yaml',
+ content: `# Create docker-compose.yml
+cat > docker-compose.yml << 'EOF'
+version: '3.8'
+
+services:
+ # WordPress web application
+ wordpress:
+ image: wordpress:latest
+ ports:
+ - "8080:80"
+ environment:
+ WORDPRESS_DB_HOST: db:3306
+ WORDPRESS_DB_USER: wordpress
+ WORDPRESS_DB_PASSWORD: secure_password
+ WORDPRESS_DB_NAME: wordpress_db
+ volumes:
+ - wordpress_data:/var/www/html
+ depends_on:
+ - db
+ restart: unless-stopped
+
+ # MySQL database
+ db:
+ image: mysql:8.0
+ environment:
+ MYSQL_DATABASE: wordpress_db
+ MYSQL_USER: wordpress
+ MYSQL_PASSWORD: secure_password
+ MYSQL_ROOT_PASSWORD: root_password
+ volumes:
+ - db_data:/var/lib/mysql
+ restart: unless-stopped
+
+# Named volumes for persistent data
+volumes:
+ wordpress_data:
+ db_data:
+EOF`
+ },
+ {
+ id: 'compose-explanation',
+ title: 'Understanding the Compose File',
+ type: 'info',
+ content: `
+
+
Let's break down the docker-compose.yml structure:
+
+ - version: Compose file format version (3.8 is recommended)
+ - services: Defines the containers in your application
+ - image: Specifies which Docker image to use
+ - ports: Maps host ports to container ports
+ - environment: Sets environment variables
+ - volumes: Mounts volumes for persistent data
+ - depends_on: Controls service startup order
+ - restart: Restart policy for containers
+
+
Note: The scaling command above will fail because both WordPress containers try to use port 8080. In production, you'd use a load balancer. For now, let's scale back to 1 instance.
+ `
+ },
+ {
+ id: 'scale-back',
+ title: 'Scale Back to Single Instance',
+ type: 'command',
+ content: 'docker-compose up -d --scale wordpress=1'
+ },
+ {
+ id: 'exec-into-service',
+ title: 'Execute Commands in Services',
+ type: 'command',
+ content: 'docker-compose exec wordpress bash'
+ },
+ {
+ id: 'exec-commands',
+ title: 'Test Service Communication',
+ type: 'code',
+ language: 'bash',
+ content: `# Inside the WordPress container, test database connection:
+mysql -h db -u wordpress -psecure_password wordpress_db -e "SHOW TABLES;"
+
+# Check if we can resolve the database service name:
+nslookup db
+
+# Exit the container:
+exit`
+ },
+ {
+ id: 'networking-explanation',
+ title: 'Compose Networking Magic',
+ type: 'info',
+ content: `
+
+
Docker Compose automatically creates:
+
+ - Dedicated network: All services can communicate
+ - Service discovery: Services can reach each other by name
+ - DNS resolution: "db" resolves to the database container's IP
+ - Isolation: Your app is isolated from other Docker applications
+
+
This is why WordPress can connect to MySQL using "db:3306" as the host!
+
+
Best practices for Docker Compose:
+
+ - Use specific image tags instead of 'latest' for predictability
+ - Set restart policies for production services
+ - Use environment files (.env) for secrets and config
+ - Name your volumes for easier management
+ - Use health checks for critical services
+ - Keep compose files in version control with your code
+ - Use override files for environment-specific settings
+
+
Important: While Compose is great for development and simple deployments, consider using Docker Swarm, Kubernetes, or other orchestration tools for production environments that require high availability, scaling, and advanced networking.
+ `
+ },
+ {
+ id: 'completion',
+ title: 'Docker Compose Mastery!',
+ type: 'text',
+ content: `
+Outstanding! You've mastered Docker Compose fundamentals:
+- ✅ Understanding multi-container application architecture
+- ✅ Writing docker-compose.yml files with proper syntax
+- ✅ Managing services, networks, and volumes declaratively
+- ✅ Using essential Compose commands for daily workflows
+- ✅ Understanding service communication and networking
+- ✅ Managing different environments with override files
+- ✅ Following best practices for maintainable applications
+
+**You've completed the Docker Beginner track!** You now have the foundation to build and deploy containerized applications. Consider exploring intermediate topics like Docker Swarm, container security, and production deployment strategies.
+ `
+ }
+ ],
+ nextLab: 'docker-networking-basics',
+ previousLab: 'docker-volumes-basics'
+};
diff --git a/src/labs/beginners/docker-images.ts b/src/labs/beginners/docker-images.ts
new file mode 100644
index 000000000..e9ce4c3ce
--- /dev/null
+++ b/src/labs/beginners/docker-images.ts
@@ -0,0 +1,245 @@
+import { Lab } from '@/types/lab';
+
+export const dockerImagesLab: Lab = {
+ id: 'docker-images-basics',
+ title: 'Working with Docker Images',
+ description: 'Learn how to search, pull, inspect, and manage Docker images. Understand the difference between images and containers, and explore Docker Hub.',
+ category: 'beginners',
+ difficulty: 2,
+ duration: '15-20 minutes',
+ prerequisites: [
+ 'Docker installed on your system',
+ 'Completed "Docker Hello World" lab',
+ 'Basic command line knowledge'
+ ],
+ tags: [
+ 'docker',
+ 'images',
+ 'docker-hub',
+ 'pull',
+ 'search',
+ 'inspect',
+ 'beginner'
+ ],
+ author: 'Docker Community',
+ lastUpdated: '2024-06-30',
+ featured: false,
+ sections: [
+ {
+ id: 'introduction',
+ title: 'Understanding Docker Images',
+ type: 'text',
+ content: `
+Docker images are the foundation of containers. Think of an image as a read-only template that contains:
+- Application code
+- Runtime environment
+- System tools and libraries
+- Settings and configurations
+
+**Key concepts:**
+- **Images** are templates used to create containers
+- **Containers** are running instances of images
+- **Docker Hub** is the default public registry for images
+- Images are built in layers for efficiency
+
+In this lab, you'll learn how to find, download, and inspect Docker images.
+ `
+ },
+ {
+ id: 'search-images',
+ title: 'Search for Images on Docker Hub',
+ type: 'command',
+ content: 'docker search nginx'
+ },
+ {
+ id: 'search-explanation',
+ title: 'Understanding Search Results',
+ type: 'text',
+ content: `
+The search command shows available images on Docker Hub. You'll see output like:
+
+\`\`\`
+NAME DESCRIPTION STARS OFFICIAL AUTOMATED
+nginx Official build of Nginx. 15000 [OK]
+nginx/nginx-... NGINX Plus and NGINX based... 75
+nginxinc/nginx-... NGINX Unprivileged 20
+\`\`\`
+
+**Key columns:**
+- **NAME**: Repository name (official images have simple names)
+- **DESCRIPTION**: Brief description of the image
+- **STARS**: Community rating (like GitHub stars)
+- **OFFICIAL**: Maintained by Docker or the original software vendor
+- **AUTOMATED**: Automatically built from source code
+ `
+ },
+ {
+ id: 'pull-image',
+ title: 'Pull an Image',
+ type: 'command',
+ content: 'docker pull nginx:alpine'
+ },
+ {
+ id: 'pull-explanation',
+ title: 'Understanding Image Tags',
+ type: 'text',
+ content: `
+The \`docker pull\` command downloads an image to your local system. Notice we used \`nginx:alpine\`:
+
+- **nginx** is the image name
+- **alpine** is the tag (version)
+- If no tag is specified, Docker uses \`:latest\` by default
+
+**Common tag patterns:**
+- \`latest\` - Most recent stable version
+- \`alpine\` - Smaller version based on Alpine Linux
+- \`1.21\` - Specific version number
+- \`1.21-alpine\` - Specific version with Alpine base
+ `
+ },
+ {
+ id: 'list-local-images',
+ title: 'List Local Images',
+ type: 'command',
+ content: 'docker images'
+ },
+ {
+ id: 'inspect-image',
+ title: 'Inspect an Image',
+ type: 'command',
+ content: 'docker inspect nginx:alpine'
+ },
+ {
+ id: 'inspect-explanation',
+ title: 'Understanding Image Details',
+ type: 'text',
+ content: `
+The \`docker inspect\` command provides detailed information about an image including:
+- Configuration settings
+- Environment variables
+- Exposed ports
+- Volume mount points
+- Layer information
+- Creation date and size
+
+This metadata helps you understand how to properly run containers from the image.
+ `
+ },
+ {
+ id: 'image-history',
+ title: 'View Image Layers',
+ type: 'command',
+ content: 'docker history nginx:alpine'
+ },
+ {
+ id: 'layers-explanation',
+ title: 'Understanding Image Layers',
+ type: 'info',
+ content: `
+
+
Docker images are built in layers for efficiency:
+
+ - Base Layer: Usually an OS like Alpine or Ubuntu
+ - Application Layers: Your app code and dependencies
+ - Configuration Layers: Settings and metadata
+ - Shared Layers: Common layers are reused between images
+
+
This layered approach saves disk space and speeds up image downloads!
+
+
Official Images:
+
+ - Maintained by Docker or the software vendor
+ - Regularly updated and security-patched
+ - Simple names like
nginx, mysql, python
+ - Best choice for production use
+
+
Community Images:
+
+ - Created by community members
+ - Format:
username/imagename
+ - May include specialized configurations
+ - Always verify trustworthiness before use
+
+
Important: Images can consume significant disk space. Use docker system df to see space usage and docker image prune to remove unused images. Be careful not to remove images you still need!
+ `
+ },
+ {
+ id: 'next-steps',
+ title: 'What You\'ve Learned',
+ type: 'text',
+ content: `
+Excellent work! You now understand:
+- ✅ How to search for images on Docker Hub
+- ✅ How to pull images with specific tags
+- ✅ How to inspect image details and layers
+- ✅ The difference between official and community images
+- ✅ How to run containers from images
+- ✅ Basic image management and cleanup
+
+**Coming up next:** Learn how to create your own custom Docker images using Dockerfiles!
+ `
+ }
+ ],
+ nextLab: 'dockerfile-basics',
+ previousLab: 'docker-hello-world'
+};
diff --git a/src/labs/beginners/docker-volumes.ts b/src/labs/beginners/docker-volumes.ts
new file mode 100644
index 000000000..0d7ee100b
--- /dev/null
+++ b/src/labs/beginners/docker-volumes.ts
@@ -0,0 +1,289 @@
+import { Lab } from '@/types/lab';
+
+export const dockerVolumesLab: Lab = {
+ id: 'docker-volumes-basics',
+ title: 'Docker Volumes: Managing Persistent Data',
+ description: 'Learn how to use Docker volumes to persist data, share files between containers and host, and manage container storage effectively.',
+ category: 'beginners',
+ difficulty: 3,
+ duration: '20-25 minutes',
+ prerequisites: [
+ 'Docker installed on your system',
+ 'Completed "Dockerfile Basics" lab',
+ 'Understanding of containers and images',
+ 'Basic file system knowledge'
+ ],
+ tags: [
+ 'docker',
+ 'volumes',
+ 'persistent-data',
+ 'bind-mounts',
+ 'storage',
+ 'data-management',
+ 'beginner'
+ ],
+ author: 'Docker Community',
+ lastUpdated: '2024-06-30',
+ featured: false,
+ sections: [
+ {
+ id: 'introduction',
+ title: 'Understanding Docker Storage',
+ type: 'text',
+ content: `
+By default, data created inside a Docker container is lost when the container is removed. This is where **Docker volumes** come to the rescue!
+
+**Storage types in Docker:**
+- **Container layer**: Temporary, lost when container is removed
+- **Bind mounts**: Direct access to host filesystem
+- **Volumes**: Docker-managed storage (recommended)
+- **tmpfs mounts**: In-memory storage (temporary)
+
+**Why use volumes?**
+- Persist data beyond container lifecycle
+- Share data between containers
+- Back up and migrate data easily
+- Better performance than bind mounts on Windows/Mac
+ `
+ },
+ {
+ id: 'problem-demo',
+ title: 'Demonstrate the Problem',
+ type: 'command',
+ content: 'docker run --rm -it alpine sh -c "echo Hello > /tmp/test.txt && cat /tmp/test.txt"'
+ },
+ {
+ id: 'problem-explanation',
+ title: 'The Data Loss Problem',
+ type: 'text',
+ content: `
+The command above created a file inside the container, displayed it, then the container was removed (--rm flag).
+
+Let's verify the data is gone by trying to access it again:
+ `
+ },
+ {
+ id: 'verify-data-loss',
+ title: 'Verify Data is Lost',
+ type: 'command',
+ content: 'docker run --rm -it alpine sh -c "cat /tmp/test.txt || echo File not found"'
+ },
+ {
+ id: 'create-volume',
+ title: 'Create a Named Volume',
+ type: 'command',
+ content: 'docker volume create my-data-volume'
+ },
+ {
+ id: 'list-volumes',
+ title: 'List Docker Volumes',
+ type: 'command',
+ content: 'docker volume ls'
+ },
+ {
+ id: 'inspect-volume',
+ title: 'Inspect Volume Details',
+ type: 'command',
+ content: 'docker volume inspect my-data-volume'
+ },
+ {
+ id: 'volume-info',
+ title: 'Understanding Volume Details',
+ type: 'info',
+ content: `
+
+
The docker volume inspect command shows important information:
+
+ - Mountpoint: Where Docker stores the volume data on the host
+ - Driver: Storage driver used (usually 'local')
+ - Labels: Metadata attached to the volume
+ - Options: Additional configuration options
+
+
Note: Don't directly access the mountpoint - always use Docker commands!
+
+
Bind Mounts:
+
+ - Mount a specific host path into container
+ - Syntax:
-v /host/path:/container/path
+ - Good for development (editing files with host tools)
+ - Host-dependent (path must exist on host)
+
+
Named Volumes:
+
+ - Docker manages the storage location
+ - Syntax:
-v volume-name:/container/path
+ - Good for production (portable, managed by Docker)
+ - Better performance on Windows/Mac
+
+
Hello from Volume!
This content is stored in a Docker volume.
\' > /data/index.html"'
+ },
+ {
+ id: 'test-web-server',
+ title: 'Test the Web Server',
+ type: 'text',
+ content: `
+Visit **http://localhost:8080** in your browser. You should see the HTML content we just created!
+
+This demonstrates how volumes can be used to:
+- Provide content to web servers
+- Share data between containers
+- Persist important application data
+ `
+ },
+ {
+ id: 'sharing-volumes',
+ title: 'Share Volume Between Containers',
+ type: 'command',
+ content: 'docker run --rm -v my-data-volume:/shared alpine sh -c "echo Additional content >> /shared/index.html"'
+ },
+ {
+ id: 'volume-backup',
+ title: 'Backup Volume Data',
+ type: 'command',
+ content: 'docker run --rm -v my-data-volume:/backup-source -v $(pwd):/backup-dest alpine tar czf /backup-dest/my-volume-backup.tar.gz -C /backup-source .'
+ },
+ {
+ id: 'backup-explanation',
+ title: 'Understanding Volume Backup',
+ type: 'text',
+ content: `
+The backup command above:
+1. Mounts the volume as \`/backup-source\`
+2. Mounts current directory as \`/backup-dest\`
+3. Creates a compressed archive of the volume content
+4. Saves it to your host filesystem
+
+This is a common pattern for backing up Docker volume data. You can restore by reversing the process!
+ `
+ },
+ {
+ id: 'cleanup-containers',
+ title: 'Clean Up Containers',
+ type: 'command',
+ content: 'docker stop web-server && docker rm web-server'
+ },
+ {
+ id: 'volume-commands',
+ title: 'Essential Volume Commands',
+ type: 'code',
+ language: 'bash',
+ content: `# List all volumes
+docker volume ls
+
+# Create a volume
+docker volume create volume-name
+
+# Inspect volume details
+docker volume inspect volume-name
+
+# Remove a volume (only if not in use)
+docker volume rm volume-name
+
+# Remove all unused volumes
+docker volume prune
+
+# Run container with volume
+docker run -v volume-name:/mount/path image-name`
+ },
+ {
+ id: 'volume-warning',
+ title: 'Important Volume Notes',
+ type: 'warning',
+ content: `
+Warning: Removing a volume deletes all its data permanently! Always backup important volumes before removal. Use docker volume prune carefully as it removes ALL unused volumes.
+ `
+ },
+ {
+ id: 'volume-cleanup',
+ title: 'Clean Up Demo Volume',
+ type: 'command',
+ content: 'docker volume rm my-data-volume'
+ },
+ {
+ id: 'next-steps',
+ title: 'Volume Mastery Complete!',
+ type: 'text',
+ content: `
+Excellent! You now understand Docker volume fundamentals:
+- ✅ Why volumes are needed for persistent storage
+- ✅ How to create and manage named volumes
+- ✅ Difference between volumes and bind mounts
+- ✅ How to share data between containers
+- ✅ How to backup and restore volume data
+- ✅ Essential volume management commands
+
+**Coming next:** Learn about Docker Compose to orchestrate multi-container applications!
+ `
+ }
+ ],
+ nextLab: 'docker-compose-basics',
+ previousLab: 'dockerfile-basics'
+};
diff --git a/src/labs/beginners/dockerfile-basics.ts b/src/labs/beginners/dockerfile-basics.ts
new file mode 100644
index 000000000..5a5af2587
--- /dev/null
+++ b/src/labs/beginners/dockerfile-basics.ts
@@ -0,0 +1,282 @@
+import { Lab } from '@/types/lab';
+
+export const dockerfileBasicsLab: Lab = {
+ id: 'dockerfile-basics',
+ title: 'Dockerfile Basics: Building Your First Image',
+ description: 'Learn how to create Dockerfiles and build custom Docker images. Understand essential Dockerfile instructions and best practices for creating efficient images.',
+ category: 'beginners',
+ difficulty: 3,
+ duration: '25-30 minutes',
+ prerequisites: [
+ 'Docker installed on your system',
+ 'Completed "Working with Docker Images" lab',
+ 'Basic understanding of containers and images',
+ 'Text editor knowledge'
+ ],
+ tags: [
+ 'dockerfile',
+ 'docker-build',
+ 'custom-images',
+ 'FROM',
+ 'RUN',
+ 'COPY',
+ 'CMD',
+ 'EXPOSE',
+ 'beginner'
+ ],
+ author: 'Docker Community',
+ lastUpdated: '2024-06-30',
+ featured: false,
+ sections: [
+ {
+ id: 'introduction',
+ title: 'What is a Dockerfile?',
+ type: 'text',
+ content: `
+A **Dockerfile** is a text file containing a series of instructions that Docker uses to automatically build images. Think of it as a recipe for creating your custom Docker image.
+
+**Key benefits:**
+- **Reproducible**: Same Dockerfile always builds the same image
+- **Version controlled**: Store Dockerfiles in Git alongside your code
+- **Automated**: No manual steps required to build images
+- **Portable**: Works the same way on any Docker-enabled system
+
+**Common Dockerfile instructions:**
+- \`FROM\` - Specifies the base image
+- \`RUN\` - Executes commands during build
+- \`COPY\` - Copies files from host to image
+- \`CMD\` - Specifies the default command to run
+- \`EXPOSE\` - Documents which ports the app uses
+ `
+ },
+ {
+ id: 'create-project',
+ title: 'Create a Project Directory',
+ type: 'command',
+ content: 'mkdir my-first-dockerfile && cd my-first-dockerfile'
+ },
+ {
+ id: 'create-html-file',
+ title: 'Create a Simple HTML File',
+ type: 'code',
+ language: 'bash',
+ content: `cat > index.html << 'EOF'
+
+
+
+ My First Docker App
+
+
+
+
+
🐳 Hello from Docker!
+
This HTML file is served from a custom Docker container.
+
Built with: Dockerfile
+
+
Let's break down each instruction:
+
+ - FROM nginx:alpine - Starts with the official nginx image based on Alpine Linux
+ - LABEL - Adds metadata to the image (like version info or maintainer)
+ - COPY index.html /usr/share/nginx/html/ - Copies our HTML file into the nginx web directory
+ - EXPOSE 80 - Documents that this container listens on port 80
+ - CMD - Not needed here since nginx:alpine already has a CMD to start the web server
+
+
+
Key best practices for writing Dockerfiles:
+
+ - Use official base images when possible (more secure and maintained)
+ - Keep images small - use Alpine variants for smaller size
+ - Minimize layers - combine RUN commands with && when logical
+ - Use .dockerignore to exclude unnecessary files
+ - Don't run as root - create and use a non-root user
+ - Use specific tags - avoid 'latest' in production
+
+
Security Best Practice: Always avoid including sensitive information like passwords, API keys, or certificates directly in Dockerfiles. Use environment variables, Docker secrets, or external configuration management instead.
+ `
+ },
+ {
+ id: 'next-steps',
+ title: 'Congratulations!',
+ type: 'text',
+ content: `
+You've successfully learned Dockerfile fundamentals! You can now:
+- ✅ Write basic Dockerfiles with essential instructions
+- ✅ Build custom Docker images from source code
+- ✅ Understand the layered architecture of images
+- ✅ Apply basic security and efficiency best practices
+- ✅ Run containers from your custom images
+
+**Next up:** Learn about Docker volumes for persistent data and advanced container networking!
+ `
+ }
+ ],
+ nextLab: 'docker-volumes-basics',
+ previousLab: 'docker-images-basics'
+};
diff --git a/src/labs/beginners/hello-world.ts b/src/labs/beginners/hello-world.ts
new file mode 100644
index 000000000..f1a1fb019
--- /dev/null
+++ b/src/labs/beginners/hello-world.ts
@@ -0,0 +1,193 @@
+import { Lab } from '@/types/lab';
+
+export const helloWorldLab: Lab = {
+ id: 'docker-hello-world',
+ title: 'Docker Hello World: Your First Container',
+ description: 'Learn Docker fundamentals by running your very first container. Understand the Docker workflow and basic commands through the classic hello-world example.',
+ category: 'beginners',
+ difficulty: 1,
+ duration: '5-10 minutes',
+ prerequisites: [
+ 'Docker installed on your system',
+ 'Access to command line/terminal'
+ ],
+ tags: [
+ 'docker',
+ 'hello-world',
+ 'containers',
+ 'beginner',
+ 'first-steps',
+ 'docker-run'
+ ],
+ author: 'Docker Community',
+ lastUpdated: '2024-06-30',
+ featured: true,
+ sections: [
+ {
+ id: 'introduction',
+ title: 'Introduction to Docker Containers',
+ type: 'text',
+ content: `
+Welcome to your first Docker lab! In this tutorial, you'll run your very first Docker container using the famous "hello-world" image.
+
+**What you'll learn:**
+- How to run your first Docker container
+- Understanding the Docker workflow
+- Basic Docker commands
+- How Docker pulls images from Docker Hub
+- Container lifecycle basics
+
+The hello-world image is a minimal Docker image designed to demonstrate that Docker is working correctly on your system.
+ `
+ },
+ {
+ id: 'run-hello-world',
+ title: 'Run Your First Container',
+ type: 'command',
+ content: 'docker run hello-world'
+ },
+ {
+ id: 'understanding-output',
+ title: 'Understanding the Output',
+ type: 'text',
+ content: `
+When you ran the command above, you should see output similar to this:
+
+\`\`\`
+Unable to find image 'hello-world:latest' locally
+latest: Pulling from library/hello-world
+b8dfde127a29: Pull complete
+Digest: sha256:5122f6204b6a3596e048758cabba3c46b1c937a46b5be6225b835d091b90e46c
+Status: Downloaded newer image for hello-world:latest
+
+Hello from Docker!
+This message shows that your installation appears to be working correctly.
+\`\`\`
+
+**What happened step by step:**
+1. Docker client contacted the Docker daemon
+2. Daemon looked for the image locally (didn't find it)
+3. Daemon pulled the image from Docker Hub
+4. Daemon created a new container from the image
+5. Container executed and produced the output
+6. Container exited after completing its task
+ `
+ },
+ {
+ id: 'docker-workflow-info',
+ title: 'The Docker Workflow',
+ type: 'info',
+ content: `
+
+
Understanding what happened when you ran docker run hello-world:
+
+ - Image Pull: Docker automatically downloaded the hello-world image from Docker Hub
+ - Container Creation: A new container was created from the image
+ - Execution: The container ran its program (printing the message)
+ - Exit: The container stopped after completing its task
+
+
Note: Each time you run docker run, it creates a new container. Over time, you may accumulate many stopped containers. Use docker container prune to clean up stopped containers when needed.
+ `
+ },
+ {
+ id: 'next-steps',
+ title: 'What\'s Next?',
+ type: 'text',
+ content: `
+Congratulations! You've successfully:
+- ✅ Run your first Docker container
+- ✅ Understood the Docker workflow
+- ✅ Learned basic Docker commands
+- ✅ Explored container and image concepts
+
+**Ready for more?** In the next lab, you'll learn about:
+- Building your own Docker images
+- Working with Dockerfiles
+- Managing container data
+ `
+ }
+ ],
+ nextLab: 'docker-images-basics',
+ previousLab: null
+};
diff --git a/src/types/lab.ts b/src/types/lab.ts
new file mode 100644
index 000000000..dcee8ae29
--- /dev/null
+++ b/src/types/lab.ts
@@ -0,0 +1,25 @@
+export interface Lab {
+ id: string;
+ title: string;
+ description: string;
+ category: 'beginners' | 'intermediate' | 'advanced' | 'networking' | 'security' | 'cloud';
+ difficulty: 1 | 2 | 3 | 4 | 5;
+ duration: string;
+ prerequisites: string[];
+ tags: string[];
+ author: string;
+ lastUpdated: string;
+ featured: boolean;
+ sections: LabSection[];
+ nextLab?: string;
+ previousLab?: string;
+}
+
+export interface LabSection {
+ id: string;
+ title: string;
+ type: 'text' | 'code' | 'command' | 'warning' | 'info' | 'image';
+ content: string;
+ language?: string;
+ imageUrl?: string;
+}
diff --git a/src/utils/labRegistry.ts b/src/utils/labRegistry.ts
new file mode 100644
index 000000000..37a1d2995
--- /dev/null
+++ b/src/utils/labRegistry.ts
@@ -0,0 +1,30 @@
+import { Lab } from '@/types/lab';
+import { helloWorldLab } from '@/labs/beginners/hello-world';
+import { dockerImagesLab } from '@/labs/beginners/docker-images';
+import { dockerfileBasicsLab } from '@/labs/beginners/dockerfile-basics';
+import { dockerVolumesLab } from '@/labs/beginners/docker-volumes';
+import { dockerComposeLab } from '@/labs/beginners/docker-compose';
+
+export const labRegistry: Record = {
+ 'docker-hello-world': helloWorldLab,
+ 'docker-images-basics': dockerImagesLab,
+ 'dockerfile-basics': dockerfileBasicsLab,
+ 'docker-volumes-basics': dockerVolumesLab,
+ 'docker-compose-basics': dockerComposeLab,
+};
+
+export const getLabById = (id: string): Lab | undefined => {
+ return labRegistry[id];
+};
+
+export const getLabsByCategory = (category: string): Lab[] => {
+ return Object.values(labRegistry).filter(lab => lab.category === category);
+};
+
+export const getAllLabs = (): Lab[] => {
+ return Object.values(labRegistry);
+};
+
+export const getFeaturedLabs = (): Lab[] => {
+ return Object.values(labRegistry).filter(lab => lab.featured);
+};