update setup

Author: kentcdodds

.prettierrc

@@ -1,10 +1,10 @@
 {
-  "recommendations": [
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "bradlc.vscode-tailwindcss",
-    "neotan.vscode-auto-restart-typescript-eslint-servers",
-    "prisma.prisma",
-    "qwtel.sqlite-viewer"
-  ]
+	"recommendations": [
+		"dbaeumer.vscode-eslint",
+		"esbenp.prettier-vscode",
+		"bradlc.vscode-tailwindcss",
+		"neotan.vscode-auto-restart-typescript-eslint-servers",
+		"prisma.prisma",
+		"qwtel.sqlite-viewer"
+	]
 }

.vscode/extensions.json

@@ -1,11 +1,11 @@
 {
-  "typescript.preferences.autoImportFileExcludePatterns": [
-    "@remix-run/server-runtime",
-    "@remix-run/router",
-    "react-router-dom",
-    "react-router"
-  ],
-  "workbench.editorAssociations": {
-    "*.db": "sqlite-viewer.view"
-  }
+	"typescript.preferences.autoImportFileExcludePatterns": [
+		"@remix-run/server-runtime",
+		"@remix-run/router",
+		"react-router-dom",
+		"react-router"
+	],
+	"workbench.editorAssociations": {
+		"*.db": "sqlite-viewer.view"
+	}
 }

.vscode/settings.json

@@ -1,7 +1,8 @@
-FROM node:20-bookworm-slim as base
+FROM node:24-bookworm-slim as base
 
 RUN apt-get update && apt-get install -y git
 
+ENV EPICSHOP_REPO=https://github.com/epicweb-dev/testing-fundamentals
 ENV EPICSHOP_CONTEXT_CWD="/myapp/workshop-content"
 ENV EPICSHOP_DEPLOYED="true"
 ENV EPICSHOP_DISABLE_WATCHER="true"
@@ -11,11 +12,18 @@ ENV NODE_ENV="production"
 
 WORKDIR /myapp
 
+# Clone the workshop repo during build time, excluding database files
+RUN git clone --depth 1 ${EPICSHOP_REPO} ${EPICSHOP_CONTEXT_CWD} && \
+    find ${EPICSHOP_CONTEXT_CWD} -name "data.db" -delete
+
 ADD . .
 
 RUN npm install --omit=dev
 
-CMD rm -rf ${EPICSHOP_CONTEXT_CWD} && \
-    git clone https://github.com/epicweb-dev/testing-fundamentals ${EPICSHOP_CONTEXT_CWD} && \
+RUN echo "🔥 Warming up cache..." && \
+    cd ${EPICSHOP_CONTEXT_CWD} && \
+    npx epicshop warm
+
+CMD echo "⚡ Starting up..." && \
     cd ${EPICSHOP_CONTEXT_CWD} && \
     npx epicshop start

epicshop/Dockerfile

@@ -27,7 +27,7 @@ watcher
 		// Only act if path contains two slashes (excluding the leading `./`)
 		debouncedRun()
 	})
-	.on('error', error => console.log(`Watcher error: ${error}`))
+	.on('error', (error) => console.log(`Watcher error: ${error}`))
 
 /**
  * Simple debounce implementation

epicshop/fix-watch.js

@@ -11,29 +11,29 @@ const here = (...p) => path.join(__dirname, ...p)
 // const logVerbose = (...args) => (VERBOSE ? console.log(...args) : undefined)
 
 const workshopRoot = here('..')
-const examples = (await readDir(here('../examples'))).map(dir =>
+const examples = (await readDir(here('../examples'))).map((dir) =>
 	here(`../examples/${dir}`),
 )
 const exercises = (await readDir(here('../exercises')))
-	.map(name => here(`../exercises/${name}`))
-	.filter(filepath => fs.statSync(filepath).isDirectory())
+	.map((name) => here(`../exercises/${name}`))
+	.filter((filepath) => fs.statSync(filepath).isDirectory())
 const exerciseApps = (
 	await Promise.all(
-		exercises.flatMap(async exercise => {
+		exercises.flatMap(async (exercise) => {
 			return (await readDir(exercise))
-				.filter(dir => {
+				.filter((dir) => {
 					return /(problem|solution)/.test(dir)
 				})
-				.map(dir => path.join(exercise, dir))
+				.map((dir) => path.join(exercise, dir))
 		}),
 	)
 ).flat()
-const exampleApps = (await readDir(here('../examples'))).map(dir =>
+const exampleApps = (await readDir(here('../examples'))).map((dir) =>
 	here(`../examples/${dir}`),
 )
 const apps = [...exampleApps, ...exerciseApps]
 
-const appsWithPkgJson = [...examples, ...apps].filter(app => {
+const appsWithPkgJson = [...examples, ...apps].filter((app) => {
 	const pkgjsonPath = path.join(app, 'package.json')
 	return exists(pkgjsonPath)
 })
@@ -71,7 +71,7 @@ async function updateRootTsConfig() {
 	const tsconfig = {
 		files: [],
 		exclude: ['node_modules'],
-		references: appsWithPkgJson.map(a => ({
+		references: appsWithPkgJson.map((a) => ({
 			path: relativeToWorkshopRoot(a).replace(/\\/g, '/'),
 		})),
 	}
@@ -92,7 +92,7 @@ async function updateRootTsConfig() {
 }
 
 async function copyExerciseTsConfigs() {
-	const exercisesWithoutTsCongif = exerciseApps.filter(exercisePath => {
+	const exercisesWithoutTsCongif = exerciseApps.filter((exercisePath) => {
 		return !fs.existsSync(path.join(exercisePath, 'tsconfig.json'))
 	})
 
@@ -106,7 +106,7 @@ async function copyExerciseTsConfigs() {
 	)
 
 	await Promise.all(
-		exercisesWithoutTsCongif.map(exercisePath => {
+		exercisesWithoutTsCongif.map((exercisePath) => {
 			const tsConfigPath = path.resolve(exercisePath, 'tsconfig.json')
 			return fs.promises.writeFile(tsConfigPath, tsConfigTemplate)
 		}),
@@ -119,7 +119,7 @@ async function copyExercisePrettierConfigs() {
 		'utf8',
 	)
 	await Promise.all(
-		exerciseApps.map(exercise => {
+		exerciseApps.map((exercise) => {
 			const prettierConfigPath = path.join(exercise, '.prettierrc')
 			return fs.promises.writeFile(prettierConfigPath, prettierConfig)
 		}),

epicshop/fix.js

@@ -0,0 +1,51 @@
+# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
+#
+
+app: 'epicweb-dev-testing-fundamentals'
+primary_region: sjc
+kill_signal: SIGINT
+kill_timeout: 5s
+swap_size_mb: 512
+
+experimental:
+  auto_rollback: true
+
+  attached:
+    secrets: {}
+
+services:
+  - processes:
+      - app
+    protocol: tcp
+    internal_port: 8080
+
+    ports:
+      - port: 80
+
+        handlers:
+          - http
+        force_https: true
+      - port: 443
+
+        handlers:
+          - tls
+          - http
+
+    concurrency:
+      type: connections
+      hard_limit: 100
+      soft_limit: 80
+
+    tcp_checks:
+      - interval: 15s
+        timeout: 2s
+        grace_period: 1s
+
+    http_checks:
+      - interval: 10s
+        timeout: 2s
+        grace_period: 5s
+        method: get
+        path: /resources/healthcheck
+        protocol: http
+        tls_skip_verify: false

epicshop/fly.toml

@@ -4,8 +4,11 @@ import {
 	isProblemApp,
 	setPlayground,
 } from '@epic-web/workshop-utils/apps.server'
+import { warm } from '@epic-web/workshop-cli/warm'
 import fsExtra from 'fs-extra'
 
+await warm()
+
 const allApps = await getApps()
 const problemApps = allApps.filter(isProblemApp)
 
@@ -22,7 +25,7 @@ if (!process.env.SKIP_PLAYGROUND) {
 			() => {
 				console.log('✅ first problem app set up')
 			},
-			error => {
+			(error) => {
 				console.error(error)
 				throw new Error('❌  first problem app setup failed')
 			},

epicshop/fly.yaml

@@ -1,6 +1,5 @@
 # Moving to Vitest
 
-
 <EpicVideo url="https://www.epicweb.dev/workshops/testing-fundamentals/moving-to-vitest/overview-of-vitest" />
 
 Up to this point, we've been building what essentially is a primitive testing framework. Functions like `test()`, and `expect()`, and even `waitFor()` are the building blocks that help us structure and execute our automated tests.