chore: setup source maps (#263)

app/misc/vercel.ts

@@ -1,4 +1,6 @@
 import * as build from "@remix-run/dev/server-build";
 import { createRequestHandler } from "@remix-run/vercel";
 
+// TODO: @remix-run/vercel is deprecated https://github.com/remix-run/remix/pull/5964
+
 export default createRequestHandler({ build });

misc/build/bundle-vercel.ts

@@ -0,0 +1,47 @@
+import fs from "node:fs";
+import esbuild from "esbuild";
+
+// used by scripts/vercel.sh to
+// - bundle server app for simpler vercel deployment
+// - exclude node_modules from generating source map to reduce deployment size
+
+// references
+// - https://esbuild.github.io/plugins/
+// - https://github.com/evanw/esbuild/issues/1685#issuecomment-944916409
+
+esbuild.build({
+  logLevel: "info",
+  entryPoints: ["./build/remix/production/server/index.js"],
+  outfile: "./build/remix/production/server/index-bundled.js",
+  bundle: true,
+  sourcemap: "inline",
+  platform: "node",
+  external: [
+    // exclude knex drivers except "mysql2"
+    "mysql",
+    "sqlite3",
+    "better-sqlite3",
+    "tedious",
+    "pg",
+    "oracledb",
+    "pg-query-stream",
+  ],
+  plugins: [
+    // https://github.com/evanw/esbuild/issues/1685#issuecomment-944916409
+    {
+      name: "no-source-map-node-modules",
+      setup(build) {
+        build.onLoad({ filter: /node_modules/ }, (args) => {
+          if (args.path.endsWith("js")) {
+            return {
+              contents:
+                fs.readFileSync(args.path, "utf8") +
+                "\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIiJdLCJtYXBwaW5ncyI6IkEifQ==",
+              loader: "default",
+            };
+          }
+        });
+      },
+    },
+  ],
+});

package.json

@@ -4,7 +4,7 @@
     "dev-pre": "pnpm build:css",
     "dev-e2e": "export NODE_ENV=test && pnpm dev-pre && PORT=3001 pnpm dev:remix",
     "dev-ui": "vite --host",
-    "dev:remix": "remix dev",
+    "dev:remix": "NODE_OPTIONS='--enable-source-maps' remix dev",
     "dev-coverage:remix": "c8 -o coverage/e2e-server -r text -r html --exclude build --exclude packages --exclude-after-remap node_modules/.bin/remix dev",
     "tsc": "tsc -b",
     "dev:tsc": "pnpm tsc --watch --preserveWatchOutput",
@@ -110,7 +110,7 @@
     "vitest": "^0.29.3"
   },
   "volta": {
-    "node": "16.15.0"
+    "node": "16.20.0"
   },
   "pnpm": {
     "patchedDependencies": {

scripts/vercel.sh

@@ -9,19 +9,10 @@ rm -rf build/css
 pnpm build:css
 
 # default "node-cjs" build with custom server main
-NODE_ENV=production BUILD_VERCEL=1 npx remix build
+NODE_ENV=production BUILD_VERCEL=1 npx remix build --sourcemap
 
 # run esbuild again manually to bundle server app
-# - skip `mysql` which appears in https://github.com/knex/knex/blob/3616791ac2a6d17d55b29feed6a503a793d7c488/lib/dialects/mysql/index.js#L23
-npx esbuild build/remix/production/server/index.js --outfile=build/remix/production/server/index-bundled.js \
-  --bundle --platform=node \
-  --external:mysql \
-  --external:sqlite3 \
-  --external:better-sqlite3 \
-  --external:tedious \
-  --external:pg \
-  --external:oracledb \
-  --external:pg-query-stream
+node -r esbuild-register ./misc/build/bundle-vercel.ts
 
 #
 # setup files for `vercel deploy --prebuilt`
@@ -40,13 +31,20 @@ npx esbuild build/remix/production/server/index.js --outfile=build/remix/product
 #         index.func/
 #           .vc-config.json
 #           index-bundled.js
+#           index.js         (require index-bundled.js after process.setSourceMapsEnabled)
 #
 
 deploy_dir=build/remix/production/deploy
 mkdir -p "$deploy_dir/.vercel/output/static"
 mkdir -p "$deploy_dir/.vercel/output/functions/server/index.func"
 cp -r build/remix/production/public "$deploy_dir/.vercel/output/static"
 cp build/remix/production/server/index-bundled.js "$deploy_dir/.vercel/output/functions/server/index.func"
+
+cat > "$deploy_dir/.vercel/output/functions/server/index.func/index.js" << "EOF"
+process.setSourceMapsEnabled(true);
+module.exports = require("./index-bundled.js");
+EOF
+
 cat > "$deploy_dir/.vercel/output/config.json" << "EOF"
 {
   "version": 3,
@@ -71,14 +69,16 @@ cat > "$deploy_dir/.vercel/output/config.json" << "EOF"
   ]
 }
 EOF
+
 cat > "$deploy_dir/.vercel/output/functions/server/index.func/.vc-config.json" <<EOF
 {
   "runtime": "nodejs16.x",
-  "handler": "index-bundled.js",
+  "handler": "index.js",
   "launcherType": "Nodejs",
   "regions": ["hnd1"]
 }
 EOF
+
 if [ -f .vercel/project.json ]; then
   cp .vercel/project.json "$deploy_dir/.vercel"  # skip on CI
 fi