feat(_official-blog-tutorial): update to latest indie-stack (#318)

Author: MichaelDeBoey

_official-blog-tutorial/Dockerfile

@@ -13,7 +13,7 @@ FROM base as deps
 WORKDIR /myapp
 
 ADD package.json .npmrc ./
-RUN npm install --production=false
+RUN npm install --include=dev
 
 # Setup production node_modules
 FROM base as production-deps
@@ -22,7 +22,7 @@ WORKDIR /myapp
 
 COPY --from=deps /myapp/node_modules /myapp/node_modules
 ADD package.json .npmrc ./
-RUN npm prune --production
+RUN npm prune --omit=dev
 
 # Build the app
 FROM base as build

_official-blog-tutorial/app/db.server.ts

@@ -1,23 +1,9 @@
 import { PrismaClient } from "@prisma/client";
 
-let prisma: PrismaClient;
+import { singleton } from "./singleton.server";
 
-declare global {
-  var __db__: PrismaClient;
-}
-
-// this is needed because in development we don't want to restart
-// the server with every change, but we want to make sure we don't
-// create a new connection to the DB with every change either.
-// in production we'll have a single connection to the DB.
-if (process.env.NODE_ENV === "production") {
-  prisma = new PrismaClient();
-} else {
-  if (!global.__db__) {
-    global.__db__ = new PrismaClient();
-  }
-  prisma = global.__db__;
-  prisma.$connect();
-}
+// Hard-code a unique key, so we can look up the client when this module gets re-imported
+const prisma = singleton("prisma", () => new PrismaClient());
+prisma.$connect();
 
 export { prisma };

_official-blog-tutorial/app/singleton.server.ts

@@ -0,0 +1,13 @@
+// Since the dev server re-requires the bundle, do some shenanigans to make
+// certain things persist across that 😆
+// Borrowed/modified from https://github.com/jenseng/abuse-the-platform/blob/2993a7e846c95ace693ce61626fa072174c8d9c7/app/utils/singleton.ts
+
+export const singleton = <Value>(
+  name: string,
+  valueFactory: () => Value
+): Value => {
+  const g = global as any;
+  g.__singletons ??= {};
+  g.__singletons[name] ??= valueFactory();
+  return g.__singletons[name];
+};

_official-blog-tutorial/fly.toml

@@ -1,4 +1,4 @@
-app = "blog-tutorial-ffb5"
+app = "blog-tutorial"
 
 kill_signal = "SIGINT"
 kill_timeout = 5

_official-blog-tutorial/package.json

@@ -3,7 +3,8 @@
   "sideEffects": false,
   "scripts": {
     "build": "remix build",
-    "dev": "cross-env NODE_ENV=development binode --require ./mocks -- @remix-run/dev:remix dev",
+    "dev": "remix dev -c \"npm run dev:serve\"",
+    "dev:serve": "binode --require ./mocks -- @remix-run/serve:remix-serve ./build",
     "format": "prettier --write .",
     "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
     "setup": "prisma generate && prisma migrate deploy && prisma db seed",
@@ -23,58 +24,55 @@
     "/public/build"
   ],
   "dependencies": {
-    "@prisma/client": "^4.13.0",
+    "@prisma/client": "^4.16.2",
+    "@remix-run/css-bundle": "*",
     "@remix-run/node": "*",
     "@remix-run/react": "*",
     "@remix-run/serve": "*",
     "bcryptjs": "^2.4.3",
-    "isbot": "^3.6.10",
+    "isbot": "^3.6.13",
     "marked": "^4.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {
-    "@faker-js/faker": "^7.6.0",
-    "@remix-run/css-bundle": "*",
+    "@faker-js/faker": "^8.0.2",
     "@remix-run/dev": "*",
     "@remix-run/eslint-config": "*",
     "@testing-library/cypress": "^9.0.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/jest-dom": "^5.17.0",
     "@types/bcryptjs": "^2.4.2",
-    "@types/eslint": "^8.37.0",
-    "@types/marked": "^4.3.0",
-    "@types/node": "^18.16.5",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.4",
-    "@vitejs/plugin-react": "^3.1.0",
-    "@vitest/coverage-c8": "^0.31.0",
-    "autoprefixer": "^10.4.14",
+    "@types/eslint": "^8.44.2",
+    "@types/marked": "^4.3.1",
+    "@types/node": "^18.17.5",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.4",
+    "@vitest/coverage-v8": "^0.34.1",
+    "autoprefixer": "^10.4.15",
     "binode": "^1.0.5",
-    "c8": "^7.13.0",
     "cookie": "^0.5.0",
     "cross-env": "^7.0.3",
-    "cypress": "^12.10.0",
-    "eslint": "^8.40.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-cypress": "^2.13.3",
-    "happy-dom": "^9.8.0",
-    "msw": "^1.2.1",
+    "cypress": "^12.17.3",
+    "eslint": "^8.47.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-cypress": "^2.14.0",
+    "happy-dom": "^10.9.0",
+    "msw": "^1.2.3",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.23",
-    "prettier": "2.8.8",
-    "prettier-plugin-tailwindcss": "^0.2.8",
-    "prisma": "^4.13.0",
+    "postcss": "^8.4.27",
+    "prettier": "3.0.1",
+    "prettier-plugin-tailwindcss": "^0.5.2",
+    "prisma": "^4.16.2",
     "start-server-and-test": "^2.0.0",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^3.3.3",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.5",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.9",
     "vite-tsconfig-paths": "^3.6.0",
-    "vitest": "^0.31.0"
+    "vitest": "^0.34.1"
   },
   "engines": {
     "node": ">=14"

_official-blog-tutorial/remix.config.js

@@ -2,12 +2,15 @@
 module.exports = {
   cacheDirectory: "./node_modules/.cache/remix",
   future: {
+    v2_dev: true,
     v2_errorBoundary: true,
+    v2_headers: true,
     v2_meta: true,
     v2_normalizeFormMethod: true,
     v2_routeConvention: true,
   },
   ignoredRouteFiles: ["**/.*", "**/*.test.{js,jsx,ts,tsx}"],
   postcss: true,
+  serverModuleFormat: "cjs",
   tailwind: true,
 };

_official-blog-tutorial/start.sh

@@ -1,10 +1,17 @@
-#!/bin/sh
+#!/bin/sh -ex
 
 # This file is how Fly starts the server (configured in fly.toml). Before starting
 # the server though, we need to run any prisma migrations that haven't yet been
 # run, which is why this file exists in the first place.
 # Learn more: https://community.fly.io/t/sqlite-not-getting-setup-properly/4386
 
-set -ex
+# allocate swap space
+fallocate -l 512M /swapfile
+chmod 0600 /swapfile
+mkswap /swapfile
+echo 10 > /proc/sys/vm/swappiness
+swapon /swapfile
+echo 1 > /proc/sys/vm/overcommit_memory
+
 npx prisma migrate deploy
 npm run start