Skip to content

Commit cf4032e

Browse files
anthonydmaysanthonydmays
authored
docs: adds supplemental lesson 3 (#822)
* docs: adds slides for supplemental lesson 3 Signed-off-by: Anthony D. Mays <[email protected]> * feat: adds suppl3 demo Signed-off-by: Anthony D. Mays <[email protected]> --------- Signed-off-by: Anthony D. Mays <[email protected]>
1 parent 2c308ee commit cf4032e

File tree

7 files changed

+170
-1
lines changed

7 files changed

+170
-1
lines changed

‎slides/src/Slides/Lessons/Supplemental3.js‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import htm from "htm";
2+
import { createElement } from "react";
3+
import { CodeSlide, DemoSlide, Lesson, QuestionsSlide } from "../Layouts/index.js";
4+
5+
const html = htm.bind(createElement);
6+
7+
function Supplemental3() {
8+
return html`
9+
<${Lesson} title="Containerization with Docker" lessonId="supplemental_3" subtitle="Supplemental 3">
10+
<section>
11+
<p>Running software <em>consistently</em> across <em>different machines</em> is hard.</p>
12+
</section>
13+
<section class="ml-bullet-slide">
14+
<h3>Common problems containers solve</h3>
15+
<ul>
16+
<li class="fragment">“Works on my machine” environment drift</li>
17+
<li class="fragment">Dependency and version conflicts</li>
18+
<li class="fragment">Manual, error-prone setup steps</li>
19+
<li class="fragment">Scaling and isolation of services</li>
20+
</ul>
21+
</section>
22+
<section>
23+
<p><em>Containerization</em> packages your <em>app and its dependencies</em> into a portable, isolated unit.</p>
24+
</section>
25+
<section>
26+
<p>Containers <em>share the host OS kernel</em> and start fast (unlike heavy virtual machines).</p>
27+
</section>
28+
<section>
29+
<p><em>Docker</em> is the most popular tool for building, running, and sharing containers.</p>
30+
</section>
31+
<section>
32+
<p><em>Kubernetes</em> orchestrates containers across many machines for <em>reliability</em> and <em>scale</em>.</p>
33+
</section>
34+
<section>
35+
<p><em>Netflix</em>, <em>Airbnb</em>, <em>Shopify</em>, <em>Google</em>, <em>Reddit</em> (and many more) use containers in production.</p>
36+
</section>
37+
<section>
38+
<p>Getting started is simple: <em>install Docker Desktop</em> and <em>run a container</em>.</p>
39+
</section>
40+
<${CodeSlide} lang="bash" badge="Terminal" fontSize=".42em" lineNumbers=true>
41+
# Verify installation
42+
docker --version
43+
44+
# Pull and run a test image
45+
docker run --rm hello-world
46+
<//>
47+
<section>
48+
<p>Let’s containerize a simple <em>Node.js</em> web app.</p>
49+
</section>
50+
<${CodeSlide} lang="javascript" badge="app.js" fontSize=".42em" lineNumbers=true>
51+
// Minimal HTTP server (no external deps)
52+
import http from 'http';
53+
54+
const server = http.createServer((req, res) => {
55+
res.writeHead(200, { 'Content-Type': 'application/json' });
56+
res.end(JSON.stringify({ ok: true, time: new Date().toISOString() }));
57+
});
58+
59+
server.listen(3000, () => console.log('Listening on http://localhost:3000'));
60+
<//>
61+
<${CodeSlide} lang="dockerfile" badge="Dockerfile" fontSize=".38em" lineNumbers=true>
62+
# Use a small official Node image
63+
FROM node:20-alpine
64+
65+
# Create app directory
66+
WORKDIR /usr/src/app
67+
68+
# Copy source
69+
COPY app.js ./
70+
71+
# Expose port and run
72+
EXPOSE 3000
73+
CMD ["node", "app.js"]
74+
<//>
75+
<${CodeSlide} lang="bash" badge="Terminal" fontSize=".42em" lineNumbers=true>
76+
# Build image (tag as demo:latest)
77+
docker build -t demo:latest .
78+
79+
# Run container and map port 3000
80+
docker run --rm -p 3000:3000 demo:latest
81+
<//>
82+
<section>
83+
<p>Use <em>Docker Compose</em> to define <em>multi-service environments</em> in <em>one file</em>.</p>
84+
</section>
85+
<${CodeSlide} lang="yaml" badge="docker-compose.yml" fontSize=".34em">
86+
services:
87+
web:
88+
build: .
89+
ports:
90+
- "3000:3000"
91+
depends_on:
92+
- db
93+
db:
94+
image: postgres:16-alpine
95+
environment:
96+
POSTGRES_USER: app
97+
POSTGRES_PASSWORD: secret
98+
POSTGRES_DB: appdb
99+
volumes:
100+
- db_data:/var/lib/postgresql/data
101+
volumes:
102+
db_data:
103+
<//>
104+
<${CodeSlide} lang="bash" badge="Compose" fontSize=".42em" lineNumbers=true>
105+
# Start all services
106+
docker compose up --build
107+
108+
# Stop and remove containers
109+
docker compose down
110+
<//>
111+
<section>
112+
<p>With Docker Compose, teams share reproducible dev and test environments as code.</p>
113+
</section>
114+
<${DemoSlide} />
115+
<${QuestionsSlide} />
116+
<//>`;
117+
}
118+
119+
export default Supplemental3;

‎slides/src/Slides/Lessons/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import Lesson24 from "./Lesson24.js";
2626
import Lesson25 from "./Lesson25.js";
2727
import Supplemental1 from "./Supplemental1.js";
2828
import Supplemental2 from "./Supplemental2.js";
29+
import Supplemental3 from "./Supplemental3.js";
2930

3031
export {
3132
Lesson00,
@@ -55,6 +56,7 @@ export {
5556
Lesson24,
5657
Lesson25,
5758
Supplemental1,
58-
Supplemental2
59+
Supplemental2,
60+
Supplemental3
5961
};
6062

‎slides/src/Slides/Slides.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ function Slides() {
4141
<${lessons.Lesson25} />
4242
<${lessons.Supplemental1} />
4343
<${lessons.Supplemental2} />
44+
<${lessons.Supplemental3} />
4445
</div>`;
4546
}
4647

‎supplemental3/README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Supplemental 3: Containerization with Docker ([Slides](https://code-differently.github.io/code-society-25-2/slides/#/supplemental_3))
2+
3+
## Pre-work
4+
5+
Please review the following resources before lecture:
6+
7+
### Recommended
8+
* [Docker in 100 Seconds: A Quick Guide to Containerization (Video)](https://www.youtube.com/watch?v=IXifQ8mX8DE)
9+
* [Docker vs. Kubernetes: The ONLY Video You Need to Finally Understand Containers!]([vscode:extension/alexcvzz.vscode-sqlite](https://www.youtube.com/watch?v=oGPjzCBZGzg))

‎supplemental3/demo/Dockerfile‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Use a small official Node image
2+
FROM node:20-alpine
3+
4+
# Create app directory
5+
WORKDIR /usr/src/app
6+
7+
# Copy source
8+
COPY app.js ./
9+
10+
# Expose port and run
11+
EXPOSE 3000
12+
CMD ["node", "app.js"]

‎supplemental3/demo/app.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Minimal HTTP server (no external deps)
2+
import http from 'http';
3+
4+
const server = http.createServer((req, res) => {
5+
res.writeHead(200, { 'Content-Type': 'application/json' });
6+
res.end(JSON.stringify({ ok: true, time: new Date().toISOString() }));
7+
});
8+
9+
server.listen(3000, () => console.log('Listening on http://localhost:3000'));

‎supplemental3/demo/docker-compose.yaml‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
services:
2+
web:
3+
build: .
4+
ports:
5+
- "3000:3000"
6+
depends_on:
7+
- db
8+
db:
9+
image: postgres:16-alpine
10+
environment:
11+
POSTGRES_USER: app
12+
POSTGRES_PASSWORD: secret
13+
POSTGRES_DB: appdb
14+
volumes:
15+
- db_data:/var/lib/postgresql/data
16+
volumes:
17+
db_data:

0 commit comments

Comments
 (0)