Skip to content

Modern dockerlabs #545

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

Open
wants to merge 2 commits into
base: modern-docker-labs
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions dockerlabs/README-MODERN-LABS.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
# Modern Docker Labs Platform

A modern, interactive learning platform for Docker built with React + TypeScript.

## 🚀 Features

- **Interactive Learning**: Modern UI with left sidebar navigation
- **One-Click Commands**: Copy Docker commands with a single click
- **Syntax Highlighting**: Dockerfile, YAML, and Bash code highlighting
- **Progress Tracking**: Track your learning progress across labs
- **Mobile Responsive**: Learn Docker on any device
- **Beginner Friendly**: Structured learning path from basics to advanced

## 📚 Available Labs

### Beginners Track (2/5 labs migrated) ✅
1. **Docker Hello World**: Your First Container
2. **Working with Docker Images**: Search, pull, inspect, and manage

### Coming Soon
- Dockerfile Basics: Building Your First Image
- Docker Volumes: Managing Persistent Data
- Docker Compose: Multi-Container Applications

## 🛠 Development

```bash
# Install dependencies (when package.json is complete)
npm install

# Start development server
npm start

# Build for production
npm run build
```

## 🗂 Project Structure

```
src/
├── types/lab.ts # TypeScript interfaces
├── labs/beginners/ # Beginner lab implementations
├── components/ # React UI components (coming soon)
└── utils/labRegistry.ts # Lab management utilities
```

## 🤝 Contributing

1. Follow the Lab interface for new labs
2. Test all commands with Docker Desktop
3. Ensure mobile-responsive content
4. Include proper error handling examples

## 📄 License

Inherits license from main dockerlabs repository.
56 changes: 56 additions & 0 deletions dockerlabs/docs/MIGRATION.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
# Docker Labs Migration to Modern Format

This document describes the migration of Docker labs from markdown to a modern TypeScript/React format.

## Migration Goals

- **Interactive Learning**: Modern UI with sidebar navigation
- **Better UX**: One-click command copying, syntax highlighting
- **Mobile Support**: Responsive design for learning on any device
- **Type Safety**: Full TypeScript implementation
- **Maintainability**: Structured, version-controlled lab content

## Lab Structure

Each lab follows the `Lab` interface:

```typescript
interface Lab {
id: string; // Unique identifier
title: string; // Display title
description: string; // Brief description
category: string; // beginners | intermediate | advanced
difficulty: 1-5; // Difficulty level
duration: string; // Estimated time
prerequisites: string[]; // Required knowledge
tags: string[]; // Search tags
sections: LabSection[]; // Lab content
}
```

## Content Types

- `text`: Markdown-style instructional content
- `command`: Copyable Docker commands
- `code`: Syntax-highlighted code blocks
- `info`: Highlighted information boxes
- `warning`: Important warnings/notes

## Migration Status

### ✅ Completed (2/5 Beginner Labs)
- Docker Hello World: Your First Container
- Working with Docker Images

### 🔄 Remaining
- Dockerfile Basics: Building Your First Image
- Docker Volumes: Managing Persistent Data
- Docker Compose: Multi-Container Applications

## Quality Standards

- All commands tested with Docker Desktop
- Beginner-friendly explanations
- Security best practices included
- Mobile-responsive design
- Copy-to-clipboard functionality
19 changes: 19 additions & 0 deletions dockerlabs/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"name": "dockerlabs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"doc": "docs"
},
"scripts": {
"test": "react-scripts test",
"start": "react-scripts start",
"build": "react-scripts build",
"lint": "eslint src --ext .ts,.tsx"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "commonjs"
}
103 changes: 103 additions & 0 deletions dockerlabs/src/labs/beginners/docker-images.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
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: 'pull-image',
title: 'Pull an Image',
type: 'command',
content: 'docker pull nginx:alpine'
},
{
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: 'run-nginx',
title: 'Run a Container from the Image',
type: 'command',
content: 'docker run -d -p 8080:80 --name my-nginx nginx:alpine'
},
{
id: 'stop-container',
title: 'Stop and Remove the Container',
type: 'command',
content: 'docker stop my-nginx && docker rm my-nginx'
},
{
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'
};
124 changes: 124 additions & 0 deletions dockerlabs/src/labs/beginners/hello-world.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
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: `
<div class="space-y-3">
<p>Understanding what happened when you ran <code>docker run hello-world</code>:</p>
<ul class="list-disc list-inside space-y-1">
<li><strong>Image Pull:</strong> Docker automatically downloaded the hello-world image from Docker Hub</li>
<li><strong>Container Creation:</strong> A new container was created from the image</li>
<li><strong>Execution:</strong> The container ran its program (printing the message)</li>
<li><strong>Exit:</strong> The container stopped after completing its task</li>
</ul>
</div>
`
},
{
id: 'list-containers',
title: 'View Your Container',
type: 'command',
content: 'docker ps -a'
},
{
id: 'list-images',
title: 'View Downloaded Images',
type: 'command',
content: 'docker images'
},
{
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
};
25 changes: 25 additions & 0 deletions dockerlabs/src/types/lab.ts
Original file line number Diff line number Diff line change
@@ -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;
}
Loading