Cleanup

examples/fullstack/.devcontainer/devcontainer.json

@@ -1,22 +1,15 @@
 {
   "name": "Fullstack DevContainer",
-  "dockerComposeFile": ["../docker-compose.yml"],
-  "service": "frontend",
+  "dockerComposeFile": ["../compose.yml", "../compose.override.yml"],
+  "service": "backend",
   "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",
+  "postCreateCommand": "/entrypoint.sh",
   "customizations": {
     "vscode": {
       "extensions": [
+        "jripouteau.adonis-vscode-extension",
         "dbaeumer.vscode-eslint",
         "esbenp.prettier-vscode"
       ]

examples/fullstack/backend/Dockerfile

@@ -7,11 +7,15 @@ 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
+WORKDIR /app/backend
+COPY dev-entrypoint.sh /entrypoint.sh
+COPY .env.example /app/backend/.env
+RUN chmod +x /entrypoint.sh
 ENV NODE_ENV=development
 WORKDIR /app
 COPY entrypoint.sh /entrypoint.sh
@@ -21,14 +25,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
-COPY --from=deps /app/node_modules /app/node_modules
+WORKDIR /app/backend
+COPY --from=deps /app/backend/node_modules /app/backend/node_modules
 ADD . .
 RUN node ace build
 
@@ -36,8 +40,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=build /app/build /app
+COPY --from=production-deps /app/backend/node_modules /app/backend/node_modules
+COPY --from=build /app/backend/build /app
 EXPOSE 8080
 
 CMD ["node", "./bin/server.js"]

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

@@ -1,8 +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)
-    }
-}
+  public async index({ request }: HttpContext) {
+    const page = request.input('page', 1)
+    return User.query().paginate(page)
+  }
+}

examples/fullstack/backend/entrypoint.sh

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

examples/fullstack/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/fullstack/compose.override.yml

@@ -5,10 +5,13 @@ services:
       context: backend
       target: develop
     volumes:
-      - ./backend:/app
-      - node_modules:/app/node_modules
+      - ./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/fullstack/compose.yml

@@ -6,8 +6,8 @@ services:
       context: ./frontend
       target: develop
     volumes:
-      - frontend_node_modules:/app/node_modules
-      - ./frontend/src:/app/src
+      - frontend_node_modules:/app/frontend/node_modules
+      - ./frontend/:/app/frontend/
     labels:
       - "traefik.http.routers.app.rule=Host(`app.docker.localhost`)"
   reverse-proxy:

examples/fullstack/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/fullstack/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/fullstack/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,18 +37,15 @@ 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>
-                <a href="https://docker.com" target="_blank" rel="noreferrer">
+        <a href="https://docker.com" target="_blank" rel="noreferrer">
           <img src={dockerLogo} className="logo docker" alt="Docker logo" />
         </a>
       </div>
 
-      <h1>Vite + React + Docker + Traefik</h1>
+      <h1>React + Docker + Traefik</h1>
 
       <table>
         <thead>

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">