wrangler 0.0.0-ece06ea → 0.0.0-ed08df4

package/src/pages.tsx

@@ -1,24 +1,115 @@
-import type { BuilderCallback } from "yargs";
-import { join } from "path";
-import { tmpdir } from "os";
-import { existsSync } from "fs";
-import type { ChildProcess } from "child_process";
-import { execSync, spawn } from "child_process";
-import express from "express";
+/* eslint-disable no-shadow */
+
+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 } from "node:path";
+import { cwd } from "node:process";
+import { URL } from "node:url";
+import { hash } from "blake3-wasm";
+import { watch } from "chokidar";
+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 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 { 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, Request, fetch } from "@miniflare/core";
+import type { BuildResult } from "esbuild";
 import type { MiniflareOptions } from "miniflare";
-import type { RequestInfo, RequestInit } from "@miniflare/core";
-import httpProxyMiddleware from "http-proxy-middleware";
+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;
+};
+
+interface PagesConfigCache {
+  account_id?: string;
+  project_name?: string;
+}
+
+const PAGES_CONFIG_CACHE_FILENAME = "pages.json";
+
+// 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.
+
+export const pagesBetaWarning =
+  "🚧 'wrangler pages <command>' is a beta command. Please report any issues to https://github.com/cloudflare/wrangler2/issues/new/choose";
 
-type Exit = (message?: string) => undefined;
+const isInPagesCI = !!process.env.CF_PAGES;
 
-const isWindows = () => process.platform === "win32";
+const CLEANUP_CALLBACKS: (() => void)[] = [];
+const CLEANUP = () => {
+  CLEANUP_CALLBACKS.forEach((callback) => callback());
+  RUNNING_BUILDERS.forEach((builder) => builder.stop?.());
+};
+
+process.on("SIGINT", () => {
+  CLEANUP();
+  process.exit();
+});
+process.on("SIGTERM", () => {
+  CLEANUP();
+  process.exit();
+});
+
+function isWindows() {
+  return process.platform === "win32";
+}
 
 const SECONDS_TO_WAIT_FOR_PROXY = 5;
 
-const sleep = async (ms: number) =>
+async function sleep(ms: number) {
   await new Promise((resolve) => setTimeout(resolve, ms));
+}
 
-const getPids = (pid: number) => {
+function getPids(pid: number) {
   const pids: number[] = [pid];
   let command: string, regExp: RegExp;
 
@@ -43,9 +134,9 @@ const getPids = (pid: number) => {
   } catch {}
 
   return pids;
-};
+}
 
-const getPort = (pid: number) => {
+function getPort(pid: number) {
   let command: string, regExp: RegExp;
 
   if (isWindows()) {
@@ -66,69 +157,63 @@ const 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}`
     );
   }
-};
+}
 
-const spawnProxyProcess = async ({
-  directory,
+async function spawnProxyProcess({
   port,
-  remaining,
+  command,
 }: {
-  directory?: string;
   port?: number;
-  remaining: (string | number)[];
-}) => {
-  let proxy: ChildProcess;
-
-  const exit: Exit = (message) => {
-    if (message) console.error(message);
-    if (proxy) proxy.kill();
-    return undefined;
-  };
-
-  if (directory !== undefined) {
-    console.log(`Serving ${directory}...`);
-    const args = ["serve", directory];
-    if (port) args.push("-p", port.toString());
-    proxy = spawn("npx", args, { shell: isWindows() });
-  } else {
-    const command = remaining;
-    if (command.length === 0)
-      return exit(
-        "Must specify a directory of static assets to serve or a command to run."
-      );
-
-    console.log(`Running ${command.join(" ")}...`);
-    proxy = spawn(
-      command[0].toString(),
-      command.slice(1).map((value) => value.toString()),
-      { shell: isWindows() }
+  command: (string | number)[];
+}): Promise<void | number> {
+  if (command.length === 0) {
+    CLEANUP();
+    throw new FatalError(
+      "Must specify a directory of static assets to serve or a command to run.",
+      1
     );
   }
 
+  logger.log(`Running ${command.join(" ")}...`);
+  const proxy = spawn(
+    command[0].toString(),
+    command.slice(1).map((value) => value.toString()),
+    {
+      shell: isWindows(),
+      env: {
+        BROWSER: "none",
+        ...process.env,
+      },
+    }
+  );
+  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)
@@ -136,209 +221,1662 @@ const spawnProxyProcess = async ({
       .filter((port) => port !== undefined)[0];
 
     if (port === undefined) {
-      return exit(
-        "Could not automatically determin proxy port. Please specify the proxy port with --proxy."
+      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}.`);
     }
   }
 
-  return { proxy, port, exit };
-};
+  return port;
+}
 
-export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
-  return yargs.command(
-    "dev [directory] [-- command]",
-    "🧑‍💻 Develop your full-stack Pages application locally",
-    (yargs) => {
-      return yargs
-        .positional("directory", {
-          type: "string",
-          demandOption: undefined,
-          description: "The directory of static assets to serve",
+function escapeRegex(str: string) {
+  return str.replace(/[-/\\^$*+?.()|[]{}]/g, "\\$&");
+}
+
+type Replacements = Record<string, string>;
+
+function replacer(str: string, replacements: Replacements) {
+  for (const [replacement, value] of Object.entries(replacements)) {
+    str = str.replace(`:${replacement}`, value);
+  }
+  return str;
+}
+
+function generateRulesMatcher<T>(
+  rules?: Record<string, T>,
+  replacer: (match: T, replacements: Replacements) => T = (match) => match
+) {
+  // TODO: How can you test cross-host rules?
+  if (!rules) return () => [];
+
+  const compiledRules = Object.entries(rules)
+    .map(([rule, match]) => {
+      const crossHost = rule.startsWith("https://");
+
+      rule = rule.split("*").map(escapeRegex).join("(?<splat>.*)");
+
+      const host_matches = rule.matchAll(
+        /(?<=^https:\\\/\\\/[^/]*?):([^\\]+)(?=\\)/g
+      );
+      for (const match of host_matches) {
+        rule = rule.split(match[0]).join(`(?<${match[1]}>[^/.]+)`);
+      }
+
+      const path_matches = rule.matchAll(/:(\w+)/g);
+      for (const match of path_matches) {
+        rule = rule.split(match[0]).join(`(?<${match[1]}>[^/]+)`);
+      }
+
+      rule = "^" + rule + "$";
+
+      try {
+        const regExp = new RegExp(rule);
+        return [{ crossHost, regExp }, match];
+      } catch {}
+    })
+    .filter((value) => value !== undefined) as [
+    { crossHost: boolean; regExp: RegExp },
+    T
+  ][];
+
+  return ({ request }: { request: Request }) => {
+    const { pathname, host } = new URL(request.url);
+
+    return compiledRules
+      .map(([{ crossHost, regExp }, match]) => {
+        const test = crossHost ? `https://${host}${pathname}` : pathname;
+        const result = regExp.exec(test);
+        if (result) {
+          return replacer(match, result.groups || {});
+        }
+      })
+      .filter((value) => value !== undefined) as T[];
+  };
+}
+
+function generateHeadersMatcher(headersFile: string) {
+  if (existsSync(headersFile)) {
+    const contents = readFileSync(headersFile).toString();
+
+    // TODO: Log errors
+    const lines = contents
+      .split("\n")
+      .map((line) => line.trim())
+      .filter((line) => !line.startsWith("#") && line !== "");
+
+    const rules: Record<string, Record<string, string>> = {};
+    let rule: { path: string; headers: Record<string, string> } | undefined =
+      undefined;
+
+    for (const line of lines) {
+      if (/^([^\s]+:\/\/|^\/)/.test(line)) {
+        if (rule && Object.keys(rule.headers).length > 0) {
+          rules[rule.path] = rule.headers;
+        }
+
+        const path = validateURL(line);
+        if (path) {
+          rule = {
+            path,
+            headers: {},
+          };
+          continue;
+        }
+      }
+
+      if (!line.includes(":")) continue;
+
+      const [rawName, ...rawValue] = line.split(":");
+      const name = rawName.trim().toLowerCase();
+      const value = rawValue.join(":").trim();
+
+      if (name === "") continue;
+      if (!rule) continue;
+
+      const existingValues = rule.headers[name];
+      rule.headers[name] = existingValues
+        ? `${existingValues}, ${value}`
+        : value;
+    }
+
+    if (rule && Object.keys(rule.headers).length > 0) {
+      rules[rule.path] = rule.headers;
+    }
+
+    const rulesMatcher = generateRulesMatcher(rules, (match, replacements) =>
+      Object.fromEntries(
+        Object.entries(match).map(([name, value]) => [
+          name,
+          replacer(value, replacements),
+        ])
+      )
+    );
+
+    return (request: Request) => {
+      const matches = rulesMatcher({
+        request,
+      });
+      if (matches) return matches;
+    };
+  } else {
+    return () => undefined;
+  }
+}
+
+function generateRedirectsMatcher(redirectsFile: string) {
+  if (existsSync(redirectsFile)) {
+    const contents = readFileSync(redirectsFile).toString();
+
+    // TODO: Log errors
+    const lines = contents
+      .split("\n")
+      .map((line) => line.trim())
+      .filter((line) => !line.startsWith("#") && line !== "");
+
+    const rules = Object.fromEntries(
+      lines
+        .map((line) => line.split(" "))
+        .filter((tokens) => tokens.length === 2 || tokens.length === 3)
+        .map((tokens) => {
+          const from = validateURL(tokens[0], true, false, false);
+          const to = validateURL(tokens[1], false, true, true);
+          let status: number | undefined = parseInt(tokens[2]) || 302;
+          status = [301, 302, 303, 307, 308].includes(status)
+            ? status
+            : undefined;
+
+          return from && to && status ? [from, { to, status }] : undefined;
         })
-        .positional("command", {
+        .filter((rule) => rule !== undefined) as [
+        string,
+        { to: string; status?: number }
+      ][]
+    );
+
+    const rulesMatcher = generateRulesMatcher(
+      rules,
+      ({ status, to }, replacements) => ({
+        status,
+        to: replacer(to, replacements),
+      })
+    );
+
+    return (request: Request) => {
+      const match = rulesMatcher({
+        request,
+      })[0];
+      if (match) return match;
+    };
+  } else {
+    return () => undefined;
+  }
+}
+
+function extractPathname(
+  path = "/",
+  includeSearch: boolean,
+  includeHash: boolean
+) {
+  if (!path.startsWith("/")) path = `/${path}`;
+  const url = new URL(`//${path}`, "relative://");
+  return `${url.pathname}${includeSearch ? url.search : ""}${
+    includeHash ? url.hash : ""
+  }`;
+}
+
+function validateURL(
+  token: string,
+  onlyRelative = false,
+  includeSearch = false,
+  includeHash = false
+) {
+  const host = /^https:\/\/+(?<host>[^/]+)\/?(?<path>.*)/.exec(token);
+  if (host && host.groups && host.groups.host) {
+    if (onlyRelative) return;
+
+    return `https://${host.groups.host}${extractPathname(
+      host.groups.path,
+      includeSearch,
+      includeHash
+    )}`;
+  } else {
+    if (!token.startsWith("/") && onlyRelative) token = `/${token}`;
+
+    const path = /^\//.exec(token);
+    if (path) {
+      try {
+        return extractPathname(token, includeSearch, includeHash);
+      } catch {}
+    }
+  }
+  return "";
+}
+
+function hasFileExtension(pathname: string) {
+  return /\/.+\.[a-z0-9]+$/i.test(pathname);
+}
+
+async function generateAssetsFetch(directory: string): Promise<typeof fetch> {
+  // Defer importing miniflare until we really need it
+  const { Headers, Request, Response } = await import("@miniflare/core");
+
+  const headersFile = join(directory, "_headers");
+  const redirectsFile = join(directory, "_redirects");
+  const workerFile = join(directory, "_worker.js");
+
+  const ignoredFiles = [headersFile, redirectsFile, workerFile];
+
+  const assetExists = (path: string) => {
+    path = join(directory, path);
+    return (
+      existsSync(path) &&
+      lstatSync(path).isFile() &&
+      !ignoredFiles.includes(path)
+    );
+  };
+
+  const getAsset = (path: string) => {
+    if (assetExists(path)) {
+      return join(directory, path);
+    }
+  };
+
+  let redirectsMatcher = generateRedirectsMatcher(redirectsFile);
+  let headersMatcher = generateHeadersMatcher(headersFile);
+
+  watch([headersFile, redirectsFile], {
+    persistent: true,
+  }).on("change", (path) => {
+    switch (path) {
+      case headersFile: {
+        logger.log("_headers modified. Re-evaluating...");
+        headersMatcher = generateHeadersMatcher(headersFile);
+        break;
+      }
+      case redirectsFile: {
+        logger.log("_redirects modified. Re-evaluating...");
+        redirectsMatcher = generateRedirectsMatcher(redirectsFile);
+        break;
+      }
+    }
+  });
+
+  const serveAsset = (file: string) => {
+    return readFileSync(file);
+  };
+
+  const generateResponse = (request: Request) => {
+    const url = new URL(request.url);
+
+    const deconstructedResponse: {
+      status: number;
+      headers: Headers;
+      body?: Buffer;
+    } = {
+      status: 200,
+      headers: new Headers(),
+      body: undefined,
+    };
+
+    const match = redirectsMatcher(request);
+    if (match) {
+      const { status, to } = match;
+
+      let location = to;
+      let search;
+
+      if (to.startsWith("/")) {
+        search = new URL(location, "http://fakehost").search;
+      } else {
+        search = new URL(location).search;
+      }
+
+      location = `${location}${search ? "" : url.search}`;
+
+      if (status && [301, 302, 303, 307, 308].includes(status)) {
+        deconstructedResponse.status = status;
+      } else {
+        deconstructedResponse.status = 302;
+      }
+
+      deconstructedResponse.headers.set("Location", location);
+      return deconstructedResponse;
+    }
+
+    if (!request.method?.match(/^(get|head)$/i)) {
+      deconstructedResponse.status = 405;
+      return deconstructedResponse;
+    }
+
+    const notFound = () => {
+      let cwd = url.pathname;
+      while (cwd) {
+        cwd = cwd.slice(0, cwd.lastIndexOf("/"));
+
+        if ((asset = getAsset(`${cwd}/404.html`))) {
+          deconstructedResponse.status = 404;
+          deconstructedResponse.body = serveAsset(asset);
+          deconstructedResponse.headers.set(
+            "Content-Type",
+            getType(asset) || "application/octet-stream"
+          );
+          return deconstructedResponse;
+        }
+      }
+
+      if ((asset = getAsset(`/index.html`))) {
+        deconstructedResponse.body = serveAsset(asset);
+        deconstructedResponse.headers.set(
+          "Content-Type",
+          getType(asset) || "application/octet-stream"
+        );
+        return deconstructedResponse;
+      }
+
+      deconstructedResponse.status = 404;
+      return deconstructedResponse;
+    };
+
+    let asset;
+
+    if (url.pathname.endsWith("/")) {
+      if ((asset = getAsset(`${url.pathname}/index.html`))) {
+        deconstructedResponse.body = serveAsset(asset);
+        deconstructedResponse.headers.set(
+          "Content-Type",
+          getType(asset) || "application/octet-stream"
+        );
+        return deconstructedResponse;
+      } else if (
+        (asset = getAsset(`${url.pathname.replace(/\/$/, ".html")}`))
+      ) {
+        deconstructedResponse.status = 301;
+        deconstructedResponse.headers.set(
+          "Location",
+          `${url.pathname.slice(0, -1)}${url.search}`
+        );
+        return deconstructedResponse;
+      }
+    }
+
+    if (url.pathname.endsWith("/index")) {
+      deconstructedResponse.status = 301;
+      deconstructedResponse.headers.set(
+        "Location",
+        `${url.pathname.slice(0, -"index".length)}${url.search}`
+      );
+      return deconstructedResponse;
+    }
+
+    if ((asset = getAsset(url.pathname))) {
+      if (url.pathname.endsWith(".html")) {
+        const extensionlessPath = url.pathname.slice(0, -".html".length);
+        if (getAsset(extensionlessPath) || extensionlessPath === "/") {
+          deconstructedResponse.body = serveAsset(asset);
+          deconstructedResponse.headers.set(
+            "Content-Type",
+            getType(asset) || "application/octet-stream"
+          );
+          return deconstructedResponse;
+        } else {
+          deconstructedResponse.status = 301;
+          deconstructedResponse.headers.set(
+            "Location",
+            `${extensionlessPath}${url.search}`
+          );
+          return deconstructedResponse;
+        }
+      } else {
+        deconstructedResponse.body = serveAsset(asset);
+        deconstructedResponse.headers.set(
+          "Content-Type",
+          getType(asset) || "application/octet-stream"
+        );
+        return deconstructedResponse;
+      }
+    } else if (hasFileExtension(url.pathname)) {
+      notFound();
+      return deconstructedResponse;
+    }
+
+    if ((asset = getAsset(`${url.pathname}.html`))) {
+      deconstructedResponse.body = serveAsset(asset);
+      deconstructedResponse.headers.set(
+        "Content-Type",
+        getType(asset) || "application/octet-stream"
+      );
+      return deconstructedResponse;
+    }
+
+    if ((asset = getAsset(`${url.pathname}/index.html`))) {
+      deconstructedResponse.status = 301;
+      deconstructedResponse.headers.set(
+        "Location",
+        `${url.pathname}/${url.search}`
+      );
+      return deconstructedResponse;
+    } else {
+      notFound();
+      return deconstructedResponse;
+    }
+  };
+
+  const attachHeaders = (
+    request: Request,
+    deconstructedResponse: { status: number; headers: Headers; body?: Buffer }
+  ) => {
+    const headers = deconstructedResponse.headers;
+    const newHeaders = new Headers({});
+    const matches = headersMatcher(request) || [];
+
+    matches.forEach((match) => {
+      Object.entries(match).forEach(([name, value]) => {
+        newHeaders.append(name, `${value}`);
+      });
+    });
+
+    const combinedHeaders = {
+      ...Object.fromEntries(headers.entries()),
+      ...Object.fromEntries(newHeaders.entries()),
+    };
+
+    deconstructedResponse.headers = new Headers({});
+    Object.entries(combinedHeaders).forEach(([name, value]) => {
+      if (value) deconstructedResponse.headers.set(name, value);
+    });
+  };
+
+  return async (input, init) => {
+    const request = new Request(input, init);
+    const deconstructedResponse = generateResponse(request);
+    attachHeaders(request, deconstructedResponse);
+
+    const headers = new Headers();
+
+    [...deconstructedResponse.headers.entries()].forEach(([name, value]) => {
+      if (value) headers.set(name, value);
+    });
+
+    return new Response(deconstructedResponse.body, {
+      headers,
+      status: deconstructedResponse.status,
+    });
+  };
+}
+
+const RUNNING_BUILDERS: BuildResult[] = [];
+
+async function buildFunctions({
+  outfile,
+  outputConfigPath,
+  functionsDirectory,
+  minify = false,
+  sourcemap = false,
+  fallbackService = "ASSETS",
+  watch = false,
+  onEnd,
+  plugin = false,
+  buildOutputDirectory,
+}: {
+  outfile: string;
+  outputConfigPath?: string;
+  functionsDirectory: string;
+  minify?: boolean;
+  sourcemap?: boolean;
+  fallbackService?: string;
+  watch?: boolean;
+  onEnd?: () => void;
+  plugin?: boolean;
+  buildOutputDirectory?: string;
+}) {
+  RUNNING_BUILDERS.forEach(
+    (runningBuilder) => runningBuilder.stop && runningBuilder.stop()
+  );
+
+  const routesModule = join(tmpdir(), "./functionsRoutes.mjs");
+  const baseURL = toUrlPath("/");
+
+  const config: Config = await generateConfigFromFileTree({
+    baseDir: functionsDirectory,
+    baseURL,
+  });
+
+  if (outputConfigPath) {
+    writeFileSync(
+      outputConfigPath,
+      JSON.stringify({ ...config, baseURL }, null, 2)
+    );
+  }
+
+  await writeRoutesModule({
+    config,
+    srcDir: functionsDirectory,
+    outfile: routesModule,
+  });
+
+  if (plugin) {
+    RUNNING_BUILDERS.push(
+      await buildPlugin({
+        routesModule,
+        outfile,
+        minify,
+        sourcemap,
+        watch,
+        onEnd,
+      })
+    );
+  } else {
+    RUNNING_BUILDERS.push(
+      await buildWorker({
+        routesModule,
+        outfile,
+        minify,
+        sourcemap,
+        fallbackService,
+        watch,
+        onEnd,
+        buildOutputDirectory,
+      })
+    );
+  }
+}
+
+interface CreateDeploymentArgs {
+  directory: string;
+  projectName?: string;
+  branch?: string;
+  commitHash?: string;
+  commitMessage?: string;
+  commitDirty?: boolean;
+}
+
+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",
-          demandOption: undefined,
-          description: "The proxy command to run",
-        })
-        .options({
-          local: {
-            type: "boolean",
-            default: true,
-            description: "Run on my machine",
-          },
-          port: {
-            type: "number",
-            default: 8788,
-            description: "The port to listen on (serve from)",
-          },
-          proxy: {
-            type: "number",
-            description:
-              "The port to proxy (where the static assets are served)",
-          },
-          "script-path": {
-            type: "string",
-            default: "_worker.js",
-            description:
-              "The location of the single Worker script if not using functions",
-          },
-          binding: {
-            type: "array",
-            description: "Bind variable/secret (KEY=VALUE)",
-            alias: "b",
-          },
-          kv: {
-            type: "array",
-            description: "KV namespace to bind",
-            alias: "k",
-          },
-          do: {
-            type: "array",
-            description: "Durable Object to bind (NAME=CLASS)",
-            alias: "o",
-          },
-          // TODO: Miniflare user options
+          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();
+                }}
+              />
+            </>
+          );
         });
-    },
-    async ({
-      local,
-      directory,
-      port,
-      proxy: requestedProxyPort,
-      "script-path": singleWorkerScriptPath,
-      binding: bindings = [],
-      kv: kvs = [],
-      do: durableObjects = [],
-      "--": remaining = [],
-    }) => {
-      if (!local) {
-        console.error("Only local mode is supported at the moment.");
-        return;
       }
 
-      const functionsDirectory = "./functions";
-      const usingFunctions = existsSync(functionsDirectory);
+      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:");
 
-      const proxy = await spawnProxyProcess({
-        directory,
-        port: requestedProxyPort,
-        remaining: remaining as (string | number)[],
+          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",
       });
-      if (proxy === undefined) return undefined;
+    } catch (err) {
+      isGitDir = false;
+    }
 
-      const { port: proxyPort, exit } = proxy;
+    let isGitDirty = false;
 
-      let miniflareArgs: MiniflareOptions = {};
+    if (isGitDir) {
+      try {
+        isGitDirty = Boolean(
+          execSync(`git status --porcelain`).toString().length
+        );
 
-      if (usingFunctions) {
-        const scriptPath = join(tmpdir(), "./functionsWorker.js");
-        miniflareArgs = {
-          scriptPath,
-          buildWatchPaths: [functionsDirectory],
-          buildCommand: `npx @cloudflare/pages-functions-compiler build ${functionsDirectory} --outfile ${scriptPath}`,
-        };
-      } else {
-        const scriptPath =
-          directory !== undefined
-            ? join(directory, singleWorkerScriptPath)
-            : singleWorkerScriptPath;
+        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 silense 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.js");
+
+      await new Promise((resolve) =>
+        buildFunctions({
+          outfile,
+          functionsDirectory,
+          onEnd: () => resolve(null),
+          buildOutputDirectory: dirname(outfile),
+        })
+      );
+
+      builtFunctions = readFileSync(outfile, "utf-8");
+    }
+
+    type File = {
+      content: Buffer;
+      metadata: Metadata;
+    };
+
+    type Metadata = {
+      sizeInBytes: number;
+      hash: string;
+    };
+
+    const IGNORE_LIST = [
+      "_worker.js",
+      "_redirects",
+      "_headers",
+      ".DS_Store",
+      "node_modules",
+    ];
+
+    const walk = async (
+      dir: string,
+      fileMap: Map<string, File> = 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 =
+              name.split(".").length > 1 ? name.split(".").at(-1) || "" : "";
+
+            const content = base64Content + extension;
 
-        if (!existsSync(scriptPath)) {
-          return exit(
-            `No Worker script found at ${scriptPath}. Please either create a functions directory or create a single Worker at ${scriptPath}.`
+            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: fileContent,
+              metadata: {
+                sizeInBytes: filestat.size,
+                hash: hash(content).toString("hex").slice(0, 32),
+              },
+            });
+          }
+        })
+      );
+
+      return fileMap;
+    };
+
+    const fileMap = await walk(directory);
+
+    const start = Date.now();
+
+    const files: Array<Promise<void>> = [];
+
+    if (fileMap.size > 1000) {
+      throw new Error(
+        `Error: Pages only supports up to 1,000 files in a deployment at the moment.\nTry a smaller project perhaps?`
+      );
+    }
+
+    let counter = 0;
+
+    const { rerender, unmount } = render(
+      <Progress done={counter} total={fileMap.size} />
+    );
+
+    fileMap.forEach((file: File, name: string) => {
+      const form = new FormData();
+      form.append(
+        "file",
+        new File([new Uint8Array(file.content.buffer)], name)
+      );
+
+      // TODO: Consider a retry
+
+      const promise = fetchResult<{ id: string }>(
+        `/accounts/${accountId}/pages/projects/${projectName}/file`,
+        {
+          method: "POST",
+          body: form,
+        }
+      ).then((response) => {
+        counter++;
+        rerender(<Progress done={counter} total={fileMap.size} />);
+        if (response.id != file.metadata.hash) {
+          throw new Error(
+            `Looks like there was an issue uploading '${name}'. Try again perhaps?`
           );
         }
+      });
+
+      files.push(promise);
+    });
+
+    await Promise.all(files);
+
+    unmount();
+
+    const uploadMs = Date.now() - start;
+
+    logger.log(
+      `✨ Success! Uploaded ${fileMap.size} files ${formatTime(uploadMs)}\n`
+    );
+
+    const formData = new FormData();
 
-        miniflareArgs = {
-          scriptPath,
-        };
+    formData.append(
+      "manifest",
+      JSON.stringify(
+        Object.fromEntries(
+          [...fileMap.entries()].map(([fileName, file]) => [
+            `/${fileName}`,
+            file.metadata.hash,
+          ])
+        )
+      )
+    );
+
+    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,
       }
+    );
 
-      const { Miniflare } = await import("miniflare");
-      const { Request, Response, fetch } = await import("@miniflare/core");
-      const miniflare = new Miniflare({
-        watch: true,
-        modules: true,
+    saveToConfigCache<PagesConfigCache>(PAGES_CONFIG_CACHE_FILENAME, {
+      account_id: accountId,
+      project_name: projectName,
+    });
 
-        kvNamespaces: kvs.map((kv) => kv.toString()),
+    logger.log(
+      `✨ Deployment complete! Take a peek over at ${deploymentResponse.url}`
+    );
+  },
+};
 
-        durableObjects: Object.fromEntries(
-          durableObjects.map((durableObject) =>
-            durableObject.toString().split("=")
-          )
-        ),
+export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
+  return yargs
+    .command(
+      "dev [directory] [-- command]",
+      "🧑‍💻 Develop your full-stack Pages application locally",
+      (yargs) => {
+        return yargs
+          .positional("directory", {
+            type: "string",
+            demandOption: undefined,
+            description: "The directory of static assets to serve",
+          })
+          .positional("command", {
+            type: "string",
+            demandOption: undefined,
+            description: "The proxy command to run",
+          })
+          .options({
+            local: {
+              type: "boolean",
+              default: true,
+              description: "Run on my machine",
+            },
+            port: {
+              type: "number",
+              default: 8788,
+              description: "The port to listen on (serve from)",
+            },
+            proxy: {
+              type: "number",
+              description:
+                "The port to proxy (where the static assets are served)",
+            },
+            "script-path": {
+              type: "string",
+              default: "_worker.js",
+              description:
+                "The location of the single Worker script if not using functions",
+            },
+            binding: {
+              type: "array",
+              description: "Bind variable/secret (KEY=VALUE)",
+              alias: "b",
+            },
+            kv: {
+              type: "array",
+              description: "KV namespace to bind",
+              alias: "k",
+            },
+            do: {
+              type: "array",
+              description: "Durable Object to bind (NAME=CLASS)",
+              alias: "o",
+            },
+            "live-reload": {
+              type: "boolean",
+              default: false,
+              description: "Auto reload HTML pages when change is detected",
+            },
+            // TODO: Miniflare user options
+          })
+          .epilogue(pagesBetaWarning);
+      },
+      async ({
+        local,
+        directory,
+        port,
+        proxy: requestedProxyPort,
+        "script-path": singleWorkerScriptPath,
+        binding: bindings = [],
+        kv: kvs = [],
+        do: durableObjects = [],
+        "live-reload": liveReload,
+        _: [_pages, _dev, ...remaining],
+      }) => {
+        // Beta message for `wrangler pages <commands>` usage
+        logger.log(pagesBetaWarning);
 
-        bindings: {
-          // User bindings
-          ...Object.fromEntries(
-            bindings.map((binding) => binding.toString().split("="))
+        if (!local) {
+          logger.error("Only local mode is supported at the moment.");
+          return;
+        }
+
+        const functionsDirectory = "./functions";
+        const usingFunctions = existsSync(functionsDirectory);
+
+        const command = remaining as (string | number)[];
+
+        let proxyPort: number | void;
+
+        if (directory === undefined) {
+          proxyPort = await spawnProxyProcess({
+            port: requestedProxyPort,
+            command,
+          });
+          if (proxyPort === undefined) return undefined;
+        }
+
+        let miniflareArgs: MiniflareOptions = {};
+
+        let scriptReadyResolve: () => void;
+        const scriptReadyPromise = new Promise<void>(
+          (resolve) => (scriptReadyResolve = resolve)
+        );
+
+        if (usingFunctions) {
+          const outfile = join(tmpdir(), "./functionsWorker.js");
+
+          logger.log(`Compiling worker to "${outfile}"...`);
+
+          try {
+            await buildFunctions({
+              outfile,
+              functionsDirectory,
+              sourcemap: true,
+              watch: true,
+              onEnd: () => scriptReadyResolve(),
+              buildOutputDirectory: directory,
+            });
+          } catch {}
+
+          watch([functionsDirectory], {
+            persistent: true,
+            ignoreInitial: true,
+          }).on("all", async () => {
+            await buildFunctions({
+              outfile,
+              functionsDirectory,
+              sourcemap: true,
+              watch: true,
+              onEnd: () => scriptReadyResolve(),
+              buildOutputDirectory: directory,
+            });
+          });
+
+          miniflareArgs = {
+            scriptPath: outfile,
+          };
+        } else {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          scriptReadyResolve!();
+
+          const scriptPath =
+            directory !== undefined
+              ? join(directory, singleWorkerScriptPath)
+              : singleWorkerScriptPath;
+
+          if (existsSync(scriptPath)) {
+            miniflareArgs = {
+              scriptPath,
+            };
+          } else {
+            logger.log("No functions. Shimming...");
+            miniflareArgs = {
+              // 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: `
+            export default {
+              async fetch(request, env, context) {
+                const response = await env.ASSETS.fetch(request.url, request)
+                return new Response(response.body, response)
+              }
+            }`,
+            };
+          }
+        }
+
+        // Defer importing miniflare until we really need it
+        const { Miniflare, Log, LogLevel } = await import("miniflare");
+        const { Response, fetch } = await import("@miniflare/core");
+
+        // Wait for esbuild to finish building before starting Miniflare.
+        // This must be before the call to `new Miniflare`, as that will
+        // asynchronously start loading the script. `await startServer()`
+        // internally just waits for that promise to resolve.
+        await scriptReadyPromise;
+
+        // `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,
+          modules: true,
+
+          log: new Log(LogLevel.ERROR, { prefix: "pages" }),
+          logUnhandledRejections: true,
+          sourceMap: true,
+
+          kvNamespaces: kvs.map((kv) => kv.toString()),
+
+          durableObjects: Object.fromEntries(
+            durableObjects.map((durableObject) =>
+              durableObject.toString().split("=")
+            )
           ),
 
+          // User bindings
+          bindings: {
+            ...Object.fromEntries(
+              bindings
+                .map((binding) => binding.toString().split("="))
+                .map(([key, ...values]) => [key, values.join("=")])
+            ),
+          },
+
           // env.ASSETS.fetch
-          ASSETS: {
-            fetch: async (
-              input: RequestInfo,
-              init?: RequestInit | undefined
-            ) => {
-              try {
-                let request = new Request(input, init);
-                const url = new URL(request.url);
-                url.host = `127.0.0.1:${proxyPort}`;
-                request = new Request(url.toString(), request);
-                return await fetch(request);
-              } catch (thrown) {
-                console.error(`Could not proxy request: ${thrown}`);
-
-                // TODO: Pretty error page
-                return new Response(
-                  `[wrangler] Could not proxy request: ${thrown}`,
-                  { status: 502 }
-                );
+          serviceBindings: {
+            async ASSETS(request: Request) {
+              if (proxyPort) {
+                try {
+                  const url = new URL(request.url);
+                  url.host = `localhost:${proxyPort}`;
+                  return await fetch(url, request);
+                } catch (thrown) {
+                  logger.error(`Could not proxy request: ${thrown}`);
+
+                  // TODO: Pretty error page
+                  return new Response(
+                    `[wrangler] Could not proxy request: ${thrown}`,
+                    { status: 502 }
+                  );
+                }
+              } else {
+                try {
+                  return await assetsFetch(request);
+                } catch (thrown) {
+                  logger.error(`Could not serve static asset: ${thrown}`);
+
+                  // TODO: Pretty error page
+                  return new Response(
+                    `[wrangler] Could not serve static asset: ${thrown}`,
+                    { status: 502 }
+                  );
+                }
               }
             },
           },
-        },
 
-        kvPersist: true,
-        durableObjectsPersist: true,
-        cachePersist: true,
+          kvPersist: true,
+          durableObjectsPersist: true,
+          cachePersist: true,
+          liveReload,
 
-        ...miniflareArgs,
-      });
-      const miniflareServer = await miniflare.createServer();
+          ...requestContextCheckOptions,
+          ...miniflareArgs,
+        });
 
-      miniflareServer.listen(0, () => {
-        const address = miniflareServer.address();
-        if (typeof address === "string")
-          return exit(
-            "Could not determine Miniflare's port. Please report this issue to the Wrangler team."
-          );
+        try {
+          // `startServer` might throw if user code contains errors
+          const server = await miniflare.startServer();
+          logger.log(`Serving at http://localhost:${port}/`);
 
-        const miniflarePort = address.port;
+          if (process.env.BROWSER !== "none") {
+            await openInBrowser(`http://localhost:${port}/`);
+          }
 
-        const app = express();
+          if (directory !== undefined && liveReload) {
+            watch([directory], {
+              persistent: true,
+              ignoreInitial: true,
+            }).on("all", async () => {
+              await miniflare.reload();
+            });
+          }
 
-        app.use(
-          "/",
-          httpProxyMiddleware.createProxyMiddleware({
-            target: `http://127.0.0.1:${miniflarePort}`,
-          })
-        );
+          CLEANUP_CALLBACKS.push(() => {
+            server.close();
+            miniflare.dispose().catch((err) => miniflare.log.error(err));
+          });
+        } catch (e) {
+          miniflare.log.error(e as Error);
+          CLEANUP();
+          throw new FatalError("Could not start Miniflare.", 1);
+        }
+      }
+    )
+    .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",
+        (yargs) =>
+          yargs
+            .positional("directory", {
+              type: "string",
+              default: "functions",
+              description: "The directory of Pages Functions",
+            })
+            .options({
+              outfile: {
+                type: "string",
+                default: "_worker.js",
+                description: "The location of the output Worker script",
+              },
+              "output-config-path": {
+                type: "string",
+                description: "The location for the output config file",
+              },
+              minify: {
+                type: "boolean",
+                default: false,
+                description: "Minify the output Worker script",
+              },
+              sourcemap: {
+                type: "boolean",
+                default: false,
+                description:
+                  "Generate a sourcemap for the output Worker script",
+              },
+              "fallback-service": {
+                type: "string",
+                default: "ASSETS",
+                description:
+                  "The service to fallback to at the end of the `next` chain. Setting to '' will fallback to the global `fetch`.",
+              },
+              watch: {
+                type: "boolean",
+                default: false,
+                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",
+              },
+            })
+            .epilogue(pagesBetaWarning),
+        async ({
+          directory,
+          outfile,
+          "output-config-path": outputConfigPath,
+          minify,
+          sourcemap,
+          fallbackService,
+          watch,
+          plugin,
+          "build-output-directory": buildOutputDirectory,
+        }) => {
+          if (!isInPagesCI) {
+            // Beta message for `wrangler pages <commands>` usage
+            logger.log(pagesBetaWarning);
+          }
 
-        app.use(
-          "/",
-          httpProxyMiddleware.createProxyMiddleware({
-            target: `http://127.0.0.1:${proxyPort}`,
-          })
-        );
+          buildOutputDirectory ??= dirname(outfile);
 
-        app.listen(port, () => {
-          console.log(`Serving at http://127.0.0.1:${port}/`);
-        });
-      });
-    }
+          await buildFunctions({
+            outfile,
+            outputConfigPath,
+            functionsDirectory: directory,
+            minify,
+            sourcemap,
+            fallbackService,
+            watch,
+            plugin,
+            buildOutputDirectory,
+          });
+        }
+      )
+    )
+    .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 fetch = () => {
+  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>
+    </>
+  );
+}