Open-next Cloudflare / Docker / Setup (#248)

* Add Cloudflare generator with Wrangler and OpenNext support

This update introduces a new Cloudflare generator to streamline configuration and deployment via Wrangler and OpenNext. It registers the necessary templates, modifies project files, and adds Cloudflare-specific scripts and dependencies to the package.json. Additionally, .hbs files are updated in .prettierignore for formatting consistency.

* Add GitHub username prompt and improve setup scripts

Introduce a prompt for GitHub username to personalize project setup. Enhance the setup scripts by adding PNPM verification, configuring `upstream` remote, and removing the `origin` remote. Adjust health check and error handling for better reliability.

* Add Dockerfile generator to turbo generators

Introduced a new generator to create Dockerfile configurations for standalone Next.js applications. This includes modifying `next.config.mjs` for standalone output, updating dependencies in `package.json`, and adding a Dockerfile template. The generator is now registered in the turbo setup.

* Add console-based logger implementation. This is required for edge environments such as Cloudflare.

* Remove deprecated Supabase client utilities

The `server-actions-client`, `route-handler-client`, and `server-component-client` utilities have been removed in favor of `getSupabaseServerClient`. This simplifies and consolidates the API, ensuring consistency across server-side usage. Version bumped to 2.9.0 to reflect breaking changes.

turbo/generators/config.ts

@@ -1,5 +1,7 @@
 import type { PlopTypes } from '@turbo/gen';
 
+import { createCloudflareGenerator } from './templates/cloudflare/generator';
+import { createDockerGenerator } from './templates/docker/generator';
 import { createEnvironmentVariablesGenerator } from './templates/env/generator';
 import { createKeystaticAdminGenerator } from './templates/keystatic/generator';
 import { createPackageGenerator } from './templates/package/generator';
@@ -13,6 +15,8 @@ const generators = [
   createEnvironmentVariablesGenerator,
   createEnvironmentVariablesValidatorGenerator,
   createSetupGenerator,
+  createCloudflareGenerator,
+  createDockerGenerator,
 ];
 
 export default function generator(plop: PlopTypes.NodePlopAPI): void {

turbo/generators/templates/cloudflare/generator.ts

@@ -0,0 +1,90 @@
+import type { PlopTypes } from '@turbo/gen';
+import { execSync } from 'node:child_process';
+
+import packageJson from '../../../../package.json';
+
+export function createCloudflareGenerator(plop: PlopTypes.NodePlopAPI) {
+  plop.setGenerator('cloudflare', {
+    description: 'Cloudflare generator',
+    actions: [
+      {
+        type: 'add',
+        templateFile: 'templates/cloudflare/wrangler.jsonc.hbs',
+        path: 'apps/web/wrangler.jsonc',
+        data: {
+          name: packageJson.name,
+        },
+      },
+      {
+        type: 'add',
+        templateFile: 'templates/cloudflare/open-next.config.ts.hbs',
+        path: 'apps/web/open-next.config.ts',
+      },
+      {
+        type: 'add',
+        templateFile: 'templates/cloudflare/dev.vars.hbs',
+        path: 'apps/web/.dev.vars',
+      },
+      {
+        type: 'modify',
+        path: 'apps/web/next.config.mjs',
+        async transform(content) {
+          content += `
+           import { initOpenNextCloudflareForDev } from '@opennextjs/cloudflare';
+
+          void initOpenNextCloudflareForDev();
+         `;
+
+          return content;
+        },
+      },
+      {
+        type: 'modify',
+        path: 'apps/web/package.json',
+        async transform(content) {
+          const pkg = JSON.parse(content);
+
+          const deps = ['wrangler', '@opennextjs/cloudflare'];
+
+          const getVersion = async (dep: string) => {
+            const res = await fetch(
+              `https://registry.npmjs.org/-/package/${dep}/dist-tags`,
+            );
+
+            const json = await res.json();
+            return json.latest;
+          };
+
+          for (const dep of deps) {
+            const version = await getVersion(dep);
+            pkg.devDependencies![dep] = `^${version}`;
+          }
+
+          pkg.scripts['preview'] =
+            'opennextjs-cloudflare build && opennextjs-cloudflare preview';
+          pkg.scripts['deploy'] =
+            'opennextjs-cloudflare build && opennextjs-cloudflare deploy';
+          pkg.scripts['cf-typegen'] =
+            'wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts';
+
+          return JSON.stringify(pkg, null, 2);
+        },
+      },
+      async () => {
+        /**
+         * Install deps and format everything
+         */
+        execSync('pnpm i', {
+          stdio: 'inherit',
+        });
+
+        execSync(
+          `pnpm run format:fix`,
+        );
+
+        return 'Package scaffolded';
+      },
+    ],
+    prompts: [],
+  });
+}

turbo/generators/templates/cloudflare/open-next.config.ts.hbs

@@ -0,0 +1,3 @@
+import { defineCloudflareConfig } from "@opennextjs/cloudflare";
+
+export default defineCloudflareConfig();

turbo/generators/templates/cloudflare/wrangler.jsonc.hbs

@@ -0,0 +1,54 @@
+/**
+ * For more details on how to configure Wrangler, refer to:
+ * https://developers.cloudflare.com/workers/wrangler/configuration/
+ */
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "{{name}}",
+  "main": ".open-next/worker.js",
+  "keep_vars": true,
+  "compatibility_date": "2025-04-02",
+  "compatibility_flags": [
+    "nodejs_compat"
+  ],
+  // Minification helps to keep the Worker bundle size down and improve start up time.
+  "minify": true,
+  "assets": {
+    "binding": "ASSETS",
+    "directory": ".open-next/assets"
+  },
+  "observability": {
+    "enabled": true
+  },
+  /**
+   * Smart Placement
+   * Docs: https://developers.cloudflare.com/workers/configuration/smart-placement/#smart-placement
+   */
+  "placement": { "mode": "smart" },
+
+  /**
+   * Bindings
+   * Bindings allow your Worker to interact with resources on the Cloudflare Developer Platform, including
+   * databases, object storage, AI inference, real-time communication and more.
+   * https://developers.cloudflare.com/workers/runtime-apis/bindings/
+   */
+
+  /**
+   * Environment Variables
+   * https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
+   */
+  "vars": {},
+  /**
+   * Note: Use secrets to store sensitive data.
+   * https://developers.cloudflare.com/workers/configuration/secrets/
+   */
+
+  /**
+   * Service Bindings (communicate between multiple Workers)
+   * https://developers.cloudflare.com/workers/wrangler/configuration/#service-bindings
+   */
+  // "services": [{ "binding": "MY_SERVICE", "service": "my-service" }]
+  "d1_databases": [],
+  "kv_namespaces": [],
+  "r2_buckets": []
+}

turbo/generators/templates/docker/Dockerfile.hbs

@@ -0,0 +1,69 @@
+# syntax=docker.io/docker/dockerfile:1
+FROM node:20-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install global dependencies
+RUN corepack enable pnpm
+RUN npm install -g turbo
+
+# Copy the entire project for dependency installation
+# This ensures all packages are available for resolution
+COPY . .
+
+# Install dependencies using lockfile
+RUN pnpm install --frozen-lockfile
+RUN npm rebuild lightingcss --build-from-source --verbose
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+
+# Install global dependencies for the build
+RUN corepack enable pnpm
+RUN npm install -g turbo
+
+# Copy over everything including dependencies
+COPY --from=deps /app ./
+
+# Disable telemetry during the build
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# Build the project
+RUN turbo run build --filter=web...
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# Create a non-root user
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Copy public assets
+COPY --from=builder /app/apps/web/public ./apps/web/public
+
+# Leverage output traces to reduce image size (standalone output)
+COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next/static ./apps/web/.next/static
+
+# Switch to non-root user
+USER nextjs
+
+# Set server port and host
+EXPOSE 3000
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+HEALTHCHECK --interval=90s --timeout=5s --retries=3 \
+CMD curl -f http://localhost:3000/healthcheck || exit 1
+
+# Start the server
+CMD ["node", "apps/web/server.js"]

turbo/generators/templates/docker/generator.ts

@@ -0,0 +1,80 @@
+import type { PlopTypes } from '@turbo/gen';
+import { execSync } from 'node:child_process';
+import * as os from 'node:os';
+
+export function createDockerGenerator(plop: PlopTypes.NodePlopAPI) {
+  plop.setGenerator('docker', {
+    description: 'Dockerfile generator',
+    actions: [
+      {
+        type: 'modify',
+        path: 'apps/web/next.config.mjs',
+        transform(content) {
+          // Check if the output is already set to standalone
+          if (content.includes('output: "standalone"')) {
+            return content;
+          }
+
+          return content.replace(
+            'const config = {',
+            'const config = { output: "standalone",',
+          );
+        },
+      },
+      {
+        type: 'modify',
+        path: 'apps/web/package.json',
+        transform(content) {
+          const pkg = JSON.parse(content);
+          const deps = getDeps();
+
+          if (deps.length === 0) {
+            return content;
+          }
+
+          for (const dep of deps) {
+            pkg['devDependencies'][dep] = 'latest';
+          }
+
+          return JSON.stringify(pkg, null, 2);
+        },
+      },
+      {
+        type: 'add',
+        templateFile: 'templates/docker/Dockerfile.hbs',
+        path: 'Dockerfile',
+      },
+      async () => {
+        execSync('pnpm i', {
+          stdio: 'inherit',
+        })
+
+        execSync('pnpm format:fix', {
+          stdio: 'inherit',
+        });
+
+        return 'Dockerfile generated';
+      },
+    ],
+    prompts: [],
+  });
+}
+
+function getDeps() {
+  const arch = os.arch();
+
+  if (arch === 'arm64') {
+    return [
+      'lightningcss-linux-arm64-musl',
+      '@tailwindcss/oxide-linux-arm64-musl',
+    ];
+  } else if (arch === 'x64') {
+    const isMusl = process.config?.variables?.hasOwnProperty('musl');
+
+    return isMusl
+      ? ['lightningcss-linux-x64-musl', '@tailwindcss/oxide-linux-x64-musl']
+      : ['lightningcss-linux-x64-gnu', '@tailwindcss/oxide-linux-x64-gnu'];
+  } else {
+    return [];
+  }
+}

turbo/generators/templates/package/generator.ts

@@ -70,18 +70,18 @@ export function createPackageGenerator(plop: PlopTypes.NodePlopAPI) {
           return JSON.stringify(pkg, null, 2);
         },
       },
-      async (answers) => {
+      async () => {
         /**
          * Install deps and format everything
          */
-        execSync('pnpm manypkg fix', {
+        execSync('pnpm i', {
           stdio: 'inherit',
         });
+
         execSync(
-          `pnpm prettier --write packages/${
-            (answers as { name: string }).name
-          }/** --list-different`,
+          `pnpm run format:fix`,
         );
+
         return 'Package scaffolded';
       },
     ],

turbo/generators/templates/setup/generator.ts

@@ -1,10 +1,17 @@
-import type {PlopTypes} from '@turbo/gen';
-import {execSync} from 'node:child_process';
+import type { PlopTypes } from '@turbo/gen';
+import { execSync } from 'node:child_process';
+import { writeFileSync } from 'node:fs';
 
 export function createSetupGenerator(plop: PlopTypes.NodePlopAPI) {
   plop.setGenerator('setup', {
     description: 'Setup your Makerkit project',
     prompts: [
+      {
+        type: 'input',
+        name: 'username',
+        message:
+          'What is your GitHub username? Please make sure you enter the same username you used to activate your Makerkit license.',
+      },
       {
         type: 'input',
         name: 'projectName',
@@ -15,9 +22,21 @@ export function createSetupGenerator(plop: PlopTypes.NodePlopAPI) {
         name: 'setupHealthCheck',
         message: 'Do you want to setup a pre-commit hook for health checks?',
         default: false,
-      }
+      },
     ],
     actions: [
+      () => {
+        execSync(`pnpm run --filter scripts requirements`);
+
+        return 'Requirements checked';
+      },
+      async (answers: any) => {
+        execSync(`git config user.username "${answers.username}"`, {
+          stdio: 'inherit',
+        });
+
+        return 'Git user name set';
+      },
       {
         type: 'modify',
         path: 'package.json',
@@ -32,10 +51,15 @@ export function createSetupGenerator(plop: PlopTypes.NodePlopAPI) {
       },
       async (answers: any) => {
         try {
-          setupRemote();
-          setupPreCommit({setupHealthCheck: answers.setupHealthCheck});
+          createMakerkitConfig({
+            projectName: answers.projectName,
+            username: answers.username,
+          });
 
-          return 'Project setup complete';
+          setupRemote();
+          setupPreCommit({ setupHealthCheck: answers.setupHealthCheck });
+
+          return 'Project setup complete. Start developing your project!';
         } catch (error) {
           console.error('Project setup failed. Aborting package generation.');
           process.exit(1);
@@ -45,17 +69,31 @@ export function createSetupGenerator(plop: PlopTypes.NodePlopAPI) {
   });
 }
 
-function setupPreCommit(params: {
-  setupHealthCheck: boolean;
+function createMakerkitConfig(params: {
+  projectName: string;
+  username: string;
 }) {
+  const config = `{
+  "projectName": "${params.projectName}",
+  "username": "${params.username}"
+}`
+
+  writeFileSync('.makerkitrc', config, {
+    encoding: 'utf-8',
+  });
+
+  execSync('git add .makerkitrc');
+}
+
+function setupPreCommit(params: { setupHealthCheck: boolean }) {
   try {
     const filePath = '.git/hooks/pre-commit';
 
     const healthCheckCommands = params.setupHealthCheck
-        ? `pnpm run lint:fix\npnpm run typecheck\n`.trim()
-        : ``;
+      ? `pnpm run lint:fix\npnpm run typecheck\n`.trim()
+      : ``;
 
-    const licenseCommand = `pnpm run --filter license dev`;
+    const licenseCommand = `pnpm run --filter scripts license`;
     const fileContent = `#!/bin/bash\n${healthCheckCommands}${licenseCommand}`;
 
     // write file
@@ -76,37 +114,37 @@ function setupPreCommit(params: {
 function setupRemote() {
   try {
     // Setup remote upstream
-    const getRemoteUrl = execSync('git remote get-url origin', {
-      stdio: 'inherit',
-    });
-
-    const currentRemote = getRemoteUrl.toString().trim();
+    const currentRemote = execSync('git remote get-url origin').toString();
 
     console.log(`Setting upstream remote to ${currentRemote} ...`);
 
     if (currentRemote && currentRemote.includes('github.com')) {
-
       execSync(`git remote remove origin`, {
         stdio: 'inherit',
       });
 
-      execSync(`git remote set-url upstream ${currentRemote}`, {
+      execSync(`git remote add upstream ${currentRemote}`, {
         stdio: 'inherit',
       });
     } else {
       console.error('Your current remote is not GitHub');
     }
   } catch (error) {
+    console.error(error);
+
     console.info('No current remote found. Skipping upstream remote setup.');
   }
 
   // Run license script
   try {
-    execSync('turbo run --filter license dev', {
+    execSync('pnpm run --filter scripts license', {
       stdio: 'inherit',
     });
   } catch (error) {
-    console.error(`License script failed. Aborting package generation. Error: ${error}`);
+    console.error(
+      `License check failed. Aborting package generation. Error: ${error}`,
+    );
+
     process.exit(1);
   }
 }