Update links to repo

README.md

@@ -1,11 +1,21 @@
-# Welcome to [Slidev](https://github.com/slidevjs/slidev)!
+# Demystifying Docker
+This repo is a work in progress documenting my upcoming presentation for Scenic City Summit 2025.  This repo is currently split into 2 parts.
 
-To start the slide show:
+## Slide Deck presentaiton
+The slides folder contains my slide deck for the event.  To view the presentation:
 
-- `pnpm install`
+```shell
-- `pnpm dev`
+cd slides
-- visit <http://localhost:3030>
+yarn
+yarn dev
+```
+Once everything is done it should open a browser window to http://localhost:3030.  I am using [slidev](https://sli.dev) for the slide deck.  All of the "slides" are in a single markdown file in the slides directory.
+
+
+## Code examples
+The examples folder contains several Docker examples.
+
+
+`examples/fullstack` is a basic example containing a backend NodeJS application with a React frontend as well as a Postgres Database.  The project is set up so that you can do all development in dev containers.  The `node_modules` folder for the backend is isolated from your host system and only exists inside the running container. For this reason, you will need to use a devcontainer in order to be able to get things like Intellisense and typings.
 
-Edit the [slides.md](./slides.md) to see the changes.
 
-Learn more about Slidev at the [documentation](https://sli.dev/).

examples/fullstack/README.md

@@ -14,11 +14,16 @@ cp backend/.env.example backend/.env
 docker compose up
 ```
 
-The first time you run `docker compose up` it may take a few minutes as Docker will need to build images for the frontend and backend.  Also there are some database migrations and seed data that need to happen.  Those are handled by `backend/dev-entrypoint.sh`.  This is handled for you automatically since it is baked into the image.  You will most likely need to run `sudo docker compose up` or add yourself to the privileged `docker` group (`sudo usermod -aG docker YOUR_USER`) in order for `Traefik` to bind to port 80.
+The first time you run `docker compose up` it may take a few minutes as Docker will need to build images for the frontend and backend.  Also there are some database migrations and seed data that need to happen.  Those are handled by `backend/dev-entrypoint.sh`.  This is handled for you automatically since it is baked into the image.  Once everything is up you should be able to access the frontend at [http://app.docker.localhost:8888]() and the backend at [http://app.docker.localhost:8888/api]()
 
 ![](./homepage.png)
 
 
+## Developing
+When running the `compose` stack, the backend node_modules are isolated from your host system.  This is common in dev environment setups.  In this case it is advised to use a Dev container.  The following video demonstrates starting a dev container by using the VSCode plugin.
+
+<video src="../../assets/open-dev-container.m4v" controls></video>
+
 ### Proxying and routes
 You will notice that the backend is listening on `http://0.0.0.0:3333/` but the frontend is making requests to `/api/`.  This is designed to mimic how you would deploy something like this in production where the backend would be behind a reverse proxy.  Traefik has some really nice middleware that allows us to easily tell it to route requests destined for `/api` to `/`.  The bit that handles that are these labels:
 

examples/fullstack/backend/Dockerfile

@@ -11,7 +11,6 @@ RUN npm ci
 FROM deps AS develop
 WORKDIR /app
 COPY dev-entrypoint.sh /entrypoint.sh
-COPY .env.example /app/.env
 RUN chmod +x /entrypoint.sh
 RUN cat /entrypoint.sh
 ENV NODE_ENV=development

slides/README.md

@@ -0,0 +1,11 @@
+# Welcome to [Slidev](https://github.com/slidevjs/slidev)!
+
+To start the slide show:
+
+- `pnpm install`
+- `pnpm dev`
+- visit <http://localhost:3030>
+
+Edit the [slides.md](./slides.md) to see the changes.
+
+Learn more about Slidev at the [documentation](https://sli.dev/).

slides/slides.md

@@ -29,14 +29,12 @@ mdc: true
 
 Mike Conrad - SCS 2025
 
-<div @click="$slidev.nav.next" class="mt-12 py-1 flex" hover:bg="white op-10">
+<div @click="$slidev.nav.next" class="mt-12 py-1 flex justify-center flex-col">
   <!-- Press Space for next page <carbon:arrow-right /> -->
-  <div class="ml-auto">
+  Follow along
-  <a href="https://git.hackanooga.com/mikeconrad/demystifying-docker.get">Example Repo<br /> (with slides)</a>
+  <p><a href="https://hackanooga.com/scs">https://hackanooga.com/scs</a></p>
-  <br />
+  <small>Includes slide deck, and repo with examples</small>
-  <br>
+  <img src="./images/talk.jpg" width="200">
-  <img src="./images/talk.jpg">
-  </div>
 </div>
 
 <div class="abs-br m-6 text-xl">
@@ -61,8 +59,9 @@ layout: center
 
 ## About you
 - Some experience with Docker/containers
-- Some experience with BASH
+- Familiarity with Linux/BASH
 - Want to better understand how containers work
+- Want to learn new techniques for automation
 
 ---
 transition: fade-out
@@ -70,7 +69,19 @@ layout: center
 ---
 
 ## Follow Along
-**Example Repo** - https://git.hackanooga.com/mikeconrad/demystifying-docker
+**Example Repo** - https://hackanooga.com/scs
+
+**Prerequisites**
+- Docker
+- VSCode
+- Git
+- yarn/npm/pnpm,etc (For viewing slides)
+
+  ### VSCode plugins
+  - [Official Docker Plugin](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)
+  - [Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
+  - [Container Tools](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-containers)
+
 
 ---
 transition: fade-out