updated presentations

    style Database fill:#ff9,stroke:#333,stroke-width:2px

    style ExternalAPI fill:#bff,stroke:#333,stroke-width:2px

</pre>

</section>

<section id="a-brief-introduction-to-docker" class="slide level2">

<h2>A Brief Introduction to Docker</h2>

<div style="font-size: 20pt">

<ul>

<li><strong>Docker</strong> is a platform for developing, shipping, and

running applications inside lightweight, portable

<strong>containers</strong>.</li>

<li>A <strong>container</strong> is a standardized unit that packages an

application along with its dependencies, environment variables, and

configuration.</li>

<li>Benefits:

<ul>

<li>✅ <strong>Consistency</strong>: “It runs on my machine” actually

works on <em>every</em> machine.</li>

<li>✅ <strong>Isolation</strong>: Prevents conflicts between different

environments or services.</li>

<li>✅ <strong>Portability</strong>: Containers can be moved across

systems (e.g., from development to production) without changes.</li>

</ul></li>

<li><strong>Key Concepts</strong>:

<ul>

<li><strong>Image</strong>: A blueprint of the container (think: frozen

snapshot of the app + config).</li>

<li><strong>Container</strong>: A running instance of an image.</li>

<li><strong>Dockerfile</strong>: Script to define how to build the

image.</li>

<li><strong>Docker Compose</strong>: Tool to define and run

multi-container apps.</li>

</ul></li>

</ul>

</div>

</section></section>

<section>

<section id="a-simple-tornado-wep-app" class="title-slide slide level1">

</ul>

</div>

</section>

<section id="containerization" class="slide level2 small-header">

<h2 class="small-header">Containerization</h2>

<div style="font-size: 20pt">

<ul>

<li>The <strong>Tornado Blog Demo</strong> can be packaged into a Docker

container to ensure consistent development and deployment.</li>

<li>Structure:

<ul>

<li>A single container runs the Tornado application.</li>

<li>It connects to a separate PostgreSQL container for the

database.</li>

</ul></li>

<li>Docker Compose is typically used to orchestrate both services.</li>

</ul>

</div>

</section>

<section id="visualization-1" class="slide level2 very-small-header">

<h2 class="very-small-header">Visualization</h2>

<pre class="mermaid mermaid-container">

graph TD

    subgraph Docker-Compose

        TornadoContainer["🌀 Tornado Container"]

        DBContainer["🐘 PostgreSQL Container"]

    end

    TornadoContainer -->|Connects via Port 5432| DBContainer

    User["🌍 User (Browser)"] -->|Port 8888| TornadoContainer

</pre>

</section>

<section id="visualization-2" class="slide level2 very-small-header">

<h2 class="very-small-header">Visualization</h2>

<pre class="mermaid mermaid-container">

graph TD

    subgraph Blog Service

        TornadoServer["Tornado Server"]

</ul>

</div>

</section>

<section id="visualization-2" class="slide level2 very-small-header">

<h2 class="very-small-header">Visualization</h2>

<section id="react-visualization"

class="slide level2 very-small-header">

<h2 class="very-small-header">React Visualization</h2>

<pre class="mermaid mermaid-container">

graph TD

    index.html --> index.js

        api.js

    end

</pre>

</section>

<section id="development-and-deployment"

class="slide level2 small-header">

<h2 class="small-header">Development and Deployment</h2>

<div style="font-size: 20pt">

<ul>

<li><strong>Steps to develop and build a React app</strong>:</li>

</ul>

<ol type="1">

<li>🛠️ <strong>Development</strong>:

<ul>

<li>Set up the project using tools like <code>create-react-app</code> or

Vite.</li>

<li>Write components using JSX or TypeScript.</li>

<li>Test locally with <code>npm start</code> (serves the app on

<code>localhost:3000</code>).</li>

</ul></li>

<li>🧪 <strong>Testing</strong>:

<ul>

<li>Use testing frameworks like Jest and React Testing Library.</li>

<li>Run unit/integration tests.</li>

</ul></li>

<li>📦 <strong>Build</strong>:

<ul>

<li>Run <code>npm run build</code> to create a production-optimized

bundle (static HTML/CSS/JS in <code>build/</code>).</li>

</ul></li>

<li>📦 <strong>Dockerize</strong>:

<ul>

<li>Use a <code>Dockerfile</code> to serve the <code>build/</code>

directory via a web server like Nginx.</li>

</ul></li>

<li>🚀 <strong>Deployment</strong>:

<ul>

<li>Push the Docker image to a registry or deploy with tools like Docker

Compose, Kubernetes, or Heroku.</li>

</ul></li>

</ol>

</div>

</section>

<section id="containerization-1" class="slide level2 small-header">

<h2 class="small-header">Containerization</h2>

<div style="font-size: 20pt">

<ul>

<li>In a <strong>full-stack setup</strong>, we containerize both the

<strong>React frontend</strong> and the <strong>Tornado

backend</strong>.</li>

<li>Each service runs in its own container.</li>

<li>During development, React runs on a live-reload dev server.</li>

<li>Backend connects to a database container (e.g., PostgreSQL).</li>

<li>Services communicate via a shared Docker network.</li>

</ul>

</div>

</section>

<section id="visualization-3" class="slide level2 very-small-header">

<h2 class="very-small-header">Visualization</h2>

<pre class="mermaid mermaid-container">

graph TD

    subgraph Docker-Compose

        ReactDev["⚛️ React Dev Server (Port 3000)"]

        TornadoDev["🌀 Tornado Backend (Port 8888)"]

        PostgreSQL["🐘 PostgreSQL DB (Port 5432)"]

    end

    User["👤 Developer"] -->|Opens Browser| ReactDev

    ReactDev -->|API calls| TornadoDev

    TornadoDev -->|Queries| PostgreSQL

</pre>

</section></section>

<section id="references" class="title-slide slide level1">

<h1>References</h1>

<div style="font-size: 20pt">

<!-- (1) Add a brief introduction about docker here! -->

- **Docker** is a platform for developing, shipping, and running applications inside lightweight, portable **containers**.

- A **container** is a standardized unit that packages an application along with its dependencies, environment variables, and configuration.

- Benefits:

  - **Consistency**: "It runs on my machine" actually works on *every* machine.

  - **Isolation**: Prevents conflicts between different environments or services.

  - **Portability**: Containers can be moved across systems (e.g., from development to production) without changes.

- **Key Concepts**:

  - **Image**: A blueprint of the container (think: frozen snapshot of the app + config).

  - **Container**: A running instance of an image.

  - **Dockerfile**: Script to define how to build the image.

  - **Docker Compose**: Tool to define and run multi-container apps.

</div>

<div style="font-size: 20pt">

<!-- (2) Add some explanation and a mermaid visualization of the docker containerization of the tornado blog demo here! -->

- The **Tornado Blog Demo** can be packaged into a Docker container to ensure consistent development and deployment.

- Structure:

  - A single container runs the Tornado application.

  - It connects to a separate PostgreSQL container for the database.

- Docker Compose is typically used to orchestrate both services.

</div>

<div style="font-size: 20pt">

<!-- (3) Add some explanation of the stages to develop and build a react app here -->

- **Steps to develop and build a React app**:

1. **Development**:

   - Set up the project using tools like `create-react-app` or Vite.

   - Write components using JSX or TypeScript.

   - Test locally with `npm start` (serves the app on `localhost:3000`).

2. **Build**:

   - Run `npm run build` to create a production-optimized bundle (static HTML/CSS/JS in `build/`).

3. **Deployment**

   - Serve the production-optimized bunlde e.g. via nginx in 

      - `/data/www`

      - `/usr/share/nginx/html`  

</div>

<div style="font-size: 20pt">

<!-- (4) Add some explanation and a mermaid visualization of the docker containerization of the tornado blog demo with a react frontend for development here! -->

- In a **full-stack setup**, we containerize both the **React frontend** and the **Tornado backend**.

- Each service runs in its own container.

- During development, React runs on a live-reload dev server.

- Backend connects to a database container (e.g., PostgreSQL).

- Services communicate via a shared Docker network.

</div>

---

## Visualization {.very-small-header}

<pre class="mermaid mermaid-container">

graph TD

    subgraph Docker-Compose

        ReactDev["⚛️ React Dev Server (Port 3000)"]

        TornadoDev["🌀 Tornado Backend (Port 8888)"]

        PostgreSQL["🐘 PostgreSQL DB (Port 5432)"]

    end

    User["👤 Developer"] -->|Opens Browser| ReactDev

    ReactDev -->|API calls| TornadoDev

    TornadoDev -->|Queries| PostgreSQL

</pre>

# References

::: {#refs}