Prepare for the npm package (#8)

Co-authored-by: Peter Bacon Darwin <[email protected]>

Author: vicb

LICENSE

@@ -0,0 +1,25 @@
+Copyright (c) 2020 Cloudflare, Inc.
+
+Permission is hereby granted, free of charge, to any
+person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the
+Software without restriction, including without
+limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software
+is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice
+shall be included in all copies or substantial portions
+of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT
+SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR
+IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.

TODO.md

@@ -14,6 +14,7 @@ DONE:
 ## Install
 
 - `npx create-next-app@latest <app-name> --use-npm` (use npm to avoid symlinks)
+
 - update next.config.mjs as follows
 
   ```typescript

builder/README.md

@@ -0,0 +1,46 @@
+# Next.js builder for Cloudflare
+
+## Build your app
+
+- update the `next.config.mjs` as follows
+
+  ```typescript
+  /** @type {import('next').NextConfig} */
+  const nextConfig = {
+    output: "standalone",
+    experimental: {
+      serverMinification: false,
+    },
+  };
+
+  export default nextConfig;
+  ```
+
+- add the following `devDependency` to the `package.json`:
+
+  ```json
+  "node-url": "npm:url@^0.11.4",
+  "wrangler": "^3.77.0"
+  ```
+
+- Execute `npx @flarelabs-net/builder@latest` in your app folder
+
+## Serve your app
+
+- add a `wrangler.toml` at the root of your project
+
+  ```toml
+  #:schema node_modules/wrangler/config-schema.json
+  name = "<app-name>"
+  main = ".worker-next/index.mjs"
+
+  compatibility_date = "2024-08-29"
+  compatibility_flags = ["nodejs_compat_v2"]
+  workers_dev = true
+  minify = false
+
+  # Use the new Workers + Assets to host the static frontend files
+  experimental_assets = { directory = ".worker-next/assets", binding = "ASSETS" }
+  ```
+
+- Use `wrangler dev`

builder/package.json

@@ -1,13 +1,31 @@
 {
-  "name": "builder",
+  "name": "@flarelabs-net/builder",
+  "description": "Cloudflare builder for next apps",
+  "version": "0.0.1",
   "scripts": {
     "build": "tsup",
     "build:watch": "tsup --watch src"
   },
   "bin": "dist/index.mjs",
   "files": [
+    "README.md",
     "dist"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/flarelabs-net/poc-next.git",
+    "directory": "builder"
+  },
+  "keywords": [
+    "cloudflare",
+    "workers",
+    "next.js"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/flarelabs-net/poc-next/issues"
+  },
+  "homepage": "https://github.com/flarelabs-net/poc-next",
   "devDependencies": {
     "@types/node": "^22.2.0",
     "esbuild": "^0.23.0",

builder/src/build/build-worker/index.ts builder/src/build/build-worker.ts

@@ -1,4 +1,4 @@
-import { NextjsAppPaths } from "../../nextjs-paths";
+import { NextjsAppPaths } from "../nextjs-paths";
 import { build, Plugin } from "esbuild";
 import { readdirSync, readFileSync, writeFileSync } from "node:fs";
 import { cp, readFile, writeFile } from "node:fs/promises";

builder/src/build/index.ts builder/src/build/build.ts

@@ -43,8 +43,6 @@ export async function build(inputNextAppDir: string, opts: BuildOptions): Promis
 
   const templateDir = path.join(path.dirname(fileURLToPath(import.meta.url)), "templates");
 
-  console.log({ outputDir, nextjsAppPaths, templateDir });
-
   await buildWorker(outputDir, nextjsAppPaths, templateDir);
 }
 

builder/src/build/build-worker/patches/investigated/copy-templates.ts builder/src/build/patches/investigated/copy-templates.ts

@@ -1,5 +1,5 @@
 import path from "node:path";
-import { NextjsAppPaths } from "../../../../nextjs-paths";
+import { NextjsAppPaths } from "../../../nextjs-paths";
 import { cpSync } from "node:fs";
 
 /**

builder/src/build/build-worker/patches/investigated/patch-require.ts builder/src/build/patches/investigated/patch-require.ts

@@ -1,5 +1,5 @@
 import { globSync } from "glob";
-import { NextjsAppPaths } from "../../../../nextjs-paths";
+import { NextjsAppPaths } from "../../../nextjs-paths";
 
 /**
  * `evalManifest` relies on readFileSync so we need to patch the function so that it instead returns the content of the manifest files

builder/src/build/build-worker/patches/investigated/patch-url.ts builder/src/build/patches/investigated/patch-url.ts

@@ -1,5 +1,5 @@
 import { readFileSync, existsSync } from "node:fs";
-import { NextjsAppPaths } from "../../../../nextjs-paths";
+import { NextjsAppPaths } from "../../../nextjs-paths";
 
 /**
  * The following avoid various Next.js specific files `require`d at runtime since we can just read

builder/src/build/build-worker/patches/to-investigate/inline-eval-manifest.ts builder/src/build/patches/to-investigate/inline-eval-manifest.ts

@@ -1,4 +1,4 @@
-import { NextjsAppPaths } from "../../../../nextjs-paths";
+import { NextjsAppPaths } from "../../../nextjs-paths";
 import { existsSync } from "node:fs";
 
 /**

builder/src/build/build-worker/patches/to-investigate/inline-next-require.ts builder/src/build/patches/to-investigate/inline-next-require.ts

@@ -1,6 +1,6 @@
 import { readFileSync } from "node:fs";
 import { globSync } from "glob";
-import { NextjsAppPaths } from "../../../../nextjs-paths";
+import { NextjsAppPaths } from "../../../nextjs-paths";
 
 export function patchReadFile(code: string, nextjsAppPaths: NextjsAppPaths): string {
   console.log("# patchReadFile");

builder/src/build/build-worker/patches/to-investigate/patch-find-dir.ts builder/src/build/patches/to-investigate/patch-find-dir.ts

@@ -1,6 +1,6 @@
 import path from "node:path";
 import fs, { writeFileSync } from "node:fs";
-import { NextjsAppPaths } from "../../../../nextjs-paths";
+import { NextjsAppPaths } from "../../../nextjs-paths";
 
 export function patchWranglerDeps(paths: NextjsAppPaths) {
   console.log("# patchWranglerDeps");

builder/src/build/build-worker/patches/to-investigate/patch-read-file.ts builder/src/build/patches/to-investigate/patch-read-file.ts

@@ -1,11 +1,11 @@
 import { resolve } from "node:path";
 import { getArgs } from "./args";
 import { existsSync } from "node:fs";
-import { build } from "./build";
+import { build } from "./build/build";
 
-const inputNextAppDir = resolve(".");
+const nextAppDir = resolve(".");
 
-console.log({ inputNextAppDir });
+console.log(`Building the Next.js app in the current folder (${nextAppDir})`);
 
 if (!["js", "cjs", "mjs", "ts"].some((ext) => existsSync(`./next.config.${ext}`))) {
   // TODO: we can add more validation later
@@ -14,7 +14,7 @@ if (!["js", "cjs", "mjs", "ts"].some((ext) => existsSync(`./next.config.${ext}`)
 
 const { skipBuild, outputDir } = getArgs();
 
-await build(inputNextAppDir, {
+await build(nextAppDir, {
   outputDir,
   skipBuild: !!skipBuild,
 });

builder/src/build/build-worker/patches/to-investigate/wrangler-deps.ts builder/src/build/patches/to-investigate/wrangler-deps.ts

@@ -4,12 +4,12 @@ import { defineConfig } from "tsup";
 export default defineConfig({
   entry: ["src/index.ts"],
   outDir: "dist",
-  dts: true,
+  dts: false,
   format: ["esm"],
   platform: "node",
   external: ["esbuild"],
   onSuccess: async () => {
-    await cp(`${__dirname}/src/build/build-worker/templates`, `${__dirname}/dist/templates`, {
+    await cp(`${__dirname}/src/templates`, `${__dirname}/dist/templates`, {
       recursive: true,
     });
   },

builder/src/index.ts

@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "build:worker": "builder",
+    "build:worker": "pnpm builder",
     "dev:worker": "wrangler dev --port 8770",
     "preview:worker": "pnpm build:worker && pnpm dev:worker",
     "e2e": "playwright test"
@@ -18,7 +18,7 @@
     "react-dom": "^18"
   },
   "devDependencies": {
-    "builder": "workspace:*",
+    "@flarelabs-net/builder": "workspace:*",
     "@playwright/test": "1.47.0",
     "@types/node": "^22.2.0",
     "node-url": "npm:url@^0.11.4",

builder/src/build/build-worker/templates/shims/empty.ts builder/src/templates/shims/empty.ts

@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "build:worker": "builder",
+    "build:worker": "pnpm builder",
     "dev:worker": "wrangler dev --port 8771",
     "preview:worker": "pnpm build:worker && pnpm dev:worker",
     "e2e": "playwright test -c e2e/playwright.config.ts"
@@ -18,7 +18,7 @@
     "next": "14.2.11"
   },
   "devDependencies": {
-    "builder": "workspace:*",
+    "@flarelabs-net/builder": "workspace:*",
     "@playwright/test": "1.47.0",
     "@types/node": "^20",
     "@types/react": "^18",