Use JSDOM alternative for deploying to Vercel

.github/workflows/lint-check-types-build-deploy.yml → .github/workflows/lint-check-types-build.yml

@@ -46,14 +46,3 @@ jobs:
           API_KEY: ${{ secrets.API_KEY }}
       - name: Run Stylelint
         run: pnpm stylelint '**/*.{css,scss,less,js,tsx}'
-  deploy:
-    name: Deploy to Fly.io
-    runs-on: ubuntu-latest
-    needs: lint-and-check-types-and-build
-    if: github.ref == 'refs/heads/main'
-    env:
-      FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
-    steps:
-      - uses: actions/checkout@v3
-      - uses: superfly/flyctl-actions/setup-flyctl@master
-      - run: flyctl deploy --remote-only

Dockerfile

@@ -1,6 +1,8 @@
 # Initialize builder layer
 FROM node:18-alpine AS builder
 ENV NODE_ENV production
+ARG DATABASE_URL
+ENV DATABASE_URL=$DATABASE_URL
 # Install necessary tools
 RUN apk add --no-cache libc6-compat yq build-base g++ cairo-dev jpeg-dev pango-dev giflib-dev --repository=https://dl-cdn.alpinelinux.org/alpine/edge/community
 # Install pnpm
@@ -16,7 +18,7 @@ RUN pnpm build
 FROM node:18-alpine AS runner
 ENV NODE_ENV production
 # Install necessary tools
-RUN apk add bash postgresql cairo pango jpeg musl giflib pixman pangomm libjpeg-turbo freetype
+RUN apk add bash cairo pango jpeg musl giflib pixman pangomm libjpeg-turbo freetype
 # Install pnpm
 RUN corepack enable && corepack prepare pnpm@latest --activate
 WORKDIR /app
@@ -32,8 +34,7 @@ COPY --from=builder /app/package.json ./
 COPY --from=builder /app/.env.production ./
 COPY --from=builder /app/next.config.js ./
 
-# Copy start script and make it executable
-COPY --from=builder /app/scripts ./scripts
-RUN chmod +x /app/scripts/fly-io-start.sh
-
-CMD ["./scripts/fly-io-start.sh"]
+ARG PORT
+ENV PORT=$PORT
+CMD ["pnpm", "migrate", "up"]
+CMD ["pnpm", "start"]

app/example-6-cross-site-scripting/solution-2/page.tsx

@@ -1,5 +1,5 @@
 import DOMPurify from 'dompurify';
-import { JSDOM } from 'jsdom';
+import { JSDOM } from 'jsdom-napi-rs-canvas';
 import { notFound } from 'next/navigation';
 import { getBlogPostById } from '../../../database/blogPosts';
 import Common from '../common';

database/connect.ts

@@ -1,11 +1,21 @@
+import 'server-only';
 import { config } from 'dotenv-safe';
 import postgres from 'postgres';
 
-// This loads all environment variables from a .env file
-// for all code after this line
-if (!process.env.FLY_IO) config();
+// Making a simple connection to Postgres
+// Next.js fast refresh increases database connection slot
+// and causes connection slot error
+// export const sql = postgres({
+//   transform: {
+//     ...postgres.camel,
+//     undefined: null,
+//   },
+// });
+
+if (!process.env.POSTGRES_URL) {
+  config();
+}
 
-// Type needed for the connection function below
 declare module globalThis {
   let postgresSqlClient: ReturnType<typeof postgres> | undefined;
 }
@@ -15,12 +25,18 @@ declare module globalThis {
 function connectOneTimeToDatabase() {
   if (!globalThis.postgresSqlClient) {
     globalThis.postgresSqlClient = postgres({
+      host: process.env.POSTGRES_HOST || process.env.PGHOST,
+      username: process.env.POSTGRES_USER || process.env.PGUSERNAME,
+      password: process.env.POSTGRES_PASSWORD || process.env.PGPASSWORD,
+      database: process.env.POSTGRES_DATABASE || process.env.PGDATABASE,
+      ssl: !!process.env.POSTGRES_URL,
       transform: {
         ...postgres.camel,
         undefined: null,
       },
     });
   }
+
   return globalThis.postgresSqlClient;
 }
 

ley.config.js

@@ -0,0 +1,13 @@
+const options = {};
+
+if (process.env.POSTGRES_URL) {
+  options.ssl = true;
+
+  // Set standard environment variables
+  process.env.PGHOST = process.env.POSTGRES_HOST;
+  process.env.PGDATABASE = process.env.POSTGRES_DATABASE;
+  process.env.PGUSERNAME = process.env.POSTGRES_USER;
+  process.env.PGPASSWORD = process.env.POSTGRES_PASSWORD;
+}
+
+module.exports = options;

ley.config.mjs

@@ -0,0 +1,13 @@
+const options = {};
+
+if (process.env.POSTGRES_URL) {
+  options.ssl = true;
+
+  // Set standard environment variables
+  process.env.PGHOST = process.env.POSTGRES_HOST;
+  process.env.PGDATABASE = process.env.POSTGRES_DATABASE;
+  process.env.PGUSERNAME = process.env.POSTGRES_USER;
+  process.env.PGPASSWORD = process.env.POSTGRES_PASSWORD;
+}
+
+export default options;

next.config.js

@@ -3,7 +3,7 @@ const nextConfig = {
   reactStrictMode: true,
   experimental: {
     appDir: true,
-    serverComponentsExternalPackages: ['canvas', 'jsdom'],
+    serverComponentsExternalPackages: ['jsdom-napi-rs-canvas'],
     typedRoutes: true,
   },
   eslint: {
@@ -14,4 +14,16 @@ const nextConfig = {
   },
 };
 
+// For building on vercel: https://github.com/Automattic/node-canvas/issues/1779
+if (
+  process.env.LD_LIBRARY_PATH == null ||
+  !process.env.LD_LIBRARY_PATH.includes(
+    `${process.env.PWD}/node_modules/canvas/build/Release:`,
+  )
+) {
+  process.env.LD_LIBRARY_PATH = `${
+    process.env.PWD
+  }/node_modules/canvas/build/Release:${process.env.LD_LIBRARY_PATH || ''}`;
+}
+
 module.exports = nextConfig;

package.json

@@ -13,19 +13,19 @@
     "@types/cookie": "0.5.1",
     "@types/dotenv-safe": "8.1.2",
     "bcrypt": "5.1.0",
-    "canvas": "2.11.2",
     "cookie": "0.5.0",
     "dompurify": "3.0.3",
     "dotenv-cli": "7.2.1",
     "dotenv-safe": "8.2.0",
-    "jsdom": "22.1.0",
+    "jsdom-napi-rs-canvas": "^19.0.0",
     "ley": "0.8.1",
     "next": "13.4.7",
     "postgres": "3.3.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-markdown": "8.0.7",
     "sass": "1.63.6",
+    "server-only": "^0.0.1",
     "sharp": "0.32.1",
     "tsm": "2.3.0",
     "zod": "3.21.4"