Add video examples

examples/devcontainers/.devcontainer/devcontainer.json

@@ -0,0 +1,18 @@
+{
+  "name": "Fullstack DevContainer",
+  "dockerComposeFile": ["../compose.yml", "../compose.override.yml"],
+  "service": "backend",
+  "workspaceFolder": "/app",
+  "shutdownAction": "stopCompose",
+  "forwardPorts": [80, 8080],
+  "postCreateCommand": "/entrypoint.sh",
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "jripouteau.adonis-vscode-extension",
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode"
+      ]
+    }
+  }
+}

examples/devcontainers/README.md

@@ -0,0 +1,49 @@
+# Overview
+This is a practical example of a "basic" fullstack application.  This application has been fully containerized to be run locally in development mode as well as for deployment to production.  It is composed of the following services:
+
+- frontend - Basic React app bootstrapped with `yarn create vite`
+- backend - AdonisJS API Backend [https://adonisjs.com]()
+- database - Postgres database
+- reverse_proxy - Traefik ingress controller handling reverse proxy for the frontend and backend applications.
+
+## Getting Started
+
+### Devcontainer
+You can run this project via dev containers.  First you will need to ensure that you have the [VSCode dev containers extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
+
+Once you have the extension installed, there are a couple ways to get started.  From this directory run `code .` to open a new VSCode window targeting this directory.  After a few seconds you should get a notification in the bottom right asking if you want to reopen the workspace in a container.  This will open a new VScode window and will start the process of building and running all of the containers.
+<video src="./open-devcontainers-option1.m4v" controls></video>
+
+Another method is to open the `Command Palette` (CMD+Shift+P) and search for `Dev Containers: Open Folder in Dev Container`.  Select this folder and VScode will open a new window and kick off the process.  The very first time you do this it will take several minutes to build the images and start the containers.
+
+<video src="./open-devcontainers-option2.m4v" controls></video>
+Alternatively, you can also just use the compose files to start a stack and connect your VSCode instance to the backend container.
+
+To do that, clone the repo and `cd` into this directory.
+
+```shell
+cd examples/devcontainers
+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/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/frontend 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:
+
+```compose
+    labels:
+      - "traefik.http.middlewares.strip-api-prefix.stripprefix.prefixes=/api"
+      - "traefik.http.routers.backend.rule=Host(`app.docker.localhost`) && PathPrefix(`/api`)"
+      - "traefik.http.routers.backend.middlewares=strip-api-prefix@docker"
+```
+
+We are defining a middleware named `strip-api-prefix` using the built in `strippreffix` Traefik middleware.  We are then telling it to remove `/api` from any requests it handles.  We then attach that to our backend router.

examples/devcontainers/backend/Dockerfile

@@ -7,12 +7,11 @@ HEALTHCHECK --interval=5s \
 
 # All deps stage
 FROM base AS deps
-WORKDIR /app
+WORKDIR /app/backend
 ADD package.json package-lock.json ./
 RUN npm ci
 
 FROM deps AS develop
-ENV NODE_ENV=development
 WORKDIR /app
 COPY entrypoint.sh /entrypoint.sh
 RUN chmod +x /entrypoint.sh
@@ -21,14 +20,14 @@ ENTRYPOINT [ "/entrypoint.sh" ]
 
 # Production only deps stage
 FROM base AS production-deps
-WORKDIR /app
+WORKDIR /app/backend
 ADD package.json package-lock.json ./
 RUN npm ci --omit=dev
 
 # Build stage
 FROM base AS build
-WORKDIR /app
+WORKDIR /app/backend
-COPY --from=deps /app/node_modules /app/node_modules
+COPY --from=deps /app/backend/node_modules /app/backend/node_modules
 ADD . .
 RUN node ace build
 
@@ -36,8 +35,8 @@ RUN node ace build
 FROM base
 ENV NODE_ENV=production
 WORKDIR /app
-COPY --from=production-deps /app/node_modules /app/node_modules
+COPY --from=production-deps /app/backend/node_modules /app/backend/node_modules
-COPY --from=build /app/build /app
+COPY --from=build /app/backend/build /app
 EXPOSE 8080
 
 CMD ["node", "./bin/server.js"]

examples/devcontainers/backend/app/controllers/users_controller.ts

@@ -0,0 +1,8 @@
+import type { HttpContext } from '@adonisjs/core/http'
+import User from '#models/user'
+export default class UsersController {
+  public async index({ request }: HttpContext) {
+    const page = request.input('page', 1)
+    return User.query().paginate(page)
+  }
+}

examples/devcontainers/backend/entrypoint.sh

@@ -1,5 +1,7 @@
 #!/bin/sh
 
+cd /app/backend
+cp .env.example .env
 echo "starting up..."
 node ace generate:key
 

examples/devcontainers/backend/start/routes.ts

@@ -8,10 +8,10 @@
 */
 
 import router from '@adonisjs/core/services/router'
-import UsersController from '#controllers/users_controller'
+const UsersController = () => import('#controllers/users_controller')
 router.get('users', [UsersController, 'index'])
 router.get('/', async () => {
   return {
-    hello: 'hello',
+    hello: 'world',
   }
 })

examples/devcontainers/compose.override.yml

@@ -0,0 +1,17 @@
+---
+services:
+  backend:
+    build:
+      context: backend
+      target: develop
+    volumes:
+      - ./backend:/app/backend/
+      - node_modules:/app/backend/node_modules
+      - frontend_node_modules:/app/frontend/node_modules
+      - ./frontend/:/app/frontend/
+    depends_on:
+      db:
+        condition: service_healthy
+volumes:
+  node_modules: {}
+  frontend_node_modules: {}

examples/devcontainers/compose.yml

@@ -6,8 +6,8 @@ services:
       context: ./frontend
       target: develop
     volumes:
-      - frontend_node_modules:/app/node_modules
+      - frontend_node_modules:/app/frontend/node_modules
-      - ./frontend/src:/app/src
+      - ./frontend/:/app/frontend/
     labels:
       - "traefik.http.routers.app.rule=Host(`app.docker.localhost`)"
   reverse-proxy:
@@ -27,8 +27,6 @@ services:
       - "traefik.http.middlewares.strip-api-prefix.stripprefix.prefixes=/api"
       - "traefik.http.routers.backend.rule=Host(`app.docker.localhost`) && PathPrefix(`/api`)"
       - "traefik.http.routers.backend.middlewares=strip-api-prefix@docker"
-    env_file:
-      - ./backend/.env
     depends_on:
       db:
         condition: service_healthy

examples/devcontainers/frontend/Dockerfile

@@ -1,5 +1,5 @@
 FROM node:22-alpine AS base
-WORKDIR /app
+WORKDIR /app/frontend
 COPY package.json yarn.lock ./
 RUN yarn install
 COPY . .
@@ -12,5 +12,5 @@ EXPOSE 5173
 ENTRYPOINT [ "yarn", "dev", "--host", "0.0.0.0" ]
 
 FROM nginx:alpine AS production
-COPY --from=build /app/dist/ /usr/share/nginx/html
+COPY --from=build /app/frontend/dist/ /usr/share/nginx/html
 ENTRYPOINT [ "nginx", "-g", "daemon off;" ]

examples/devcontainers/frontend/src/App.css

@@ -18,21 +18,6 @@
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
 .card {
   padding: 2em;
 }

examples/devcontainers/frontend/src/App.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react'
 import reactLogo from './assets/react.svg'
 import dockerLogo from './assets/docker.svg'
-import viteLogo from '/vite.svg'
 import './App.css'
 
 function App() {
@@ -38,9 +37,6 @@ function App() {
   return (
     <>
       <div>
-        <a href="https://vite.dev" target="_blank" rel="noreferrer">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
         <a href="https://react.dev" target="_blank" rel="noreferrer">
           <img src={reactLogo} className="logo react" alt="React logo" />
         </a>
@@ -49,7 +45,7 @@ function App() {
         </a>
       </div>
 
-      <h1>Vite + React + Docker + Traefik</h1>
+      <h1>React + Docker + Traefik</h1>
 
       <table>
         <thead>

examples/fullstack/.devcontainer/devcontainer.json

@@ -1,25 +0,0 @@
-{
-  "name": "Fullstack DevContainer",
-  "dockerComposeFile": ["../docker-compose.yml"],
-  "service": "frontend",
-  "workspaceFolder": "/app",
-  "shutdownAction": "stopCompose",
-  "forwardPorts": [80, 8080],
-  "settings": {
-    "terminal.integrated.defaultProfile.linux": "bash"
-  },
-"mounts": [
-  "source=frontend_node_modules,target=/app/node_modules,type=volume",
-  "source=backend_node_modules,target=/backend/node_modules,type=volume",
-  "source=${localWorkspaceFolder}/backend,target=/backend,type=bind"
-],
-"postCreateCommand": "npm install && cd /backend && npm install",
-  "customizations": {
-    "vscode": {
-      "extensions": [
-        "dbaeumer.vscode-eslint",
-        "esbenp.prettier-vscode"
-      ]
-    }
-  }
-}

examples/fullstack/README.md

@@ -1,37 +0,0 @@
-# Overview
-This is a practical example of a "basic" fullstack application.  This application has been fully containerized to be run locally in development mode as well as for deployment to production.  It is composed of the following services:
-
-- frontend - Basic React app bootstrapped with `yarn create vite`
-- backend - AdonisJS API Backend [https://adonisjs.com]()
-- database - Postgres database
-- reverse_proxy - Traefik ingress controller handling reverse proxy for the frontend and backend applications.
-
-## Getting Started
-Clone the repo and `cd` into the `compose` directory.
-
-```shell
-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.  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:
-
-```compose
-    labels:
-      - "traefik.http.middlewares.strip-api-prefix.stripprefix.prefixes=/api"
-      - "traefik.http.routers.backend.rule=Host(`app.docker.localhost`) && PathPrefix(`/api`)"
-      - "traefik.http.routers.backend.middlewares=strip-api-prefix@docker"
-```
-
-We are defining a middleware named `strip-api-prefix` using the built in `strippreffix` Traefik middleware.  We are then telling it to remove `/api` from any requests it handles.  We then attach that to our backend router.

examples/fullstack/backend/app/controllers/users_controller.ts

@@ -1,8 +0,0 @@
-import type { HttpContext } from '@adonisjs/core/http'
-import User from '#models/user'
-export default class UsersController {
-    public async index({ request }: HttpContext) {
-        const page = request.input('page', 1)
-        return User.query().paginate(page)
-    }
-}

examples/fullstack/compose.override.yml

@@ -1,14 +0,0 @@
----
-services:
-  backend:
-    build:
-      context: backend
-      target: develop
-    volumes:
-      - ./backend:/app
-      - node_modules:/app/node_modules
-    depends_on:
-      db:
-        condition: service_healthy
-volumes:
-  node_modules: {}

slides/slides.md

@@ -33,6 +33,7 @@ Mike Conrad - SCS 2025
   <p><a href="https://hackanooga.com/scs">https://hackanooga.com/scs</a></p>
   <small>Includes slide deck, and repo with examples</small>
   <img src="./images/talk.jpg" width="200">
+  Connect with me on LinkedIn: https://linkedin.com/enxoco
 </div>
 
 <div class="abs-br m-6 text-xl">