wrangler 0.0.0-e22f9d7 → 0.0.0-e273e09

package/src/pages.tsx

@@ -1,37 +1,119 @@
 /* eslint-disable no-shadow */
 
-import assert from "assert";
-import type { BuilderCallback } from "yargs";
-import { join } from "path";
-import { tmpdir } from "os";
-import { existsSync, lstatSync, readFileSync, writeFileSync } from "fs";
-import { execSync, spawn } from "child_process";
-import { URL } from "url";
-import { getType } from "mime";
-import open from "open";
+import { execSync, spawn } from "node:child_process";
+import { existsSync, lstatSync, readFileSync, writeFileSync } from "node:fs";
+import { readdir, readFile, stat } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { dirname, join, sep, extname, basename } from "node:path";
+import { cwd } from "node:process";
+import { URL } from "node:url";
+import { hash } from "blake3-wasm";
 import { watch } from "chokidar";
-import type { BuildResult } from "esbuild";
+import { render, Text } from "ink";
+import SelectInput from "ink-select-input";
+import Spinner from "ink-spinner";
+import Table from "ink-table";
+import { getType } from "mime";
+import PQueue from "p-queue";
+import prettyBytes from "pretty-bytes";
+import React from "react";
+import { format as timeagoFormat } from "timeago.js";
+import { File, FormData } from "undici";
+import { buildPlugin } from "../pages/functions/buildPlugin";
 import { buildWorker } from "../pages/functions/buildWorker";
-import type { Config } from "../pages/functions/routes";
-import { writeRoutesModule } from "../pages/functions/routes";
 import { generateConfigFromFileTree } from "../pages/functions/filepath-routing";
+import { writeRoutesModule } from "../pages/functions/routes";
+import { fetchResult } from "./cfetch";
+import { getConfigCache, saveToConfigCache } from "./config-cache";
+import { prompt } from "./dialogs";
+import { FatalError } from "./errors";
+import { logger } from "./logger";
+import { getRequestContextCheckOptions } from "./miniflare-cli/request-context";
+import openInBrowser from "./open-in-browser";
+import { toUrlPath } from "./paths";
+import { requireAuth } from "./user";
+import type { Config } from "../pages/functions/routes";
+import type {
+  Headers as MiniflareHeaders,
+  Request as MiniflareRequest,
+  fetch as miniflareFetch,
+} from "@miniflare/core";
+import type { BuildResult } from "esbuild";
+import type { MiniflareOptions } from "miniflare";
+import type { BuilderCallback, CommandModule } from "yargs";
+
+export type Project = {
+  name: string;
+  subdomain: string;
+  domains: Array<string>;
+  source?: {
+    type: string;
+  };
+  latest_deployment?: {
+    modified_on: string;
+  };
+  created_on: string;
+  production_branch: string;
+};
+
+export type Deployment = {
+  id: string;
+  environment: string;
+  deployment_trigger: {
+    metadata: {
+      commit_hash: string;
+      branch: string;
+    };
+  };
+  url: string;
+  latest_stage: {
+    status: string;
+    ended_on: string;
+  };
+  project_name: string;
+};
+
+export type UploadPayloadFile = {
+  key: string;
+  value: string;
+  metadata: { contentType: string };
+  base64: boolean;
+};
+
+interface PagesConfigCache {
+  account_id?: string;
+  project_name?: string;
+}
+
+const PAGES_CONFIG_CACHE_FILENAME = "pages.json";
+const MAX_BUCKET_SIZE = 50 * 1024 * 1024;
+const MAX_BUCKET_FILE_COUNT = 5000;
+const BULK_UPLOAD_CONCURRENCY = 3;
+const MAX_UPLOAD_ATTEMPTS = 5;
 
 // Defer importing miniflare until we really need it. This takes ~0.5s
 // and also modifies some `stream/web` and `undici` prototypes, so we
 // don't want to do this if pages commands aren't being called.
-import type { Headers, Request, fetch } from "@miniflare/core";
-import type { MiniflareOptions } from "miniflare";
 
-const EXIT_CALLBACKS = [];
-const EXIT = (message?: string, code?: number) => {
-  if (message) console.log(message);
-  if (code) process.exitCode = code;
-  EXIT_CALLBACKS.forEach((callback) => callback());
-  process.exit(code);
+export const pagesBetaWarning =
+  "🚧 'wrangler pages <command>' is a beta command. Please report any issues to https://github.com/cloudflare/wrangler2/issues/new/choose";
+
+const isInPagesCI = !!process.env.CF_PAGES;
+
+const CLEANUP_CALLBACKS: (() => void)[] = [];
+const CLEANUP = () => {
+  CLEANUP_CALLBACKS.forEach((callback) => callback());
+  RUNNING_BUILDERS.forEach((builder) => builder.stop?.());
 };
 
-process.on("SIGINT", () => EXIT());
-process.on("SIGTERM", () => EXIT());
+process.on("SIGINT", () => {
+  CLEANUP();
+  process.exit();
+});
+process.on("SIGTERM", () => {
+  CLEANUP();
+  process.exit();
+});
 
 function isWindows() {
   return process.platform === "win32";
@@ -91,7 +173,7 @@ function getPort(pid: number) {
     const match = matches[0];
     if (match) return parseInt(match[1]);
   } catch (thrown) {
-    console.error(
+    logger.error(
       `Error scanning for ports of process with PID ${pid}: ${thrown}`
     );
   }
@@ -104,13 +186,15 @@ async function spawnProxyProcess({
   port?: number;
   command: (string | number)[];
 }): Promise<void | number> {
-  if (command.length === 0)
-    return EXIT(
+  if (command.length === 0) {
+    CLEANUP();
+    throw new FatalError(
       "Must specify a directory of static assets to serve or a command to run.",
       1
     );
+  }
 
-  console.log(`Running ${command.join(" ")}...`);
+  logger.log(`Running ${command.join(" ")}...`);
   const proxy = spawn(
     command[0].toString(),
     command.slice(1).map((value) => value.toString()),
@@ -122,28 +206,30 @@ async function spawnProxyProcess({
       },
     }
   );
-  EXIT_CALLBACKS.push(() => proxy.kill());
+  CLEANUP_CALLBACKS.push(() => {
+    proxy.kill();
+  });
 
   proxy.stdout.on("data", (data) => {
-    console.log(`[proxy]: ${data}`);
+    logger.log(`[proxy]: ${data}`);
   });
 
   proxy.stderr.on("data", (data) => {
-    console.error(`[proxy]: ${data}`);
+    logger.error(`[proxy]: ${data}`);
   });
 
   proxy.on("close", (code) => {
-    console.error(`Proxy exited with status ${code}.`);
+    logger.error(`Proxy exited with status ${code}.`);
   });
 
   // Wait for proxy process to start...
   while (!proxy.pid) {}
 
   if (port === undefined) {
-    console.log(
+    logger.log(
       `Sleeping ${SECONDS_TO_WAIT_FOR_PROXY} seconds to allow proxy process to start before attempting to automatically determine port...`
     );
-    console.log("To skip, specify the proxy port with --proxy.");
+    logger.log("To skip, specify the proxy port with --proxy.");
     await sleep(SECONDS_TO_WAIT_FOR_PROXY * 1000);
 
     port = getPids(proxy.pid)
@@ -151,12 +237,13 @@ async function spawnProxyProcess({
       .filter((port) => port !== undefined)[0];
 
     if (port === undefined) {
-      return EXIT(
+      CLEANUP();
+      throw new FatalError(
         "Could not automatically determine proxy port. Please specify the proxy port with --proxy.",
         1
       );
     } else {
-      console.log(`Automatically determined the proxy port to be ${port}.`);
+      logger.log(`Automatically determined the proxy port to be ${port}.`);
     }
   }
 
@@ -213,7 +300,7 @@ function generateRulesMatcher<T>(
     T
   ][];
 
-  return ({ request }: { request: Request }) => {
+  return ({ request }: { request: MiniflareRequest }) => {
     const { pathname, host } = new URL(request.url);
 
     return compiledRules
@@ -286,7 +373,7 @@ function generateHeadersMatcher(headersFile: string) {
       )
     );
 
-    return (request: Request) => {
+    return (request: MiniflareRequest) => {
       const matches = rulesMatcher({
         request,
       });
@@ -335,7 +422,7 @@ function generateRedirectsMatcher(redirectsFile: string) {
       })
     );
 
-    return (request: Request) => {
+    return (request: MiniflareRequest) => {
       const match = rulesMatcher({
         request,
       })[0];
@@ -390,7 +477,9 @@ function hasFileExtension(pathname: string) {
   return /\/.+\.[a-z0-9]+$/i.test(pathname);
 }
 
-async function generateAssetsFetch(directory: string): Promise<typeof fetch> {
+async function generateAssetsFetch(
+  directory: string
+): Promise<typeof miniflareFetch> {
   // Defer importing miniflare until we really need it
   const { Headers, Request, Response } = await import("@miniflare/core");
 
@@ -423,12 +512,12 @@ async function generateAssetsFetch(directory: string): Promise<typeof fetch> {
   }).on("change", (path) => {
     switch (path) {
       case headersFile: {
-        console.log("_headers modified. Re-evaluating...");
+        logger.log("_headers modified. Re-evaluating...");
         headersMatcher = generateHeadersMatcher(headersFile);
         break;
       }
       case redirectsFile: {
-        console.log("_redirects modified. Re-evaluating...");
+        logger.log("_redirects modified. Re-evaluating...");
         redirectsMatcher = generateRedirectsMatcher(redirectsFile);
         break;
       }
@@ -439,12 +528,12 @@ async function generateAssetsFetch(directory: string): Promise<typeof fetch> {
     return readFileSync(file);
   };
 
-  const generateResponse = (request: Request) => {
+  const generateResponse = (request: MiniflareRequest) => {
     const url = new URL(request.url);
 
     const deconstructedResponse: {
       status: number;
-      headers: Headers;
+      headers: MiniflareHeaders;
       body?: Buffer;
     } = {
       status: 200,
@@ -596,8 +685,12 @@ async function generateAssetsFetch(directory: string): Promise<typeof fetch> {
   };
 
   const attachHeaders = (
-    request: Request,
-    deconstructedResponse: { status: number; headers: Headers; body?: Buffer }
+    request: MiniflareRequest,
+    deconstructedResponse: {
+      status: number;
+      headers: MiniflareHeaders;
+      body?: Buffer;
+    }
   ) => {
     const headers = deconstructedResponse.headers;
     const newHeaders = new Headers({});
@@ -641,7 +734,7 @@ async function generateAssetsFetch(directory: string): Promise<typeof fetch> {
 const RUNNING_BUILDERS: BuildResult[] = [];
 
 async function buildFunctions({
-  scriptPath,
+  outfile,
   outputConfigPath,
   functionsDirectory,
   minify = false,
@@ -649,8 +742,11 @@ async function buildFunctions({
   fallbackService = "ASSETS",
   watch = false,
   onEnd,
+  plugin = false,
+  buildOutputDirectory,
+  nodeCompat,
 }: {
-  scriptPath: string;
+  outfile: string;
   outputConfigPath?: string;
   functionsDirectory: string;
   minify?: boolean;
@@ -658,22 +754,26 @@ async function buildFunctions({
   fallbackService?: string;
   watch?: boolean;
   onEnd?: () => void;
+  plugin?: boolean;
+  buildOutputDirectory?: string;
+  nodeCompat?: boolean;
 }) {
   RUNNING_BUILDERS.forEach(
     (runningBuilder) => runningBuilder.stop && runningBuilder.stop()
   );
 
-  const routesModule = join(tmpdir(), "./functionsRoutes.mjs");
+  const routesModule = join(tmpdir(), `./functionsRoutes-${Math.random()}.mjs`);
+  const baseURL = toUrlPath("/");
 
   const config: Config = await generateConfigFromFileTree({
     baseDir: functionsDirectory,
-    baseURL: "/",
+    baseURL,
   });
 
   if (outputConfigPath) {
     writeFileSync(
       outputConfigPath,
-      JSON.stringify({ ...config, baseURL: "/" }, null, 2)
+      JSON.stringify({ ...config, baseURL }, null, 2)
     );
   }
 
@@ -683,23 +783,644 @@ async function buildFunctions({
     outfile: routesModule,
   });
 
-  RUNNING_BUILDERS.push(
-    await buildWorker({
-      routesModule,
-      outfile: scriptPath,
-      minify,
-      sourcemap,
-      fallbackService,
-      watch,
-      onEnd,
-    })
-  );
+  if (plugin) {
+    RUNNING_BUILDERS.push(
+      await buildPlugin({
+        routesModule,
+        outfile,
+        minify,
+        sourcemap,
+        watch,
+        nodeCompat,
+        onEnd,
+      })
+    );
+  } else {
+    RUNNING_BUILDERS.push(
+      await buildWorker({
+        routesModule,
+        outfile,
+        minify,
+        sourcemap,
+        fallbackService,
+        watch,
+        onEnd,
+        buildOutputDirectory,
+        nodeCompat,
+      })
+    );
+  }
 }
 
+interface CreateDeploymentArgs {
+  directory: string;
+  projectName?: string;
+  branch?: string;
+  commitHash?: string;
+  commitMessage?: string;
+  commitDirty?: boolean;
+}
+
+const upload = async ({
+  directory,
+  accountId,
+  projectName,
+}: {
+  directory: string;
+  accountId: string;
+  projectName: string;
+}) => {
+  type FileContainer = {
+    content: string;
+    contentType: string;
+    sizeInBytes: number;
+    hash: string;
+  };
+
+  const IGNORE_LIST = [
+    "_worker.js",
+    "_redirects",
+    "_headers",
+    ".DS_Store",
+    "node_modules",
+    ".git",
+  ];
+
+  const walk = async (
+    dir: string,
+    fileMap: Map<string, FileContainer> = new Map(),
+    depth = 0
+  ) => {
+    const files = await readdir(dir);
+
+    await Promise.all(
+      files.map(async (file) => {
+        const filepath = join(dir, file);
+        const filestat = await stat(filepath);
+
+        if (IGNORE_LIST.includes(file)) {
+          return;
+        }
+
+        if (filestat.isSymbolicLink()) {
+          return;
+        }
+
+        if (filestat.isDirectory()) {
+          fileMap = await walk(filepath, fileMap, depth + 1);
+        } else {
+          let name;
+          if (depth) {
+            name = filepath.split(sep).slice(1).join("/");
+          } else {
+            name = file;
+          }
+
+          // TODO: Move this to later so we don't hold as much in memory
+          const fileContent = await readFile(filepath);
+
+          const base64Content = fileContent.toString("base64");
+          const extension = extname(basename(name)).substring(1);
+
+          if (filestat.size > 25 * 1024 * 1024) {
+            throw new Error(
+              `Error: Pages only supports files up to ${prettyBytes(
+                25 * 1024 * 1024
+              )} in size\n${name} is ${prettyBytes(filestat.size)} in size`
+            );
+          }
+
+          fileMap.set(name, {
+            content: base64Content,
+            contentType: getType(name) || "application/octet-stream",
+            sizeInBytes: filestat.size,
+            hash: hash(base64Content + extension)
+              .toString("hex")
+              .slice(0, 32),
+          });
+        }
+      })
+    );
+
+    return fileMap;
+  };
+
+  const fileMap = await walk(directory);
+
+  if (fileMap.size > 20000) {
+    throw new FatalError(
+      `Error: Pages only supports up to 20,000 files in a deployment. Ensure you have specified your build output directory correctly.`,
+      1
+    );
+  }
+
+  const files = [...fileMap.values()];
+
+  async function fetchJwt(): Promise<string> {
+    return (
+      await fetchResult<{ jwt: string }>(
+        `/accounts/${accountId}/pages/projects/${projectName}/upload-token`
+      )
+    ).jwt;
+  }
+
+  let jwt = await fetchJwt();
+
+  const start = Date.now();
+
+  const missingHashes = await fetchResult<string[]>(
+    `/pages/assets/check-missing`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${jwt}`,
+      },
+      body: JSON.stringify({
+        hashes: files.map(({ hash }) => hash),
+      }),
+    }
+  );
+
+  const sortedFiles = files
+    .filter((file) => missingHashes.includes(file.hash))
+    .sort((a, b) => b.sizeInBytes - a.sizeInBytes);
+
+  // Start with a few buckets so small projects still get
+  // the benefit of multiple upload streams
+  const buckets: {
+    files: FileContainer[];
+    remainingSize: number;
+  }[] = new Array(BULK_UPLOAD_CONCURRENCY).fill(null).map(() => ({
+    files: [],
+    remainingSize: MAX_BUCKET_SIZE,
+  }));
+
+  let bucketOffset = 0;
+  for (const file of sortedFiles) {
+    let inserted = false;
+
+    for (let i = 0; i < buckets.length; i++) {
+      // Start at a different bucket for each new file
+      const bucket = buckets[(i + bucketOffset) % buckets.length];
+      if (
+        bucket.remainingSize >= file.sizeInBytes &&
+        bucket.files.length < MAX_BUCKET_FILE_COUNT
+      ) {
+        bucket.files.push(file);
+        bucket.remainingSize -= file.sizeInBytes;
+        inserted = true;
+        break;
+      }
+    }
+
+    if (!inserted) {
+      buckets.push({
+        files: [file],
+        remainingSize: MAX_BUCKET_SIZE - file.sizeInBytes,
+      });
+    }
+    bucketOffset++;
+  }
+
+  let counter = fileMap.size - sortedFiles.length;
+  const { rerender, unmount } = render(
+    <Progress done={counter} total={fileMap.size} />
+  );
+
+  const queue = new PQueue({ concurrency: BULK_UPLOAD_CONCURRENCY });
+
+  for (const bucket of buckets) {
+    // Don't upload empty buckets (can happen for tiny projects)
+    if (bucket.files.length === 0) continue;
+
+    const payload: UploadPayloadFile[] = bucket.files.map((file) => ({
+      key: file.hash,
+      value: file.content,
+      metadata: {
+        contentType: file.contentType,
+      },
+      base64: true,
+    }));
+
+    let attempts = 0;
+    const doUpload = async (): Promise<void> => {
+      try {
+        return await fetchResult(`/pages/assets/upload`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${jwt}`,
+          },
+          body: JSON.stringify(payload),
+        });
+      } catch (e) {
+        if (attempts < MAX_UPLOAD_ATTEMPTS) {
+          // Linear backoff, 0 second first time, then 1 second etc.
+          await new Promise((resolve) =>
+            setTimeout(resolve, attempts++ * 1000)
+          );
+
+          if ((e as { code: number }).code === 8000013) {
+            // Looks like the JWT expired, fetch another one
+            jwt = await fetchJwt();
+          }
+          return doUpload();
+        } else {
+          throw e;
+        }
+      }
+    };
+
+    queue.add(() =>
+      doUpload().then(
+        () => {
+          counter += bucket.files.length;
+          rerender(<Progress done={counter} total={fileMap.size} />);
+        },
+        (error) => {
+          return Promise.reject(
+            new FatalError(
+              "Failed to upload files. Please try again.",
+              error.code || 1
+            )
+          );
+        }
+      )
+    );
+  }
+
+  await queue.onIdle();
+
+  unmount();
+
+  const uploadMs = Date.now() - start;
+
+  const skipped = fileMap.size - missingHashes.length;
+  const skippedMessage = skipped > 0 ? `(${skipped} already uploaded) ` : "";
+
+  logger.log(
+    `✨ Success! Uploaded ${
+      sortedFiles.length
+    } files ${skippedMessage}${formatTime(uploadMs)}\n`
+  );
+
+  const doUpsertHashes = async (): Promise<void> => {
+    try {
+      return await fetchResult(`/pages/assets/upsert-hashes`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${jwt}`,
+        },
+        body: JSON.stringify({
+          hashes: files.map(({ hash }) => hash),
+        }),
+      });
+    } catch (e) {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      if ((e as { code: number }).code === 8000013) {
+        // Looks like the JWT expired, fetch another one
+        jwt = await fetchJwt();
+      }
+
+      return await fetchResult(`/pages/assets/upsert-hashes`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${jwt}`,
+        },
+        body: JSON.stringify({
+          hashes: files.map(({ hash }) => hash),
+        }),
+      });
+    }
+  };
+
+  try {
+    await doUpsertHashes();
+  } catch {
+    logger.warn(
+      "Failed to update file hashes. Every upload appeared to succeed for this deployment, but you might need to re-upload for future deployments. This shouldn't have any impact other than slowing the upload speed of your next deployment."
+    );
+  }
+
+  return Object.fromEntries(
+    [...fileMap.entries()].map(([fileName, file]) => [
+      `/${fileName}`,
+      file.hash,
+    ])
+  );
+};
+
+const createDeployment: CommandModule<
+  CreateDeploymentArgs,
+  CreateDeploymentArgs
+> = {
+  describe: "🆙 Publish a directory of static assets as a Pages deployment",
+  builder: (yargs) => {
+    return yargs
+      .positional("directory", {
+        type: "string",
+        demandOption: true,
+        description: "The directory of static files to upload",
+      })
+      .options({
+        "project-name": {
+          type: "string",
+          description: "The name of the project you want to deploy to",
+        },
+        branch: {
+          type: "string",
+          description: "The name of the branch you want to deploy to",
+        },
+        "commit-hash": {
+          type: "string",
+          description: "The SHA to attach to this deployment",
+        },
+        "commit-message": {
+          type: "string",
+          description: "The commit message to attach to this deployment",
+        },
+        "commit-dirty": {
+          type: "boolean",
+          description:
+            "Whether or not the workspace should be considered dirty for this deployment",
+        },
+      })
+      .epilogue(pagesBetaWarning);
+  },
+  handler: async ({
+    directory,
+    projectName,
+    branch,
+    commitHash,
+    commitMessage,
+    commitDirty,
+  }) => {
+    if (!directory) {
+      throw new FatalError("Must specify a directory.", 1);
+    }
+
+    const config = getConfigCache<PagesConfigCache>(
+      PAGES_CONFIG_CACHE_FILENAME
+    );
+    const accountId = await requireAuth(config);
+
+    projectName ??= config.project_name;
+
+    const isInteractive = process.stdin.isTTY;
+    if (!projectName && isInteractive) {
+      const projects = (await listProjects({ accountId })).filter(
+        (project) => !project.source
+      );
+
+      let existingOrNew: "existing" | "new" = "new";
+
+      if (projects.length > 0) {
+        existingOrNew = await new Promise<"new" | "existing">((resolve) => {
+          const { unmount } = render(
+            <>
+              <Text>
+                No project selected. Would you like to create one or use an
+                existing project?
+              </Text>
+              <SelectInput
+                items={[
+                  {
+                    key: "new",
+                    label: "Create a new project",
+                    value: "new",
+                  },
+                  {
+                    key: "existing",
+                    label: "Use an existing project",
+                    value: "existing",
+                  },
+                ]}
+                onSelect={async (selected) => {
+                  resolve(selected.value as "new" | "existing");
+                  unmount();
+                }}
+              />
+            </>
+          );
+        });
+      }
+
+      switch (existingOrNew) {
+        case "existing": {
+          projectName = await new Promise((resolve) => {
+            const { unmount } = render(
+              <>
+                <Text>Select a project:</Text>
+                <SelectInput
+                  items={projects.map((project) => ({
+                    key: project.name,
+                    label: project.name,
+                    value: project,
+                  }))}
+                  onSelect={async (selected) => {
+                    resolve(selected.value.name);
+                    unmount();
+                  }}
+                />
+              </>
+            );
+          });
+          break;
+        }
+        case "new": {
+          projectName = await prompt("Enter the name of your new project:");
+
+          if (!projectName) {
+            throw new FatalError("Must specify a project name.", 1);
+          }
+
+          let isGitDir = true;
+          try {
+            execSync(`git rev-parse --is-inside-work-tree`, {
+              stdio: "ignore",
+            });
+          } catch (err) {
+            isGitDir = false;
+          }
+
+          const productionBranch = await prompt(
+            "Enter the production branch name:",
+            "text",
+            isGitDir
+              ? execSync(`git rev-parse --abbrev-ref HEAD`).toString().trim()
+              : "production"
+          );
+
+          if (!productionBranch) {
+            throw new FatalError("Must specify a production branch.", 1);
+          }
+
+          await fetchResult<Project>(`/accounts/${accountId}/pages/projects`, {
+            method: "POST",
+            body: JSON.stringify({
+              name: projectName,
+              production_branch: productionBranch,
+            }),
+          });
+
+          saveToConfigCache<PagesConfigCache>(PAGES_CONFIG_CACHE_FILENAME, {
+            account_id: accountId,
+            project_name: projectName,
+          });
+
+          logger.log(`✨ Successfully created the '${projectName}' project.`);
+          break;
+        }
+      }
+    }
+
+    if (!projectName) {
+      throw new FatalError("Must specify a project name.", 1);
+    }
+
+    // We infer git info by default is not passed in
+
+    let isGitDir = true;
+    try {
+      execSync(`git rev-parse --is-inside-work-tree`, {
+        stdio: "ignore",
+      });
+    } catch (err) {
+      isGitDir = false;
+    }
+
+    let isGitDirty = false;
+
+    if (isGitDir) {
+      try {
+        isGitDirty = Boolean(
+          execSync(`git status --porcelain`).toString().length
+        );
+
+        if (!branch) {
+          branch = execSync(`git rev-parse --abbrev-ref HEAD`)
+            .toString()
+            .trim();
+        }
+
+        if (!commitHash) {
+          commitHash = execSync(`git rev-parse HEAD`).toString().trim();
+        }
+
+        if (!commitMessage) {
+          commitMessage = execSync(`git show -s --format=%B ${commitHash}`)
+            .toString()
+            .trim();
+        }
+      } catch (err) {}
+
+      if (isGitDirty && !commitDirty) {
+        logger.warn(
+          `Warning: Your working directory is a git repo and has uncommitted changes\nTo silence this warning, pass in --commit-dirty=true`
+        );
+      }
+
+      if (commitDirty === undefined) {
+        commitDirty = isGitDirty;
+      }
+    }
+
+    let builtFunctions: string | undefined = undefined;
+    const functionsDirectory = join(cwd(), "functions");
+    if (existsSync(functionsDirectory)) {
+      const outfile = join(tmpdir(), `./functionsWorker-${Math.random()}.js`);
+
+      await new Promise((resolve) =>
+        buildFunctions({
+          outfile,
+          functionsDirectory,
+          onEnd: () => resolve(null),
+          buildOutputDirectory: dirname(outfile),
+        })
+      );
+
+      builtFunctions = readFileSync(outfile, "utf-8");
+    }
+
+    const manifest = await upload({ directory, accountId, projectName });
+
+    const formData = new FormData();
+
+    formData.append("manifest", JSON.stringify(manifest));
+
+    if (branch) {
+      formData.append("branch", branch);
+    }
+
+    if (commitMessage) {
+      formData.append("commit_message", commitMessage);
+    }
+
+    if (commitHash) {
+      formData.append("commit_hash", commitHash);
+    }
+
+    if (commitDirty !== undefined) {
+      formData.append("commit_dirty", commitDirty);
+    }
+
+    let _headers: string | undefined,
+      _redirects: string | undefined,
+      _workerJS: string | undefined;
+
+    try {
+      _headers = readFileSync(join(directory, "_headers"), "utf-8");
+    } catch {}
+
+    try {
+      _redirects = readFileSync(join(directory, "_redirects"), "utf-8");
+    } catch {}
+
+    try {
+      _workerJS = readFileSync(join(directory, "_worker.js"), "utf-8");
+    } catch {}
+
+    if (_headers) {
+      formData.append("_headers", new File([_headers], "_headers"));
+    }
+
+    if (_redirects) {
+      formData.append("_redirects", new File([_redirects], "_redirects"));
+    }
+
+    if (builtFunctions) {
+      formData.append("_worker.js", new File([builtFunctions], "_worker.js"));
+    } else if (_workerJS) {
+      formData.append("_worker.js", new File([_workerJS], "_worker.js"));
+    }
+
+    const deploymentResponse = await fetchResult<Deployment>(
+      `/accounts/${accountId}/pages/projects/${projectName}/deployments`,
+      {
+        method: "POST",
+        body: formData,
+      }
+    );
+
+    saveToConfigCache<PagesConfigCache>(PAGES_CONFIG_CACHE_FILENAME, {
+      account_id: accountId,
+      project_name: projectName,
+    });
+
+    logger.log(
+      `✨ Deployment complete! Take a peek over at ${deploymentResponse.url}`
+    );
+  },
+};
+
 export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
   return yargs
     .command(
-      "dev [directory] [-- command]",
+      "dev [directory] [-- command..]",
       "🧑‍💻 Develop your full-stack Pages application locally",
       (yargs) => {
         return yargs
@@ -755,8 +1476,15 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
               default: false,
               description: "Auto reload HTML pages when change is detected",
             },
+            "node-compat": {
+              describe: "Enable node.js compatibility",
+              default: false,
+              type: "boolean",
+              hidden: true,
+            },
             // TODO: Miniflare user options
-          });
+          })
+          .epilogue(pagesBetaWarning);
       },
       async ({
         local,
@@ -768,10 +1496,14 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
         kv: kvs = [],
         do: durableObjects = [],
         "live-reload": liveReload,
-        "--": remaining = [],
+        "node-compat": nodeCompat,
+        _: [_pages, _dev, ...remaining],
       }) => {
+        // Beta message for `wrangler pages <commands>` usage
+        logger.log(pagesBetaWarning);
+
         if (!local) {
-          console.error("Only local mode is supported at the moment.");
+          logger.error("Only local mode is supported at the moment.");
           return;
         }
 
@@ -792,41 +1524,59 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
 
         let miniflareArgs: MiniflareOptions = {};
 
-        let scriptReadyResolve;
-        const scriptReadyPromise = new Promise(
+        let scriptReadyResolve: () => void;
+        const scriptReadyPromise = new Promise<void>(
           (resolve) => (scriptReadyResolve = resolve)
         );
 
         if (usingFunctions) {
-          const scriptPath = join(tmpdir(), "./functionsWorker.js");
+          const outfile = join(
+            tmpdir(),
+            `./functionsWorker-${Math.random()}.js`
+          );
 
-          console.log(`Compiling worker to "${scriptPath}"...`);
+          if (nodeCompat) {
+            console.warn(
+              "Enabling node.js compatibility mode for builtins and globals. This is experimental and has serious tradeoffs. Please see https://github.com/ionic-team/rollup-plugin-node-polyfills/ for more details."
+            );
+          }
 
-          await buildFunctions({
-            scriptPath,
-            functionsDirectory,
-            sourcemap: true,
-            watch: true,
-            onEnd: () => scriptReadyResolve(),
-          });
+          logger.log(`Compiling worker to "${outfile}"...`);
+
+          try {
+            await buildFunctions({
+              outfile,
+              functionsDirectory,
+              sourcemap: true,
+              watch: true,
+              onEnd: () => scriptReadyResolve(),
+              buildOutputDirectory: directory,
+              nodeCompat,
+            });
+          } catch {}
 
           watch([functionsDirectory], {
             persistent: true,
             ignoreInitial: true,
           }).on("all", async () => {
             await buildFunctions({
-              scriptPath,
+              outfile,
               functionsDirectory,
               sourcemap: true,
               watch: true,
               onEnd: () => scriptReadyResolve(),
+              buildOutputDirectory: directory,
+              nodeCompat,
             });
           });
 
           miniflareArgs = {
-            scriptPath,
+            scriptPath: outfile,
           };
         } else {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          scriptReadyResolve!();
+
           const scriptPath =
             directory !== undefined
               ? join(directory, singleWorkerScriptPath)
@@ -837,8 +1587,11 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
               scriptPath,
             };
           } else {
-            console.log("No functions. Shimming...");
+            logger.log("No functions. Shimming...");
             miniflareArgs = {
+              // cfFetch sets the `cf` object that a function could expect
+              // If there are no functions, there's no reason to set this up (and not make that network call)
+              cfFetch: false,
               // TODO: The fact that these request/response hacks are necessary is ridiculous.
               // We need to eliminate them from env.ASSETS.fetch (not sure if just local or prod as well)
               script: `
@@ -862,11 +1615,16 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
         // internally just waits for that promise to resolve.
         await scriptReadyPromise;
 
-        // Should only be called if no proxyPort, using `assert.fail()` here
-        // means the type of `assetsFetch` is still `typeof fetch`
-        const assetsFetch = proxyPort
-          ? () => assert.fail()
-          : await generateAssetsFetch(directory);
+        // `assetsFetch()` will only be called if there is `proxyPort` defined.
+        // We only define `proxyPort`, above, when there is no `directory` defined.
+        const assetsFetch =
+          directory !== undefined
+            ? await generateAssetsFetch(directory)
+            : invalidAssetsFetch;
+
+        const requestContextCheckOptions =
+          await getRequestContextCheckOptions();
+
         const miniflare = new Miniflare({
           port,
           watch: true,
@@ -887,20 +1645,22 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
           // User bindings
           bindings: {
             ...Object.fromEntries(
-              bindings.map((binding) => binding.toString().split("="))
+              bindings
+                .map((binding) => binding.toString().split("="))
+                .map(([key, ...values]) => [key, values.join("=")])
             ),
           },
 
           // env.ASSETS.fetch
           serviceBindings: {
-            async ASSETS(request) {
+            async ASSETS(request: MiniflareRequest) {
               if (proxyPort) {
                 try {
                   const url = new URL(request.url);
-                  url.host = `127.0.0.1:${proxyPort}`;
+                  url.host = `localhost:${proxyPort}`;
                   return await fetch(url, request);
                 } catch (thrown) {
-                  console.error(`Could not proxy request: ${thrown}`);
+                  logger.error(`Could not proxy request: ${thrown}`);
 
                   // TODO: Pretty error page
                   return new Response(
@@ -912,7 +1672,7 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
                 try {
                   return await assetsFetch(request);
                 } catch (thrown) {
-                  console.error(`Could not serve static asset: ${thrown}`);
+                  logger.error(`Could not serve static asset: ${thrown}`);
 
                   // TODO: Pretty error page
                   return new Response(
@@ -929,18 +1689,17 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
           cachePersist: true,
           liveReload,
 
+          ...requestContextCheckOptions,
           ...miniflareArgs,
         });
 
         try {
           // `startServer` might throw if user code contains errors
           const server = await miniflare.startServer();
-          console.log(`Serving at http://127.0.0.1:${port}/`);
+          logger.log(`Serving at http://localhost:${port}/`);
 
           if (process.env.BROWSER !== "none") {
-            const childProcess = await open(`http://127.0.0.1:${port}/`);
-            // fail silently if the open command doesn't work (e.g. in GitHub Codespaces)
-            childProcess.on("error", (_err) => {});
+            await openInBrowser(`http://localhost:${port}/`);
           }
 
           if (directory !== undefined && liveReload) {
@@ -952,17 +1711,20 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
             });
           }
 
-          EXIT_CALLBACKS.push(() => {
+          CLEANUP_CALLBACKS.push(() => {
             server.close();
             miniflare.dispose().catch((err) => miniflare.log.error(err));
           });
         } catch (e) {
-          miniflare.log.error(e);
-          EXIT("Could not start Miniflare.", 1);
+          miniflare.log.error(e as Error);
+          CLEANUP();
+          throw new FatalError("Could not start Miniflare.", 1);
         }
       }
     )
-    .command("functions", "Cloudflare Pages Functions", (yargs) =>
+    .command("functions", false, (yargs) =>
+      // we hide this command from help output because
+      // it's not meant to be used directly right now
       yargs.command(
         "build [directory]",
         "Compile a folder of Cloudflare Pages Functions into a single Worker",
@@ -974,7 +1736,7 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
               description: "The directory of Pages Functions",
             })
             .options({
-              "script-path": {
+              outfile: {
                 type: "string",
                 default: "_worker.js",
                 description: "The location of the output Worker script",
@@ -1006,26 +1768,326 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
                 description:
                   "Watch for changes to the functions and automatically rebuild the Worker script",
               },
-            }),
+              plugin: {
+                type: "boolean",
+                default: false,
+                description: "Build a plugin rather than a Worker script",
+              },
+              "build-output-directory": {
+                type: "string",
+                description: "The directory to output static assets to",
+              },
+              "node-compat": {
+                describe: "Enable node.js compatibility",
+                default: false,
+                type: "boolean",
+                hidden: true,
+              },
+            })
+            .epilogue(pagesBetaWarning),
         async ({
           directory,
-          "script-path": scriptPath,
+          outfile,
           "output-config-path": outputConfigPath,
           minify,
           sourcemap,
           fallbackService,
           watch,
+          plugin,
+          "build-output-directory": buildOutputDirectory,
+          "node-compat": nodeCompat,
         }) => {
+          if (!isInPagesCI) {
+            // Beta message for `wrangler pages <commands>` usage
+            logger.log(pagesBetaWarning);
+          }
+
+          if (nodeCompat) {
+            console.warn(
+              "Enabling node.js compatibility mode for builtins and globals. This is experimental and has serious tradeoffs. Please see https://github.com/ionic-team/rollup-plugin-node-polyfills/ for more details."
+            );
+          }
+
+          buildOutputDirectory ??= dirname(outfile);
+
           await buildFunctions({
-            scriptPath,
+            outfile,
             outputConfigPath,
             functionsDirectory: directory,
             minify,
             sourcemap,
             fallbackService,
             watch,
+            plugin,
+            buildOutputDirectory,
+            nodeCompat,
           });
         }
       )
+    )
+    .command("project", "⚡️ Interact with your Pages projects", (yargs) =>
+      yargs
+        .command(
+          "list",
+          "List your Cloudflare Pages projects",
+          (yargs) => yargs.epilogue(pagesBetaWarning),
+          async () => {
+            const config = getConfigCache<PagesConfigCache>(
+              PAGES_CONFIG_CACHE_FILENAME
+            );
+
+            const accountId = await requireAuth(config);
+
+            const projects: Array<Project> = await listProjects({ accountId });
+
+            const data = projects.map((project) => {
+              return {
+                "Project Name": project.name,
+                "Project Domains": `${project.domains.join(", ")}`,
+                "Git Provider": project.source ? "Yes" : "No",
+                "Last Modified": project.latest_deployment
+                  ? timeagoFormat(project.latest_deployment.modified_on)
+                  : timeagoFormat(project.created_on),
+              };
+            });
+
+            saveToConfigCache<PagesConfigCache>(PAGES_CONFIG_CACHE_FILENAME, {
+              account_id: accountId,
+            });
+
+            render(<Table data={data}></Table>);
+          }
+        )
+        .command(
+          "create [project-name]",
+          "Create a new Cloudflare Pages project",
+          (yargs) =>
+            yargs
+              .positional("project-name", {
+                type: "string",
+                demandOption: true,
+                description: "The name of your Pages project",
+              })
+              .options({
+                "production-branch": {
+                  type: "string",
+                  description:
+                    "The name of the production branch of your project",
+                },
+              })
+              .epilogue(pagesBetaWarning),
+          async ({ productionBranch, projectName }) => {
+            const config = getConfigCache<PagesConfigCache>(
+              PAGES_CONFIG_CACHE_FILENAME
+            );
+            const accountId = await requireAuth(config);
+
+            const isInteractive = process.stdin.isTTY;
+            if (!projectName && isInteractive) {
+              projectName = await prompt("Enter the name of your new project:");
+            }
+
+            if (!projectName) {
+              throw new FatalError("Must specify a project name.", 1);
+            }
+
+            if (!productionBranch && isInteractive) {
+              let isGitDir = true;
+              try {
+                execSync(`git rev-parse --is-inside-work-tree`, {
+                  stdio: "ignore",
+                });
+              } catch (err) {
+                isGitDir = false;
+              }
+
+              productionBranch = await prompt(
+                "Enter the production branch name:",
+                "text",
+                isGitDir
+                  ? execSync(`git rev-parse --abbrev-ref HEAD`)
+                      .toString()
+                      .trim()
+                  : "production"
+              );
+            }
+
+            if (!productionBranch) {
+              throw new FatalError("Must specify a production branch.", 1);
+            }
+
+            const { subdomain } = await fetchResult<Project>(
+              `/accounts/${accountId}/pages/projects`,
+              {
+                method: "POST",
+                body: JSON.stringify({
+                  name: projectName,
+                  production_branch: productionBranch,
+                }),
+              }
+            );
+
+            saveToConfigCache<PagesConfigCache>(PAGES_CONFIG_CACHE_FILENAME, {
+              account_id: accountId,
+              project_name: projectName,
+            });
+
+            logger.log(
+              `✨ Successfully created the '${projectName}' project. It will be available at https://${subdomain}/ once you create your first deployment.`
+            );
+            logger.log(
+              `To deploy a folder of assets, run 'wrangler pages publish [directory]'.`
+            );
+          }
+        )
+        .epilogue(pagesBetaWarning)
+    )
+    .command(
+      "deployment",
+      "🚀 Interact with the deployments of a project",
+      (yargs) =>
+        yargs
+          .command(
+            "list",
+            "List deployments in your Cloudflare Pages project",
+            (yargs) =>
+              yargs
+                .options({
+                  "project-name": {
+                    type: "string",
+                    description:
+                      "The name of the project you would like to list deployments for",
+                  },
+                })
+                .epilogue(pagesBetaWarning),
+            async ({ projectName }) => {
+              const config = getConfigCache<PagesConfigCache>(
+                PAGES_CONFIG_CACHE_FILENAME
+              );
+              const accountId = await requireAuth(config);
+
+              projectName ??= config.project_name;
+
+              const isInteractive = process.stdin.isTTY;
+              if (!projectName && isInteractive) {
+                const projects = await listProjects({ accountId });
+                projectName = await new Promise((resolve) => {
+                  const { unmount } = render(
+                    <>
+                      <Text>Select a project:</Text>
+                      <SelectInput
+                        items={projects.map((project) => ({
+                          key: project.name,
+                          label: project.name,
+                          value: project,
+                        }))}
+                        onSelect={async (selected) => {
+                          resolve(selected.value.name);
+                          unmount();
+                        }}
+                      />
+                    </>
+                  );
+                });
+              }
+
+              if (!projectName) {
+                throw new FatalError("Must specify a project name.", 1);
+              }
+
+              const deployments: Array<Deployment> = await fetchResult(
+                `/accounts/${accountId}/pages/projects/${projectName}/deployments`
+              );
+
+              const titleCase = (word: string) =>
+                word.charAt(0).toUpperCase() + word.slice(1);
+
+              const shortSha = (sha: string) => sha.slice(0, 7);
+
+              const getStatus = (deployment: Deployment) => {
+                // Return a pretty time since timestamp if successful otherwise the status
+                if (deployment.latest_stage.status === `success`) {
+                  return timeagoFormat(deployment.latest_stage.ended_on);
+                }
+                return titleCase(deployment.latest_stage.status);
+              };
+
+              const data = deployments.map((deployment) => {
+                return {
+                  Environment: titleCase(deployment.environment),
+                  Branch: deployment.deployment_trigger.metadata.branch,
+                  Source: shortSha(
+                    deployment.deployment_trigger.metadata.commit_hash
+                  ),
+                  Deployment: deployment.url,
+                  Status: getStatus(deployment),
+                  // TODO: Use a url shortener
+                  Build: `https://dash.cloudflare.com/${accountId}/pages/view/${deployment.project_name}/${deployment.id}`,
+                };
+              });
+
+              saveToConfigCache<PagesConfigCache>(PAGES_CONFIG_CACHE_FILENAME, {
+                account_id: accountId,
+              });
+
+              render(<Table data={data}></Table>);
+            }
+          )
+          .command({
+            command: "create [directory]",
+            ...createDeployment,
+          } as CommandModule)
+          .epilogue(pagesBetaWarning)
+    )
+    .command({
+      command: "publish [directory]",
+      ...createDeployment,
+    } as CommandModule);
+};
+
+const invalidAssetsFetch: typeof miniflareFetch = () => {
+  throw new Error(
+    "Trying to fetch assets directly when there is no `directory` option specified, and not in `local` mode."
+  );
+};
+
+const listProjects = async ({
+  accountId,
+}: {
+  accountId: string;
+}): Promise<Array<Project>> => {
+  const pageSize = 10;
+  let page = 1;
+  const results = [];
+  while (results.length % pageSize === 0) {
+    const json: Array<Project> = await fetchResult(
+      `/accounts/${accountId}/pages/projects`,
+      {},
+      new URLSearchParams({
+        per_page: pageSize.toString(),
+        page: page.toString(),
+      })
     );
+    page++;
+    results.push(...json);
+    if (json.length < pageSize) {
+      break;
+    }
+  }
+  return results;
 };
+
+function formatTime(duration: number) {
+  return `(${(duration / 1000).toFixed(2)} sec)`;
+}
+
+function Progress({ done, total }: { done: number; total: number }) {
+  return (
+    <>
+      <Text>
+        <Spinner type="earth" />
+        {` Uploading... (${done}/${total})\n`}
+      </Text>
+    </>
+  );
+}