Publish Canary

- @vercel/build-utils@2.12.3-canary.42
 - vercel@23.1.3-canary.67
 - @vercel/client@10.2.3-canary.45
 - vercel-plugin-middleware@0.0.0-canary.19
 - vercel-plugin-go@1.0.0-canary.30
 - vercel-plugin-node@1.12.2-canary.34
 - vercel-plugin-python@1.0.0-canary.31
 - vercel-plugin-ruby@1.0.0-canary.30
 - @vercel/python@2.1.2-canary.2

.github/CODEOWNERS

@@ -4,24 +4,26 @@
 *                                        @TooTallNate
 /.github/workflows                       @AndyBitz @styfle
 /packages/frameworks                     @AndyBitz
-/packages/cli/src/commands/dev       @TooTallNate @styfle @AndyBitz
+/packages/cli/src/commands/build         @TooTallNate @styfle @AndyBitz @gdborton @jaredpalmer
-/packages/cli/src/util/dev           @TooTallNate @styfle @AndyBitz
+/packages/cli/src/commands/dev           @TooTallNate @styfle @AndyBitz
-/packages/cli/src/commands/domains   @javivelasco @mglagola @anatrajkovska
+/packages/cli/src/util/dev               @TooTallNate @styfle @AndyBitz
-/packages/cli/src/commands/certs     @javivelasco @mglagola @anatrajkovska
+/packages/cli/src/commands/domains       @javivelasco @mglagola @anatrajkovska
-/packages/cli/src/commands/env       @styfle @lucleray
+/packages/cli/src/commands/certs         @javivelasco @mglagola @anatrajkovska
-/packages/client                     @rdev @styfle @TooTallNate
+/packages/cli/src/commands/env           @styfle @lucleray
-/packages/build-utils                @styfle @AndyBitz @TooTallNate
+/packages/client                         @styfle @TooTallNate
-/packages/node                       @styfle @TooTallNate @lucleray
+/packages/build-utils                    @styfle @AndyBitz @TooTallNate
-/packages/node-bridge                @styfle @TooTallNate @lucleray
+/packages/middleware                     @gdborton @javivelasco
-/packages/next                       @Timer @ijjk
+/packages/node                           @styfle @TooTallNate @lucleray
-/packages/go                         @styfle @TooTallNate
+/packages/node-bridge                    @styfle @TooTallNate @lucleray
-/packages/python                     @styfle @TooTallNate
+/packages/next                           @Timer @ijjk
-/packages/ruby                       @styfle @coetry @TooTallNate
+/packages/go                             @styfle @TooTallNate
-/packages/static-build               @styfle @AndyBitz
+/packages/python                         @styfle @TooTallNate
-/packages/routing-utils              @styfle @dav-is @ijjk
+/packages/ruby                           @styfle @TooTallNate
-/examples                                @mcsdevv @timothyis
+/packages/static-build                   @styfle @AndyBitz
+/packages/routing-utils                  @styfle @dav-is @ijjk
+/examples                                @mcsdevv
 /examples/create-react-app               @Timer
 /examples/nextjs                         @timneutkens @Timer
-/examples/hugo                           @mcsdevv @timothyis @styfle
+/examples/hugo                           @mcsdevv @styfle
-/examples/jekyll                         @mcsdevv @timothyis @styfle
+/examples/jekyll                         @mcsdevv @styfle
-/examples/zola                           @mcsdevv @timothyis @styfle
+/examples/zola                           @mcsdevv @styfle

.github/workflows/cancel.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 2
     steps:
-      - uses: styfle/cancel-workflow-action@0.4.1
+      - uses: styfle/cancel-workflow-action@0.9.1
         with:
           workflow_id: 849295, 849296, 849297, 849298
           access_token: ${{ github.token }}

.github/workflows/test-integration-dev.yml

@@ -11,7 +11,7 @@ on:
 jobs:
   test:
     name: Dev
-    timeout-minutes: 60
+    timeout-minutes: 75
     strategy:
       fail-fast: false
       matrix:

.gitignore

@@ -27,3 +27,4 @@ test/lib/deployment/failed-page.txt
 /public
 __pycache__
 .vercel
+.output

DEVELOPING_A_RUNTIME.md

@@ -332,7 +332,7 @@ This is an abstract enumeration type that is implemented by one of the following
 - `nodejs10.x`
 - `go1.x`
 - `java11`
-- `python3.8`
+- `python3.9`
 - `python3.6`
 - `dotnetcore2.1`
 - `ruby2.5`
@@ -398,12 +398,12 @@ This utility allows you to _scan_ the filesystem and return a [`Files`](#files)
 The following trivial example downloads everything to the filesystem, only to return it back (therefore just re-creating the passed-in [`Files`](#files)):
 
 ```js
-const { glob, download } = require('@vercel/build-utils')
+const { glob, download } = require('@vercel/build-utils');
 
 exports.build = ({ files, workPath }) => {
-  await download(files, workPath)
+  await download(files, workPath);
-  return glob('**', workPath)
+  return glob('**', workPath);
-}
+};
 ```
 
 ### `getWritableDirectory()`

api/frameworks.ts

@@ -14,8 +14,6 @@ const frameworks = (_frameworks as Framework[])
       sort: undefined,
       dependency: undefined,
       defaultRoutes: undefined,
-      devCommand: undefined,
-      buildCommand: undefined,
     };
 
     if (framework.logo) {

api/package.json

@@ -5,7 +5,7 @@
   "description": "API for the vercel/vercel repo",
   "main": "index.js",
   "scripts": {
-    "vercel-build": "yarn --cwd .. && node ../utils/run.js build all"
+    "vercel-build": "node ../utils/run.js build all"
   },
   "dependencies": {
     "@sentry/node": "5.11.1",

examples/remix/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+
+.cache
+.vercel
+.output
+
+public/build
+api/_build

examples/remix/README.md

@@ -0,0 +1,34 @@
+# Welcome to Remix!
+
+- [Remix Docs](https://remix.run/docs)
+
+## Deployment
+
+After having run the `create-remix` command and selected "Vercel" as a deployment target, you only need to [import your Git repository](https://vercel.com/new) into Vercel, and it will be deployed.
+
+If you'd like to avoid using a Git repository, you can also deploy the directory by running [Vercel CLI](https://vercel.com/cli):
+
+```sh
+npm i -g vercel
+vercel
+```
+
+It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its [Git Integration](https://vercel.com/docs/concepts/git).
+
+## Development
+
+To run your Remix app locally, make sure your project's local dependencies are installed:
+
+```sh
+npm install
+```
+
+Afterwards, start the Remix development server like so:
+
+```sh
+npm run dev
+```
+
+Open up [http://localhost:3000](http://localhost:3000) and you should be ready to go!
+
+If you're used to using the `vercel dev` command provided by [Vercel CLI](https://vercel.com/cli) instead, you can also use that, but it's not needed.

examples/remix/api/index.js

@@ -0,0 +1,5 @@
+const { createRequestHandler } = require("@remix-run/vercel");
+
+module.exports = createRequestHandler({
+  build: require("./_build")
+});

examples/remix/app/entry.client.tsx

@@ -0,0 +1,4 @@
+import { hydrate } from "react-dom";
+import { RemixBrowser } from "remix";
+
+hydrate(<RemixBrowser />, document);

examples/remix/app/entry.server.tsx

@@ -0,0 +1,21 @@
+import { renderToString } from "react-dom/server";
+import { RemixServer } from "remix";
+import type { EntryContext } from "remix";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  let markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders
+  });
+}

examples/remix/app/root.tsx

@@ -0,0 +1,178 @@
+import {
+  Link,
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useCatch
+} from "remix";
+import type { LinksFunction } from "remix";
+
+import globalStylesUrl from "~/styles/global.css";
+import darkStylesUrl from "~/styles/dark.css";
+
+// https://remix.run/api/app#links
+export let links: LinksFunction = () => {
+  return [
+    { rel: "stylesheet", href: globalStylesUrl },
+    {
+      rel: "stylesheet",
+      href: darkStylesUrl,
+      media: "(prefers-color-scheme: dark)"
+    }
+  ];
+};
+
+// https://remix.run/api/conventions#default-export
+// https://remix.run/api/conventions#route-filenames
+export default function App() {
+  return (
+    <Document>
+      <Layout>
+        <Outlet />
+      </Layout>
+    </Document>
+  );
+}
+
+// https://remix.run/docs/en/v1/api/conventions#errorboundary
+export function ErrorBoundary({ error }: { error: Error }) {
+  console.error(error);
+  return (
+    <Document title="Error!">
+      <Layout>
+        <div>
+          <h1>There was an error</h1>
+          <p>{error.message}</p>
+          <hr />
+          <p>
+            Hey, developer, you should replace this with what you want your
+            users to see.
+          </p>
+        </div>
+      </Layout>
+    </Document>
+  );
+}
+
+// https://remix.run/docs/en/v1/api/conventions#catchboundary
+export function CatchBoundary() {
+  let caught = useCatch();
+
+  let message;
+  switch (caught.status) {
+    case 401:
+      message = (
+        <p>
+          Oops! Looks like you tried to visit a page that you do not have access
+          to.
+        </p>
+      );
+      break;
+    case 404:
+      message = (
+        <p>Oops! Looks like you tried to visit a page that does not exist.</p>
+      );
+      break;
+
+    default:
+      throw new Error(caught.data || caught.statusText);
+  }
+
+  return (
+    <Document title={`${caught.status} ${caught.statusText}`}>
+      <Layout>
+        <h1>
+          {caught.status}: {caught.statusText}
+        </h1>
+        {message}
+      </Layout>
+    </Document>
+  );
+}
+
+function Document({
+  children,
+  title
+}: {
+  children: React.ReactNode;
+  title?: string;
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        {title ? <title>{title}</title> : null}
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+        {process.env.NODE_ENV === "development" && <LiveReload />}
+      </body>
+    </html>
+  );
+}
+
+function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="remix-app">
+      <header className="remix-app__header">
+        <div className="container remix-app__header-content">
+          <Link to="/" title="Remix" className="remix-app__header-home-link">
+            <RemixLogo />
+          </Link>
+          <nav aria-label="Main navigation" className="remix-app__header-nav">
+            <ul>
+              <li>
+                <Link to="/">Home</Link>
+              </li>
+              <li>
+                <a href="https://remix.run/docs">Remix Docs</a>
+              </li>
+              <li>
+                <a href="https://github.com/remix-run/remix">GitHub</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </header>
+      <div className="remix-app__main">
+        <div className="container remix-app__main-content">{children}</div>
+      </div>
+      <footer className="remix-app__footer">
+        <div className="container remix-app__footer-content">
+          <p>&copy; You!</p>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+function RemixLogo() {
+  return (
+    <svg
+      viewBox="0 0 659 165"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      aria-labelledby="remix-run-logo-title"
+      role="img"
+      width="106"
+      height="30"
+      fill="currentColor"
+    >
+      <title id="remix-run-logo-title">Remix Logo</title>
+      <path d="M0 161V136H45.5416C53.1486 136 54.8003 141.638 54.8003 145V161H0Z M133.85 124.16C135.3 142.762 135.3 151.482 135.3 161H92.2283C92.2283 158.927 92.2653 157.03 92.3028 155.107C92.4195 149.128 92.5411 142.894 91.5717 130.304C90.2905 111.872 82.3473 107.776 67.7419 107.776H54.8021H0V74.24H69.7918C88.2407 74.24 97.4651 68.632 97.4651 53.784C97.4651 40.728 88.2407 32.816 69.7918 32.816H0V0H77.4788C119.245 0 140 19.712 140 51.2C140 74.752 125.395 90.112 105.665 92.672C122.32 96 132.057 105.472 133.85 124.16Z" />
+      <path d="M229.43 120.576C225.59 129.536 218.422 133.376 207.158 133.376C194.614 133.376 184.374 126.72 183.35 112.64H263.478V101.12C263.478 70.1437 243.254 44.0317 205.11 44.0317C169.526 44.0317 142.902 69.8877 142.902 105.984C142.902 142.336 169.014 164.352 205.622 164.352C235.83 164.352 256.822 149.76 262.71 123.648L229.43 120.576ZM183.862 92.6717C185.398 81.9197 191.286 73.7277 204.598 73.7277C216.886 73.7277 223.542 82.4317 224.054 92.6717H183.862Z" />
+      <path d="M385.256 66.5597C380.392 53.2477 369.896 44.0317 349.672 44.0317C332.52 44.0317 320.232 51.7117 314.088 64.2557V47.1037H272.616V161.28H314.088V105.216C314.088 88.0638 318.952 76.7997 332.52 76.7997C345.064 76.7997 348.136 84.9917 348.136 100.608V161.28H389.608V105.216C389.608 88.0638 394.216 76.7997 408.04 76.7997C420.584 76.7997 423.4 84.9917 423.4 100.608V161.28H464.872V89.5997C464.872 65.7917 455.656 44.0317 424.168 44.0317C404.968 44.0317 391.4 53.7597 385.256 66.5597Z" />
+      <path d="M478.436 47.104V161.28H519.908V47.104H478.436ZM478.18 36.352H520.164V0H478.18V36.352Z" />
+      <path d="M654.54 47.1035H611.788L592.332 74.2395L573.388 47.1035H527.564L568.78 103.168L523.98 161.28H566.732L589.516 130.304L612.3 161.28H658.124L613.068 101.376L654.54 47.1035Z" />
+    </svg>
+  );
+}

examples/remix/app/routes/demos/about.tsx

@@ -0,0 +1,44 @@
+import { Outlet } from "remix";
+import type { MetaFunction, LinksFunction } from "remix";
+
+import stylesUrl from "~/styles/demos/about.css";
+
+export let meta: MetaFunction = () => {
+  return {
+    title: "About Remix"
+  };
+};
+
+export let links: LinksFunction = () => {
+  return [{ rel: "stylesheet", href: stylesUrl }];
+};
+
+export default function Index() {
+  return (
+    <div className="about">
+      <div className="about__intro">
+        <h2>About Us</h2>
+        <p>
+          Ok, so this page isn't really <em>about us</em>, but we did want to
+          show you a few more things Remix can do.
+        </p>
+        <p>
+          Did you notice that things look a little different on this page? The
+          CSS that we import in the route file and include in its{" "}
+          <code>links</code> export is only included on this route and its
+          children.
+        </p>
+        <p>
+          Wait a sec...<em>its children</em>? To understand what we mean by
+          this,{" "}
+          <a href="https://remix.run/tutorial/4-nested-routes-params">
+            read all about nested routes in the docs
+          </a>
+          .
+        </p>
+        <hr />
+        <Outlet />
+      </div>
+    </div>
+  );
+}

examples/remix/app/routes/demos/about/index.tsx

@@ -0,0 +1,17 @@
+import { Link } from "remix";
+
+export default function AboutIndex() {
+  return (
+    <div>
+      <p>
+        You are looking at the index route for the <code>/about</code> URL
+        segment, but there are nested routes as well!
+      </p>
+      <p>
+        <strong>
+          <Link to="whoa">Check out one of them here.</Link>
+        </strong>
+      </p>
+    </div>
+  );
+}

examples/remix/app/routes/demos/about/whoa.tsx

@@ -0,0 +1,20 @@
+import { Link } from "remix";
+
+export default function AboutIndex() {
+  return (
+    <div>
+      <p>
+        Whoa, this is a nested route! We render the <code>/about</code> layout
+        route component, and its <code>Outlet</code> renders our route
+        component. 🤯
+      </p>
+      <p>
+        <strong>
+          <Link to="..">
+            Go back to the <code>/about</code> index.
+          </Link>
+        </strong>
+      </p>
+    </div>
+  );
+}

examples/remix/app/routes/demos/actions.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useRef } from "react";
+import type { ActionFunction } from "remix";
+import { Form, json, useActionData, redirect } from "remix";
+
+export function meta() {
+  return { title: "Actions Demo" };
+}
+
+// When your form sends a POST, the action is called on the server.
+// - https://remix.run/api/conventions#action
+// - https://remix.run/guides/data-updates
+export let action: ActionFunction = async ({ request }) => {
+  let formData = await request.formData();
+  let answer = formData.get("answer");
+
+  // Typical action workflows start with validating the form data that just came
+  // over the network. Clientside validation is fine, but you definitely need it
+  // server side.  If there's a problem, return the the data and the component
+  // can render it.
+  if (typeof answer !== "string") {
+    return json("Come on, at least try!", { status: 400 });
+  }
+
+  if (answer !== "egg") {
+    return json(`Sorry, ${answer} is not right.`, { status: 400 });
+  }
+
+  // Finally, if the data is valid, you'll typically write to a database or send or
+  // email or log the user in, etc. It's recommended to redirect after a
+  // successful action, even if it's to the same place so that non-JavaScript workflows
+  // from the browser doesn't repost the data if the user clicks back.
+  return redirect("/demos/correct");
+};
+
+export default function ActionsDemo() {
+  // https://remix.run/api/remix#useactiondata
+  let actionMessage = useActionData<string>();
+  let answerRef = useRef<HTMLInputElement>(null);
+
+  // This form works without JavaScript, but when we have JavaScript we can make
+  // the experience better by selecting the input on wrong answers! Go ahead, disable
+  // JavaScript in your browser and see what happens.
+  useEffect(() => {
+    if (actionMessage && answerRef.current) {
+      answerRef.current.select();
+    }
+  }, [actionMessage]);
+
+  return (
+    <div className="remix__page">
+      <main>
+        <h2>Actions!</h2>
+        <p>
+          This form submission will send a post request that we handle in our
+          `action` export. Any route can export an action to handle data
+          mutations.
+        </p>
+        <Form method="post" className="remix__form">
+          <h3>Post an Action</h3>
+          <p>
+            <i>What is more useful when it is broken?</i>
+          </p>
+          <label>
+            <div>Answer:</div>
+            <input ref={answerRef} name="answer" type="text" />
+          </label>
+          <div>
+            <button>Answer!</button>
+          </div>
+          {actionMessage ? (
+            <p>
+              <b>{actionMessage}</b>
+            </p>
+          ) : null}
+        </Form>
+      </main>
+
+      <aside>
+        <h3>Additional Resources</h3>
+        <ul>
+          <li>
+            Guide:{" "}
+            <a href="https://remix.run/guides/data-writes">Data Writes</a>
+          </li>
+          <li>
+            API:{" "}
+            <a href="https://remix.run/api/conventions#action">
+              Route Action Export
+            </a>
+          </li>
+          <li>
+            API:{" "}
+            <a href="https://remix.run/api/remix#useactiondata">
+              <code>useActionData</code>
+            </a>
+          </li>
+        </ul>
+      </aside>
+    </div>
+  );
+}

examples/remix/app/routes/demos/correct.tsx

@@ -0,0 +1,3 @@
+export default function NiceWork() {
+  return <h1>You got it right!</h1>;
+}

examples/remix/app/routes/demos/params.tsx

@@ -0,0 +1,43 @@
+import { useCatch, Link, json, useLoaderData, Outlet } from "remix";
+
+export function meta() {
+  return { title: "Boundaries Demo" };
+}
+
+export default function Boundaries() {
+  return (
+    <div className="remix__page">
+      <main>
+        <Outlet />
+      </main>
+
+      <aside>
+        <h2>Click these Links</h2>
+        <ul>
+          <li>
+            <Link to=".">Start over</Link>
+          </li>
+          <li>
+            <Link to="one">
+              Param: <i>one</i>
+            </Link>
+          </li>
+          <li>
+            <Link to="two">
+              Param: <i>two</i>
+            </Link>
+          </li>
+          <li>
+            <Link to="this-record-does-not-exist">This will be a 404</Link>
+          </li>
+          <li>
+            <Link to="shh-its-a-secret">And this will be 401 Unauthorized</Link>
+          </li>
+          <li>
+            <Link to="kaboom">This one will throw an error</Link>
+          </li>
+        </ul>
+      </aside>
+    </div>
+  );
+}

examples/remix/app/routes/demos/params/$id.tsx

@@ -0,0 +1,110 @@
+import { useCatch, Link, json, useLoaderData } from "remix";
+import type { LoaderFunction, MetaFunction } from "remix";
+
+// The `$` in route filenames becomes a pattern that's parsed from the URL and
+// passed to your loaders so you can look up data.
+// - https://remix.run/api/conventions#loader-params
+export let loader: LoaderFunction = async ({ params }) => {
+  // pretend like we're using params.id to look something up in the db
+
+  if (params.id === "this-record-does-not-exist") {
+    // If the record doesn't exist we can't render the route normally, so
+    // instead we throw a 404 reponse to stop running code here and show the
+    // user the catch boundary.
+    throw new Response("Not Found", { status: 404 });
+  }
+
+  // now pretend like the record exists but the user just isn't authorized to
+  // see it.
+  if (params.id === "shh-its-a-secret") {
+    // Again, we can't render the component if the user isn't authorized. You
+    // can even put data in the response that might help the user rectify the
+    // issue! Like emailing the webmaster for access to the page. (Oh, right,
+    // `json` is just a Response helper that makes it easier to send JSON
+    // responses).
+    throw json({ webmasterEmail: "hello@remix.run" }, { status: 401 });
+  }
+
+  // Sometimes your code just blows up and you never anticipated it. Remix will
+  // automatically catch it and send the UI to the error boundary.
+  if (params.id === "kaboom") {
+    lol();
+  }
+
+  // but otherwise the record was found, user has access, so we can do whatever
+  // else we needed to in the loader and return the data. (This is boring, we're
+  // just gonna return the params.id).
+  return { param: params.id };
+};
+
+export default function ParamDemo() {
+  let data = useLoaderData();
+  return (
+    <h1>
+      The param is <i style={{ color: "red" }}>{data.param}</i>
+    </h1>
+  );
+}
+
+// https://remix.run/api/conventions#catchboundary
+// https://remix.run/api/remix#usecatch
+// https://remix.run/api/guides/not-found
+export function CatchBoundary() {
+  let caught = useCatch();
+
+  let message: React.ReactNode;
+  switch (caught.status) {
+    case 401:
+      message = (
+        <p>
+          Looks like you tried to visit a page that you do not have access to.
+          Maybe ask the webmaster ({caught.data.webmasterEmail}) for access.
+        </p>
+      );
+    case 404:
+      message = (
+        <p>Looks like you tried to visit a page that does not exist.</p>
+      );
+    default:
+      message = (
+        <p>
+          There was a problem with your request!
+          <br />
+          {caught.status} {caught.statusText}
+        </p>
+      );
+  }
+
+  return (
+    <>
+      <h2>Oops!</h2>
+      <p>{message}</p>
+      <p>
+        (Isn't it cool that the user gets to stay in context and try a different
+        link in the parts of the UI that didn't blow up?)
+      </p>
+    </>
+  );
+}
+
+// https://remix.run/api/conventions#errorboundary
+// https://remix.run/api/guides/not-found
+export function ErrorBoundary({ error }: { error: Error }) {
+  console.error(error);
+  return (
+    <>
+      <h2>Error!</h2>
+      <p>{error.message}</p>
+      <p>
+        (Isn't it cool that the user gets to stay in context and try a different
+        link in the parts of the UI that didn't blow up?)
+      </p>
+    </>
+  );
+}
+
+export let meta: MetaFunction = ({ data }) => {
+  return {
+    title: data ? `Param: ${data.param}` : "Oops...",
+  };
+};

examples/remix/app/routes/demos/params/index.tsx

@@ -0,0 +1,40 @@
+import { useCatch, Link, json, useLoaderData, Outlet } from "remix";
+import type { LoaderFunction } from "remix";
+
+export default function Boundaries() {
+  return (
+    <>
+      <h2>Params</h2>
+      <p>
+        When you name a route segment with $ like{" "}
+        <code>routes/users/$userId.js</code>, the $ segment will be parsed from
+        the URL and sent to your loaders and actions by the same name.
+      </p>
+      <h2>Errors</h2>
+      <p>
+        When a route throws and error in it's action, loader, or component,
+        Remix automatically catches it, won't even try to render the component,
+        but it will render the route's ErrorBoundary instead. If the route
+        doesn't have one, it will bubble up to the routes above it until it hits
+        the root.
+      </p>
+      <p>So be as granular as you want with your error handling.</p>
+      <h2>Not Found</h2>
+      <p>
+        (and other{" "}
+        <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#client_error_responses">
+          client errors
+        </a>
+        )
+      </p>
+      <p>
+        Loaders and Actions can throw a <code>Response</code> instead of an
+        error and Remix will render the CatchBoundary instead of the component.
+        This is great when loading data from a database isn't found. As soon as
+        you know you can't render the component normally, throw a 404 response
+        and send your app into the catch boundary. Just like error boundaries,
+        catch boundaries bubble, too.
+      </p>
+    </>
+  );
+}

examples/remix/app/routes/index.tsx

@@ -0,0 +1,100 @@
+import type { MetaFunction, LoaderFunction } from "remix";
+import { useLoaderData, json, Link } from "remix";
+
+type IndexData = {
+  resources: Array<{ name: string; url: string }>;
+  demos: Array<{ name: string; to: string }>;
+};
+
+// Loaders provide data to components and are only ever called on the server, so
+// you can connect to a database or run any server side code you want right next
+// to the component that renders it.
+// https://remix.run/api/conventions#loader
+export let loader: LoaderFunction = () => {
+  let data: IndexData = {
+    resources: [
+      {
+        name: "Remix Docs",
+        url: "https://remix.run/docs"
+      },
+      {
+        name: "React Router Docs",
+        url: "https://reactrouter.com/docs"
+      },
+      {
+        name: "Remix Discord",
+        url: "https://discord.gg/VBePs6d"
+      }
+    ],
+    demos: [
+      {
+        to: "demos/actions",
+        name: "Actions"
+      },
+      {
+        to: "demos/about",
+        name: "Nested Routes, CSS loading/unloading"
+      },
+      {
+        to: "demos/params",
+        name: "URL Params and Error Boundaries"
+      }
+    ]
+  };
+
+  // https://remix.run/api/remix#json
+  return json(data);
+};
+
+// https://remix.run/api/conventions#meta
+export let meta: MetaFunction = () => {
+  return {
+    title: "Remix Starter",
+    description: "Welcome to remix!"
+  };
+};
+
+// https://remix.run/guides/routing#index-routes
+export default function Index() {
+  let data = useLoaderData<IndexData>();
+
+  return (
+    <div className="remix__page">
+      <main>
+        <h2>Welcome to Remix!</h2>
+        <p>We're stoked that you're here. 🥳</p>
+        <p>
+          Feel free to take a look around the code to see how Remix does things,
+          it might be a bit different than what you’re used to. When you're
+          ready to dive deeper, we've got plenty of resources to get you
+          up-and-running quickly.
+        </p>
+        <p>
+          Check out all the demos in this starter, and then just delete the{" "}
+          <code>app/routes/demos</code> and <code>app/styles/demos</code>{" "}
+          folders when you're ready to turn this into your next project.
+        </p>
+      </main>
+      <aside>
+        <h2>Demos In This App</h2>
+        <ul>
+          {data.demos.map(demo => (
+            <li key={demo.to} className="remix__page__resource">
+              <Link to={demo.to} prefetch="intent">
+                {demo.name}
+              </Link>
+            </li>
+          ))}
+        </ul>
+        <h2>Resources</h2>
+        <ul>
+          {data.resources.map(resource => (
+            <li key={resource.url} className="remix__page__resource">
+              <a href={resource.url}>{resource.name}</a>
+            </li>
+          ))}
+        </ul>
+      </aside>
+    </div>
+  );
+}

examples/remix/app/styles/dark.css

@@ -0,0 +1,7 @@
+:root {
+  --color-foreground: hsl(0, 0%, 100%);
+  --color-background: hsl(0, 0%, 7%);
+  --color-links: hsl(213, 100%, 73%);
+  --color-links-hover: hsl(213, 100%, 80%);
+  --color-border: hsl(0, 0%, 25%);
+}

examples/remix/app/styles/demos/about.css

@@ -0,0 +1,26 @@
+/*
+ * Whoa whoa whoa, wait a sec...why are we overriding global CSS selectors?
+ * Isn't that kind of scary? How do we know this won't have side effects?
+ *
+ * In Remix, CSS that is included in a route file will *only* show up on that
+ * route (and for nested routes, its children). When the user navigates away
+ * from that route the CSS files linked from those routes will be automatically
+ * unloaded, making your styles much easier to predict and control.
+ *
+ * Read more about styling routes in the docs:
+ * https://remix.run/guides/styling
+ */
+
+:root {
+  --color-foreground: hsl(0, 0%, 7%);
+  --color-background: hsl(56, 100%, 50%);
+  --color-links: hsl(345, 56%, 39%);
+  --color-links-hover: hsl(345, 51%, 49%);
+  --color-border: rgb(184, 173, 20);
+  --font-body: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    Liberation Mono, Courier New, monospace;
+}
+
+.about__intro {
+  max-width: 500px;
+}

examples/remix/app/styles/global.css

@@ -0,0 +1,216 @@
+/*
+ * You can just delete everything here or keep whatever you like, it's just a
+ * quick baseline!
+ */
+:root {
+  --color-foreground: hsl(0, 0%, 7%);
+  --color-background: hsl(0, 0%, 100%);
+  --color-links: hsl(213, 100%, 52%);
+  --color-links-hover: hsl(213, 100%, 43%);
+  --color-border: hsl(0, 0%, 82%);
+  --font-body: -apple-system, "Segoe UI", Helvetica Neue, Helvetica, Roboto,
+    Arial, sans-serif, system-ui, "Apple Color Emoji", "Segoe UI Emoji";
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+:-moz-focusring {
+  outline: auto;
+}
+
+:focus {
+  outline: var(--color-links) solid 2px;
+  outline-offset: 2px;
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+}
+
+body {
+  font-family: var(--font-body);
+  line-height: 1.5;
+}
+
+a {
+  color: var(--color-links);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--color-links-hover);
+  text-decoration: underline;
+}
+
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  background-color: var(--color-border);
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+input:where([type="text"]),
+input:where([type="search"]) {
+  display: block;
+  border: 1px solid var(--color-border);
+  width: 100%;
+  font: inherit;
+  line-height: 1;
+  height: calc(1ch + 1.5em);
+  padding-right: 0.5em;
+  padding-left: 0.5em;
+  background-color: hsl(0 0% 100% / 20%);
+  color: var(--color-foreground);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.container {
+  --gutter: 16px;
+  width: 1024px;
+  max-width: calc(100% - var(--gutter) * 2);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.remix-app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-height: calc(100vh - env(safe-area-inset-bottom));
+}
+
+.remix-app > * {
+  width: 100%;
+}
+
+.remix-app__header {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.remix-app__header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.remix-app__header-home-link {
+  width: 106px;
+  height: 30px;
+  color: var(--color-foreground);
+}
+
+.remix-app__header-nav ul {
+  list-style: none;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 1.5em;
+}
+
+.remix-app__header-nav li {
+  font-weight: bold;
+}
+
+.remix-app__main {
+  flex: 1 1 100%;
+}
+
+.remix-app__footer {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.remix-app__footer-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.remix__page {
+  --gap: 1rem;
+  --space: 2rem;
+  display: grid;
+  grid-auto-rows: min-content;
+  gap: var(--gap);
+  padding-top: var(--space);
+  padding-bottom: var(--space);
+}
+
+@media print, screen and (min-width: 640px) {
+  .remix__page {
+    --gap: 2rem;
+    grid-auto-rows: unset;
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .remix__page {
+    --gap: 4rem;
+  }
+}
+
+.remix__page > main > :first-child {
+  margin-top: 0;
+}
+
+.remix__page > main > :last-child {
+  margin-bottom: 0;
+}
+
+.remix__page > aside {
+  margin: 0;
+  padding: 1.5ch 2ch;
+  border: solid 1px var(--color-border);
+  border-radius: 0.5rem;
+}
+
+.remix__page > aside > :first-child {
+  margin-top: 0;
+}
+
+.remix__page > aside > :last-child {
+  margin-bottom: 0;
+}
+
+.remix__form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+}
+
+.remix__form > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}

examples/remix/package.json

@@ -0,0 +1,29 @@
+{
+  "private": true,
+  "name": "remix-app-template",
+  "description": "",
+  "license": "",
+  "scripts": {
+    "build": "remix build",
+    "dev": "remix dev",
+    "postinstall": "remix setup node"
+  },
+  "dependencies": {
+    "@remix-run/react": "^1.0.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "remix": "^1.0.6",
+    "@remix-run/serve": "^1.0.6",
+    "@remix-run/vercel": "^1.0.6"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "^1.0.6",
+    "@types/react": "^17.0.24",
+    "@types/react-dom": "^17.0.9",
+    "typescript": "^4.1.2"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "sideEffects": false
+}

examples/remix/remix.config.js

@@ -0,0 +1,9 @@
+/**
+ * @type {import('@remix-run/dev/config').AppConfig}
+ */
+module.exports = {
+  appDirectory: "app",
+  browserBuildDirectory: "public/build",
+  publicPath: "/build/",
+  serverBuildDirectory: "api/_build"
+};

examples/remix/remix.env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/dev" />
+/// <reference types="@remix-run/node/globals" />

examples/remix/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "target": "ES2019",
+    "strict": true,
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+
+    // Remix takes care of building everything in `remix build`.
+    "noEmit": true
+  }
+}

examples/remix/vercel.json

@@ -0,0 +1,7 @@
+{
+  "build": {
+    "env": {
+      "ENABLE_FILE_SYSTEM_API": "1"
+    }
+  }
+}

packages/build-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/build-utils",
-  "version": "2.12.3-canary.18",
+  "version": "2.12.3-canary.42",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.js",
@@ -30,7 +30,7 @@
     "@types/node-fetch": "^2.1.6",
     "@types/semver": "6.0.0",
     "@types/yazl": "^2.4.1",
-    "@vercel/frameworks": "0.5.1-canary.11",
+    "@vercel/frameworks": "0.5.1-canary.17",
     "@vercel/ncc": "0.24.0",
     "aggregate-error": "3.0.1",
     "async-retry": "1.2.3",

packages/build-utils/src/convert-runtime-to-plugin.ts

@@ -1,117 +1,296 @@
 import fs from 'fs-extra';
-import { join, dirname, relative } from 'path';
+import { join, parse, relative, dirname, basename, extname } from 'path';
 import glob from './fs/glob';
 import { normalizePath } from './fs/normalize-path';
-import { FILES_SYMBOL, getLambdaOptionsFromFunction, Lambda } from './lambda';
+import { FILES_SYMBOL, Lambda } from './lambda';
-import type FileBlob from './file-blob';
+import type { BuildOptions, Files } from './types';
-import type { BuilderFunctions, BuildOptions, Files } from './types';
+import { debug, getIgnoreFilter } from '.';
-import minimatch from 'minimatch';
+
+// `.output` was already created by the Build Command, so we have
+// to ensure its contents don't get bundled into the Lambda. Similarily,
+// we don't want to bundle anything from `.vercel` either. Lastly,
+// Builders/Runtimes didn't have `vercel.json` or `now.json`.
+const ignoredPaths = ['.output', '.vercel', 'vercel.json', 'now.json'];
+
+const shouldIgnorePath = (
+  file: string,
+  ignoreFilter: any,
+  ignoreFile: boolean
+) => {
+  const isNative = ignoredPaths.some(item => {
+    return file.startsWith(item);
+  });
+
+  if (!ignoreFile) {
+    return isNative;
+  }
+
+  return isNative || ignoreFilter(file);
+};
+
+const getSourceFiles = async (workPath: string, ignoreFilter: any) => {
+  const list = await glob('**', {
+    cwd: workPath,
+  });
+
+  // We're not passing this as an `ignore` filter to the `glob` function above,
+  // so that we can re-use exactly the same `getIgnoreFilter` method that the
+  // Build Step uses (literally the same code). Note that this exclusion only applies
+  // when deploying. Locally, another exclusion is needed, which is handled
+  // further below in the `convertRuntimeToPlugin` function.
+  for (const file in list) {
+    if (shouldIgnorePath(file, ignoreFilter, true)) {
+      delete list[file];
+    }
+  }
+
+  return list;
+};
 
 /**
  * Convert legacy Runtime to a Plugin.
  * @param buildRuntime - a legacy build() function from a Runtime
+ * @param packageName - the name of the package, for example `vercel-plugin-python`
  * @param ext - the file extension, for example `.py`
  */
 export function convertRuntimeToPlugin(
   buildRuntime: (options: BuildOptions) => Promise<{ output: Lambda }>,
+  packageName: string,
   ext: string
 ) {
+  // This `build()` signature should match `plugin.build()` signature in `vercel build`.
   return async function build({ workPath }: { workPath: string }) {
-    const opts = { cwd: workPath };
+    // We also don't want to provide any files to Runtimes that were ignored
-    const files = await glob('**', opts);
+    // through `.vercelignore` or `.nowignore`, because the Build Step does the same.
-    delete files['vercel.json']; // Builders/Runtimes didn't have vercel.json
+    const ignoreFilter = await getIgnoreFilter(workPath);
-    const entrypoints = await glob(`api/**/*${ext}`, opts);
+
+    // Retrieve the files that are currently available on the File System,
+    // before the Legacy Runtime has even started to build.
+    const sourceFilesPreBuild = await getSourceFiles(workPath, ignoreFilter);
+
+    // Instead of doing another `glob` to get all the matching source files,
+    // we'll filter the list of existing files down to only the ones
+    // that are matching the entrypoint pattern, so we're first creating
+    // a clean new list to begin.
+    const entrypoints = Object.assign({}, sourceFilesPreBuild);
+
+    const entrypointMatch = new RegExp(`^api/.*${ext}$`);
+
+    // Up next, we'll strip out the files from the list of entrypoints
+    // that aren't actually considered entrypoints.
+    for (const file in entrypoints) {
+      if (!entrypointMatch.test(file)) {
+        delete entrypoints[file];
+      }
+    }
+
     const pages: { [key: string]: any } = {};
-    const { functions = {} } = await readVercelConfig(workPath);
+    const pluginName = packageName.replace('vercel-plugin-', '');
-    const traceDir = join(workPath, '.output', 'runtime-traced-files');
+    const outputPath = join(workPath, '.output');
+
+    const traceDir = join(
+      outputPath,
+      `inputs`,
+      // Legacy Runtimes can only provide API Routes, so that's
+      // why we can use this prefix for all of them. Here, we have to
+      // make sure to not use a cryptic hash name, because people
+      // need to be able to easily inspect the output.
+      `api-routes-${pluginName}`
+    );
+
     await fs.ensureDir(traceDir);
 
-    for (const entrypoint of Object.keys(entrypoints)) {
+    const entryRoot = join(outputPath, 'server', 'pages');
-      const key =
-        Object.keys(functions).find(
-          src => src === entrypoint || minimatch(entrypoint, src)
-        ) || '';
-      const config = functions[key] || {};
 
+    for (const entrypoint of Object.keys(entrypoints)) {
       const { output } = await buildRuntime({
-        files,
+        files: sourceFilesPreBuild,
         entrypoint,
         workPath,
         config: {
           zeroConfig: true,
-          includeFiles: config.includeFiles,
+        },
-          excludeFiles: config.excludeFiles,
+        meta: {
+          avoidTopLevelInstall: true,
+          skipDownload: true,
         },
       });
 
-      pages[entrypoint] = {
+      // @ts-ignore This symbol is a private API
-        handler: output.handler,
+      const lambdaFiles: Files = output[FILES_SYMBOL];
+
+      // When deploying, the `files` that are passed to the Legacy Runtimes already
+      // have certain files that are ignored stripped, but locally, that list of
+      // files isn't used by the Legacy Runtimes, so we need to apply the filters
+      // to the outputs that they are returning instead.
+      for (const file in lambdaFiles) {
+        if (shouldIgnorePath(file, ignoreFilter, false)) {
+          delete lambdaFiles[file];
+        }
+      }
+
+      let handlerFileBase = output.handler;
+      let handlerFile = lambdaFiles[handlerFileBase];
+      let handlerHasImport = false;
+
+      const { handler } = output;
+      const handlerMethod = handler.split('.').pop();
+      const handlerFileName = handler.replace(`.${handlerMethod}`, '');
+
+      // For compiled languages, the launcher file for the Lambda generated
+      // by the Legacy Runtime matches the `handler` defined for it, but for
+      // interpreted languages, the `handler` consists of the launcher file name
+      // without an extension, plus the name of the method inside of that file
+      // that should be invoked, so we have to construct the file path explicitly.
+      if (!handlerFile) {
+        handlerFileBase = handlerFileName + ext;
+        handlerFile = lambdaFiles[handlerFileBase];
+        handlerHasImport = true;
+      }
+
+      if (!handlerFile || !handlerFile.fsPath) {
+        throw new Error(
+          `Could not find a handler file. Please ensure that \`files\` for the returned \`Lambda\` contains an \`FileFsRef\` named "${handlerFileBase}" with a valid \`fsPath\`.`
+        );
+      }
+
+      const handlerExtName = extname(handlerFile.fsPath);
+
+      const entryBase = basename(entrypoint).replace(ext, handlerExtName);
+      const entryPath = join(dirname(entrypoint), entryBase);
+      const entry = join(entryRoot, entryPath);
+
+      // Create the parent directory of the API Route that will be created
+      // for the current entrypoint inside of `.output/server/pages/api`.
+      await fs.ensureDir(dirname(entry));
+
+      // For compiled languages, the launcher file will be binary and therefore
+      // won't try to import a user-provided request handler (instead, it will
+      // contain it). But for interpreted languages, the launcher might try to
+      // load a user-provided request handler from the source file instead of bundling
+      // it, so we have to adjust the import statement inside the launcher to point
+      // to the respective source file. Previously, Legacy Runtimes simply expected
+      // the user-provided request-handler to be copied right next to the launcher,
+      // but with the new File System API, files won't be moved around unnecessarily.
+      if (handlerHasImport) {
+        const { fsPath } = handlerFile;
+        const encoding = 'utf-8';
+
+        // This is the true directory of the user-provided request handler in the
+        // source files, so that's what we will use as an import path in the launcher.
+        const locationPrefix = relative(entry, outputPath);
+
+        let handlerContent = await fs.readFile(fsPath, encoding);
+
+        const importPaths = [
+          // This is the full entrypoint path, like `./api/test.py`. In our tests
+          // Python didn't support importing from a parent directory without using different
+          // code in the launcher that registers it as a location for modules and then changing
+          // the importing syntax, but continuing to import it like before seems to work. If
+          // other languages need this, we should consider excluding Python explicitly.
+          // `./${entrypoint}`,
+
+          // This is the entrypoint path without extension, like `api/test`
+          entrypoint.slice(0, -ext.length),
+        ];
+
+        // Generate a list of regular expressions that we can use for
+        // finding matches, but only allow matches if the import path is
+        // wrapped inside single (') or double quotes (").
+        const patterns = importPaths.map(path => {
+          // eslint-disable-next-line no-useless-escape
+          return new RegExp(`('|")(${path.replace(/\./g, '\\.')})('|")`, 'g');
+        });
+
+        let replacedMatch = null;
+
+        for (const pattern of patterns) {
+          const newContent = handlerContent.replace(
+            pattern,
+            (_, p1, p2, p3) => {
+              return `${p1}${join(locationPrefix, p2)}${p3}`;
+            }
+          );
+
+          if (newContent !== handlerContent) {
+            debug(
+              `Replaced "${pattern}" inside "${entry}" to ensure correct import of user-provided request handler`
+            );
+
+            handlerContent = newContent;
+            replacedMatch = true;
+          }
+        }
+
+        if (!replacedMatch) {
+          new Error(
+            `No replacable matches for "${importPaths[0]}" or "${importPaths[1]}" found in "${fsPath}"`
+          );
+        }
+
+        await fs.writeFile(entry, handlerContent, encoding);
+      } else {
+        await fs.copy(handlerFile.fsPath, entry);
+      }
+
+      // Legacy Runtimes based on interpreted languages will create a new launcher file
+      // for every entrypoint, but they will create each one inside `workPath`, which means that
+      // the launcher for one entrypoint will overwrite the launcher provided for the previous
+      // entrypoint. That's why, above, we copy the file contents into the new destination (and
+      // optionally transform them along the way), instead of linking. We then also want to remove
+      // the copy origin right here, so that the `workPath` doesn't contain a useless launcher file
+      // once the build has finished running.
+      await fs.remove(handlerFile.fsPath);
+      debug(`Removed temporary file "${handlerFile.fsPath}"`);
+
+      const nft = `${entry}.nft.json`;
+
+      const json = JSON.stringify({
+        version: 2,
+        files: Object.keys(lambdaFiles)
+          .map(file => {
+            const { fsPath } = lambdaFiles[file];
+
+            if (!fsPath) {
+              throw new Error(
+                `File "${file}" is missing valid \`fsPath\` property`
+              );
+            }
+
+            // The handler was already moved into position above.
+            if (file === handlerFileBase) {
+              return;
+            }
+
+            return normalizePath(relative(dirname(nft), fsPath));
+          })
+          .filter(Boolean),
+      });
+
+      await fs.writeFile(nft, json);
+
+      // Add an entry that will later on be added to the `functions-manifest.json`
+      // file that is placed inside of the `.output` directory.
+      pages[normalizePath(entryPath)] = {
+        // Because the underlying file used as a handler was placed
+        // inside `.output/server/pages/api`, it no longer has the name it originally
+        // had and is now named after the API Route that it's responsible for,
+        // so we have to adjust the name of the Lambda handler accordingly.
+        handler: handler.replace(handlerFileName, parse(entry).name),
         runtime: output.runtime,
         memory: output.memory,
         maxDuration: output.maxDuration,
         environment: output.environment,
         allowQuery: output.allowQuery,
-        regions: output.regions,
       };
-
-      // @ts-ignore This symbol is a private API
-      const lambdaFiles: Files = output[FILES_SYMBOL];
-
-      const entry = join(workPath, '.output', 'server', 'pages', entrypoint);
-      await fs.ensureDir(dirname(entry));
-      await linkOrCopy(files[entrypoint].fsPath, entry);
-
-      const tracedFiles: {
-        absolutePath: string;
-        relativePath: string;
-      }[] = [];
-
-      Object.entries(lambdaFiles).forEach(async ([relPath, file]) => {
-        const newPath = join(traceDir, relPath);
-        tracedFiles.push({ absolutePath: newPath, relativePath: relPath });
-        if (file.fsPath) {
-          await linkOrCopy(file.fsPath, newPath);
-        } else if (file.type === 'FileBlob') {
-          const { data, mode } = file as FileBlob;
-          await fs.writeFile(newPath, data, { mode });
-        } else {
-          throw new Error(`Unknown file type: ${file.type}`);
-        }
-      });
-
-      const nft = join(
-        workPath,
-        '.output',
-        'server',
-        'pages',
-        `${entrypoint}.nft.json`
-      );
-      const json = JSON.stringify({
-        version: 1,
-        files: tracedFiles.map(f => ({
-          input: normalizePath(relative(nft, f.absolutePath)),
-          output: normalizePath(f.relativePath),
-        })),
-      });
-
-      await fs.ensureDir(dirname(nft));
-      await fs.writeFile(nft, json);
     }
 
+    // Add any Serverless Functions that were exposed by the Legacy Runtime
+    // to the `functions-manifest.json` file provided in `.output`.
     await updateFunctionsManifest({ workPath, pages });
   };
 }
 
-async function linkOrCopy(existingPath: string, newPath: string) {
-  try {
-    await fs.createLink(existingPath, newPath);
-  } catch (err: any) {
-    if (err.code !== 'EEXIST') {
-      await fs.copyFile(existingPath, newPath);
-    }
-  }
-}
-
 async function readJson(filePath: string): Promise<{ [key: string]: any }> {
   try {
     const str = await fs.readFile(filePath, 'utf8');
@@ -124,17 +303,9 @@ async function readJson(filePath: string): Promise<{ [key: string]: any }> {
   }
 }
 
-async function readVercelConfig(
-  workPath: string
-): Promise<{ functions?: BuilderFunctions; regions?: string[] }> {
-  const vercelJsonPath = join(workPath, 'vercel.json');
-  return readJson(vercelJsonPath);
-}
-
 /**
  * If `.output/functions-manifest.json` exists, append to the pages
- * property. Otherwise write a new file. This will also read `vercel.json`
+ * property. Otherwise write a new file.
- * and apply relevant `functions` property config.
  */
 export async function updateFunctionsManifest({
   workPath,
@@ -148,24 +319,94 @@ export async function updateFunctionsManifest({
     '.output',
     'functions-manifest.json'
   );
-  const vercelConfig = await readVercelConfig(workPath);
   const functionsManifest = await readJson(functionsManifestPath);
 
-  if (!functionsManifest.version) functionsManifest.version = 1;
+  if (!functionsManifest.version) functionsManifest.version = 2;
   if (!functionsManifest.pages) functionsManifest.pages = {};
 
   for (const [pageKey, pageConfig] of Object.entries(pages)) {
-    const fnConfig = await getLambdaOptionsFromFunction({
+    functionsManifest.pages[pageKey] = { ...pageConfig };
-      sourceFile: pageKey,
-      config: vercelConfig,
-    });
-    functionsManifest.pages[pageKey] = {
-      ...pageConfig,
-      memory: fnConfig.memory || pageConfig.memory,
-      maxDuration: fnConfig.maxDuration || pageConfig.maxDuration,
-      regions: vercelConfig.regions || pageConfig.regions,
-    };
   }
 
   await fs.writeFile(functionsManifestPath, JSON.stringify(functionsManifest));
 }
+
+/**
+ * Append routes to the `routes-manifest.json` file.
+ * If the file does not exist, it will be created.
+ */
+export async function updateRoutesManifest({
+  workPath,
+  redirects,
+  rewrites,
+  headers,
+  dynamicRoutes,
+  staticRoutes,
+}: {
+  workPath: string;
+  redirects?: {
+    source: string;
+    destination: string;
+    statusCode: number;
+    regex: string;
+  }[];
+  rewrites?: {
+    source: string;
+    destination: string;
+    regex: string;
+  }[];
+  headers?: {
+    source: string;
+    headers: {
+      key: string;
+      value: string;
+    }[];
+    regex: string;
+  }[];
+  dynamicRoutes?: {
+    page: string;
+    regex: string;
+    namedRegex?: string;
+    routeKeys?: { [named: string]: string };
+  }[];
+  staticRoutes?: {
+    page: string;
+    regex: string;
+    namedRegex?: string;
+    routeKeys?: { [named: string]: string };
+  }[];
+}) {
+  const routesManifestPath = join(workPath, '.output', 'routes-manifest.json');
+
+  const routesManifest = await readJson(routesManifestPath);
+
+  if (!routesManifest.version) routesManifest.version = 3;
+  if (routesManifest.pages404 === undefined) routesManifest.pages404 = true;
+
+  if (redirects) {
+    if (!routesManifest.redirects) routesManifest.redirects = [];
+    routesManifest.redirects.push(...redirects);
+  }
+
+  if (rewrites) {
+    if (!routesManifest.rewrites) routesManifest.rewrites = [];
+    routesManifest.rewrites.push(...rewrites);
+  }
+
+  if (headers) {
+    if (!routesManifest.headers) routesManifest.headers = [];
+    routesManifest.headers.push(...headers);
+  }
+
+  if (dynamicRoutes) {
+    if (!routesManifest.dynamicRoutes) routesManifest.dynamicRoutes = [];
+    routesManifest.dynamicRoutes.push(...dynamicRoutes);
+  }
+
+  if (staticRoutes) {
+    if (!routesManifest.staticRoutes) routesManifest.staticRoutes = [];
+    routesManifest.staticRoutes.push(...staticRoutes);
+  }
+
+  await fs.writeFile(routesManifestPath, JSON.stringify(routesManifest));
+}

packages/build-utils/src/detect-builders.ts

@@ -96,6 +96,7 @@ export async function detectBuilders(
   redirectRoutes: Route[] | null;
   rewriteRoutes: Route[] | null;
   errorRoutes: Route[] | null;
+  limitedRoutes: LimitedRoutes | null;
 }> {
   const errors: ErrorResponse[] = [];
   const warnings: ErrorResponse[] = [];
@@ -114,6 +115,7 @@ export async function detectBuilders(
       redirectRoutes: null,
       rewriteRoutes: null,
       errorRoutes: null,
+      limitedRoutes: null,
     };
   }
 
@@ -179,6 +181,7 @@ export async function detectBuilders(
           redirectRoutes: null,
           rewriteRoutes: null,
           errorRoutes: null,
+          limitedRoutes: null,
         };
       }
 
@@ -257,6 +260,7 @@ export async function detectBuilders(
         defaultRoutes: null,
         rewriteRoutes: null,
         errorRoutes: null,
+        limitedRoutes: null,
       };
     }
 
@@ -299,6 +303,7 @@ export async function detectBuilders(
       defaultRoutes: null,
       rewriteRoutes: null,
       errorRoutes: null,
+      limitedRoutes: null,
     };
   }
 
@@ -326,6 +331,7 @@ export async function detectBuilders(
   }
 
   const routesResult = getRouteResult(
+    pkg,
     apiRoutes,
     dynamicRoutes,
     usedOutputDirectory,
@@ -342,6 +348,7 @@ export async function detectBuilders(
     defaultRoutes: routesResult.defaultRoutes,
     rewriteRoutes: routesResult.rewriteRoutes,
     errorRoutes: routesResult.errorRoutes,
+    limitedRoutes: routesResult.limitedRoutes,
   };
 }
 
@@ -932,7 +939,14 @@ function createRouteFromPath(
   return { route, isDynamic };
 }
 
+interface LimitedRoutes {
+  defaultRoutes: Route[];
+  redirectRoutes: Route[];
+  rewriteRoutes: Route[];
+}
+
 function getRouteResult(
+  pkg: PackageJson | undefined | null,
   apiRoutes: Source[],
   dynamicRoutes: Source[],
   outputDirectory: string,
@@ -944,11 +958,18 @@ function getRouteResult(
   redirectRoutes: Route[];
   rewriteRoutes: Route[];
   errorRoutes: Route[];
+  limitedRoutes: LimitedRoutes;
 } {
+  const deps = Object.assign({}, pkg?.dependencies, pkg?.devDependencies);
   const defaultRoutes: Route[] = [];
   const redirectRoutes: Route[] = [];
   const rewriteRoutes: Route[] = [];
   const errorRoutes: Route[] = [];
+  const limitedRoutes: LimitedRoutes = {
+    defaultRoutes: [],
+    redirectRoutes: [],
+    rewriteRoutes: [],
+  };
   const framework = frontendBuilder?.config?.framework || '';
   const isNextjs =
     framework === 'nextjs' || isOfficialRuntime('next', frontendBuilder?.use);
@@ -956,14 +977,43 @@ function getRouteResult(
 
   if (apiRoutes && apiRoutes.length > 0) {
     if (options.featHandleMiss) {
+      // Exclude extension names if the corresponding plugin is not found in package.json
+      // detectBuilders({ignoreRoutesForBuilders: ['@vercel/python']})
+      // return a copy of routes.
+      // We should exclud errorRoutes and
       const extSet = detectApiExtensions(apiBuilders);
+      const withTag = options.tag ? `@${options.tag}` : '';
+      const extSetLimited = detectApiExtensions(
+        apiBuilders.filter(b => {
+          if (
+            b.use === `@vercel/python${withTag}` &&
+            !('vercel-plugin-python' in deps)
+          ) {
+            return false;
+          }
+          if (
+            b.use === `@vercel/go${withTag}` &&
+            !('vercel-plugin-go' in deps)
+          ) {
+            return false;
+          }
+          if (
+            b.use === `@vercel/ruby${withTag}` &&
+            !('vercel-plugin-ruby' in deps)
+          ) {
+            return false;
+          }
+          return true;
+        })
+      );
 
       if (extSet.size > 0) {
-        const exts = Array.from(extSet)
+        const extGroup = `(?:\\.(?:${Array.from(extSet)
           .map(ext => ext.slice(1))
-          .join('|');
+          .join('|')}))`;
-
+        const extGroupLimited = `(?:\\.(?:${Array.from(extSetLimited)
-        const extGroup = `(?:\\.(?:${exts}))`;
+          .map(ext => ext.slice(1))
+          .join('|')}))`;
 
         if (options.cleanUrls) {
           redirectRoutes.push({
@@ -979,6 +1029,20 @@ function getRouteResult(
             },
             status: 308,
           });
+
+          limitedRoutes.redirectRoutes.push({
+            src: `^/(api(?:.+)?)/index${extGroupLimited}?/?$`,
+            headers: { Location: options.trailingSlash ? '/$1/' : '/$1' },
+            status: 308,
+          });
+
+          limitedRoutes.redirectRoutes.push({
+            src: `^/api/(.+)${extGroupLimited}/?$`,
+            headers: {
+              Location: options.trailingSlash ? '/api/$1/' : '/api/$1',
+            },
+            status: 308,
+          });
         } else {
           defaultRoutes.push({ handle: 'miss' });
           defaultRoutes.push({
@@ -986,10 +1050,18 @@ function getRouteResult(
             dest: '/api/$1',
             check: true,
           });
+
+          limitedRoutes.defaultRoutes.push({ handle: 'miss' });
+          limitedRoutes.defaultRoutes.push({
+            src: `^/api/(.+)${extGroupLimited}$`,
+            dest: '/api/$1',
+            check: true,
+          });
         }
       }
 
       rewriteRoutes.push(...dynamicRoutes);
+      limitedRoutes.rewriteRoutes.push(...dynamicRoutes);
 
       if (typeof ignoreRuntimes === 'undefined') {
         // This route is only necessary to hide the directory listing
@@ -1040,6 +1112,7 @@ function getRouteResult(
     redirectRoutes,
     rewriteRoutes,
     errorRoutes,
+    limitedRoutes,
   };
 }
 

packages/build-utils/src/get-ignore-filter.ts

@@ -0,0 +1,84 @@
+import path from 'path';
+import fs from 'fs-extra';
+import ignore from 'ignore';
+
+interface CodedError extends Error {
+  code: string;
+}
+
+function isCodedError(error: unknown): error is CodedError {
+  return (
+    error !== null &&
+    error !== undefined &&
+    (error as CodedError).code !== undefined
+  );
+}
+
+function clearRelative(s: string) {
+  return s.replace(/(\n|^)\.\//g, '$1');
+}
+
+export default async function (
+  downloadPath: string,
+  rootDirectory?: string | undefined
+) {
+  const readFile = async (p: string) => {
+    try {
+      return await fs.readFile(p, 'utf8');
+    } catch (error: any) {
+      if (
+        error.code === 'ENOENT' ||
+        (error instanceof Error && error.message.includes('ENOENT'))
+      ) {
+        return undefined;
+      }
+
+      throw error;
+    }
+  };
+
+  const vercelIgnorePath = path.join(
+    downloadPath,
+    rootDirectory || '',
+    '.vercelignore'
+  );
+  const nowIgnorePath = path.join(
+    downloadPath,
+    rootDirectory || '',
+    '.nowignore'
+  );
+  const ignoreContents = [];
+
+  try {
+    ignoreContents.push(
+      ...(
+        await Promise.all([readFile(vercelIgnorePath), readFile(nowIgnorePath)])
+      ).filter(Boolean)
+    );
+  } catch (error) {
+    if (isCodedError(error) && error.code === 'ENOTDIR') {
+      console.log(`Warning: Cannot read ignore file from ${vercelIgnorePath}`);
+    } else {
+      throw error;
+    }
+  }
+
+  if (ignoreContents.length === 2) {
+    throw new Error(
+      'Cannot use both a `.vercelignore` and `.nowignore` file. Please delete the `.nowignore` file.'
+    );
+  }
+
+  if (ignoreContents.length === 0) {
+    return () => false;
+  }
+
+  const ignoreFilter: any = ignore().add(clearRelative(ignoreContents[0]!));
+
+  return function (p: string) {
+    // we should not ignore now.json and vercel.json if it asked to.
+    // we depend on these files for building the app with sourceless
+    if (p === 'now.json' || p === 'vercel.json') return false;
+    return ignoreFilter.test(p).ignored;
+  };
+}

packages/build-utils/src/index.ts

@@ -1,3 +1,4 @@
+import { createHash } from 'crypto';
 import FileBlob from './file-blob';
 import FileFsRef from './file-fs-ref';
 import FileRef from './file-ref';
@@ -33,6 +34,7 @@ import { NowBuildError } from './errors';
 import streamToBuffer from './fs/stream-to-buffer';
 import shouldServe from './should-serve';
 import debug from './debug';
+import getIgnoreFilter from './get-ignore-filter';
 
 export {
   FileBlob,
@@ -70,6 +72,7 @@ export {
   isSymbolicLink,
   getLambdaOptionsFromFunction,
   scanParentDirs,
+  getIgnoreFilter,
 };
 
 export {
@@ -85,6 +88,7 @@ export { normalizePath } from './fs/normalize-path';
 export {
   convertRuntimeToPlugin,
   updateFunctionsManifest,
+  updateRoutesManifest,
 } from './convert-runtime-to-plugin';
 
 export * from './schemas';
@@ -131,3 +135,11 @@ export const getPlatformEnv = (name: string): string | undefined => {
   }
   return n;
 };
+
+/**
+ * Helper function for generating file or directories names in `.output/inputs`
+ * for dependencies of files provided to the File System API.
+ */
+export const getInputHash = (source: Buffer | string): string => {
+  return createHash('sha1').update(source).digest('hex');
+};

packages/build-utils/src/types.ts

@@ -58,6 +58,7 @@ export interface Meta {
   filesRemoved?: string[];
   env?: Env;
   buildEnv?: Env;
+  avoidTopLevelInstall?: boolean;
 }
 
 export interface AnalyzeOptions {

packages/build-utils/test/convert-runtime/invalid-functions/api/users.rb

@@ -0,0 +1 @@
+# users.rb

packages/build-utils/test/convert-runtime/invalid-functions/vercel.json

@@ -1,9 +1,9 @@
 {
   "functions": {
-    "api/users/post.py": {
+    "api/users.rb": {
       "memory": 3008
     },
-    "api/not-matching-anything.py": {
+    "api/doesnt-exist.rb": {
       "memory": 768
     }
   }

packages/build-utils/test/convert-runtime/python-api/api/db/[id].py

@@ -0,0 +1 @@
+# [id].py

packages/build-utils/test/convert-runtime/python-api/api/project/[aid]/[bid]/index.py

@@ -0,0 +1 @@
+# project/[aid]/[bid]/index.py

packages/build-utils/test/convert-runtime/python-api/vercel.json

@@ -0,0 +1,7 @@
+{
+  "functions": {
+    "api/users/post.py": {
+      "memory": 3008
+    }
+  }
+}

packages/build-utils/test/unit.builds-and-routes-detector.test.ts

@@ -2385,13 +2385,10 @@ it('Test `detectRoutes` with `featHandleMiss=true`', async () => {
   {
     const files = ['api/user.go', 'api/team.js', 'api/package.json'];
 
-    const { defaultRoutes, rewriteRoutes, errorRoutes } = await detectBuilders(
+    const { defaultRoutes, rewriteRoutes, errorRoutes, limitedRoutes } =
-      files,
+      await detectBuilders(files, null, {
-      null,
-      {
         featHandleMiss,
-      }
+      });
-    );
     expect(defaultRoutes).toStrictEqual([
       { handle: 'miss' },
       {
@@ -2414,6 +2411,22 @@ it('Test `detectRoutes` with `featHandleMiss=true`', async () => {
       },
     ]);
 
+    // Limited routes should have js but not go since the go plugin is not installed
+    expect(limitedRoutes).toStrictEqual({
+      redirectRoutes: [],
+      rewriteRoutes: [],
+      defaultRoutes: [
+        {
+          handle: 'miss',
+        },
+        {
+          src: '^/api/(.+)(?:\\.(?:js))$',
+          dest: '/api/$1',
+          check: true,
+        },
+      ],
+    });
+
     const pattern = new RegExp(errorRoutes![0].src!);
 
     [
@@ -2816,8 +2829,13 @@ it('Test `detectRoutes` with `featHandleMiss=true`, `cleanUrls=true`', async ()
   {
     const files = ['api/user.go', 'api/team.js', 'api/package.json'];
 
-    const { defaultRoutes, redirectRoutes, rewriteRoutes, errorRoutes } =
+    const {
-      await detectBuilders(files, null, options);
+      defaultRoutes,
+      redirectRoutes,
+      rewriteRoutes,
+      errorRoutes,
+      limitedRoutes,
+    } = await detectBuilders(files, null, options);
     testHeaders(redirectRoutes);
     expect(defaultRoutes).toStrictEqual([]);
     expect(rewriteRoutes).toStrictEqual([
@@ -2834,6 +2852,28 @@ it('Test `detectRoutes` with `featHandleMiss=true`, `cleanUrls=true`', async ()
       },
     ]);
 
+    // Limited routes should have js but not go since the go plugin is not installed
+    expect(limitedRoutes).toStrictEqual({
+      redirectRoutes: [
+        {
+          src: '^/(api(?:.+)?)/index(?:\\.(?:js))?/?$',
+          headers: {
+            Location: '/$1',
+          },
+          status: 308,
+        },
+        {
+          src: '^/api/(.+)(?:\\.(?:js))/?$',
+          headers: {
+            Location: '/api/$1',
+          },
+          status: 308,
+        },
+      ],
+      rewriteRoutes: [],
+      defaultRoutes: [],
+    });
+
     // expected redirect should match inputs
     const getLocation = createReplaceLocation(redirectRoutes);
 
@@ -3077,7 +3117,7 @@ it('Test `detectRoutes` with `featHandleMiss=true`, `cleanUrls=true`, `trailingS
   {
     const files = ['api/user.go', 'api/team.js', 'api/package.json'];
 
-    const { defaultRoutes, redirectRoutes, rewriteRoutes } =
+    const { defaultRoutes, redirectRoutes, rewriteRoutes, limitedRoutes } =
       await detectBuilders(files, null, options);
     testHeaders(redirectRoutes);
     expect(defaultRoutes).toStrictEqual([]);
@@ -3088,6 +3128,28 @@ it('Test `detectRoutes` with `featHandleMiss=true`, `cleanUrls=true`, `trailingS
       },
     ]);
 
+    // Limited routes should have js but not go since the go plugin is not installed
+    expect(limitedRoutes).toStrictEqual({
+      redirectRoutes: [
+        {
+          src: '^/(api(?:.+)?)/index(?:\\.(?:js))?/?$',
+          headers: {
+            Location: '/$1/',
+          },
+          status: 308,
+        },
+        {
+          src: '^/api/(.+)(?:\\.(?:js))/?$',
+          headers: {
+            Location: '/api/$1/',
+          },
+          status: 308,
+        },
+      ],
+      rewriteRoutes: [],
+      defaultRoutes: [],
+    });
+
     // expected redirect should match inputs
     const getLocation = createReplaceLocation(redirectRoutes);
 

packages/build-utils/test/unit.convert-runtime-to-plugin.test.ts

@@ -1,6 +1,6 @@
 import { join } from 'path';
 import fs from 'fs-extra';
-import { BuildOptions, createLambda } from '../src';
+import { BuildOptions, createLambda, FileFsRef } from '../src';
 import { convertRuntimeToPlugin } from '../src/convert-runtime-to-plugin';
 
 async function fsToJson(dir: string, output: Record<string, any> = {}) {
@@ -18,24 +18,43 @@ async function fsToJson(dir: string, output: Record<string, any> = {}) {
   return output;
 }
 
-const workPath = join(__dirname, 'walk', 'python-api');
+const invalidFuncWorkpath = join(
+  __dirname,
+  'convert-runtime',
+  'invalid-functions'
+);
+const pythonApiWorkpath = join(__dirname, 'convert-runtime', 'python-api');
 
 describe('convert-runtime-to-plugin', () => {
   afterEach(async () => {
-    await fs.remove(join(workPath, '.output'));
+    await fs.remove(join(invalidFuncWorkpath, '.output'));
+    await fs.remove(join(pythonApiWorkpath, '.output'));
   });
 
   it('should create correct fileystem for python', async () => {
+    const ext = '.py';
+    const workPath = pythonApiWorkpath;
+    const handlerName = 'vc__handler__python';
+    const handlerFileName = handlerName + ext;
+
     const lambdaOptions = {
-      handler: 'index.handler',
+      handler: `${handlerName}.vc_handler`,
       runtime: 'python3.9',
       memory: 512,
       maxDuration: 5,
       environment: {},
-      regions: ['sfo1'],
     };
 
     const buildRuntime = async (opts: BuildOptions) => {
+      const handlerPath = join(workPath, handlerFileName);
+
+      // This is the usual time at which a Legacy Runtime writes its Lambda launcher.
+      await fs.writeFile(handlerPath, '# handler');
+
+      opts.files[handlerFileName] = new FileFsRef({
+        fsPath: handlerPath,
+      });
+
       const lambda = await createLambda({
         files: opts.files,
         ...lambdaOptions,
@@ -43,25 +62,24 @@ describe('convert-runtime-to-plugin', () => {
       return { output: lambda };
     };
 
-    const lambdaFiles = await fsToJson(workPath);
+    const packageName = 'vercel-plugin-python';
-    delete lambdaFiles['vercel.json'];
+    const build = await convertRuntimeToPlugin(buildRuntime, packageName, ext);
-    const build = await convertRuntimeToPlugin(buildRuntime, '.py');
 
     await build({ workPath });
 
     const output = await fsToJson(join(workPath, '.output'));
+
     expect(output).toMatchObject({
       'functions-manifest.json': expect.stringContaining('{'),
-      'runtime-traced-files': lambdaFiles,
       server: {
         pages: {
           api: {
-            'index.py': expect.stringContaining('index'),
+            'index.py': expect.stringContaining('handler'),
             'index.py.nft.json': expect.stringContaining('{'),
             users: {
-              'get.py': expect.stringContaining('get'),
+              'get.py': expect.stringContaining('handler'),
               'get.py.nft.json': expect.stringContaining('{'),
-              'post.py': expect.stringContaining('post'),
+              'post.py': expect.stringContaining('handler'),
               'post.py.nft.json': expect.stringContaining('{'),
             },
           },
@@ -71,42 +89,30 @@ describe('convert-runtime-to-plugin', () => {
 
     const funcManifest = JSON.parse(output['functions-manifest.json']);
     expect(funcManifest).toMatchObject({
-      version: 1,
+      version: 2,
       pages: {
-        'api/index.py': lambdaOptions,
+        'api/index.py': { ...lambdaOptions, handler: 'index.vc_handler' },
-        'api/users/get.py': lambdaOptions,
+        'api/users/get.py': { ...lambdaOptions, handler: 'get.vc_handler' },
-        'api/users/post.py': { ...lambdaOptions, memory: 3008 },
+        'api/users/post.py': {
+          ...lambdaOptions,
+          handler: 'post.vc_handler',
+          memory: 512,
+        },
       },
     });
 
     const indexJson = JSON.parse(output.server.pages.api['index.py.nft.json']);
     expect(indexJson).toMatchObject({
-      version: 1,
+      version: 2,
       files: [
-        {
+        '../../../../api/db/[id].py',
-          input: '../../../../runtime-traced-files/api/index.py',
+        '../../../../api/index.py',
-          output: 'api/index.py',
+        '../../../../api/project/[aid]/[bid]/index.py',
-        },
+        '../../../../api/users/get.py',
-        {
+        '../../../../api/users/post.py',
-          input: '../../../../runtime-traced-files/api/users/get.py',
+        '../../../../file.txt',
-          output: 'api/users/get.py',
+        '../../../../util/date.py',
-        },
+        '../../../../util/math.py',
-        {
-          input: '../../../../runtime-traced-files/api/users/post.py',
-          output: 'api/users/post.py',
-        },
-        {
-          input: '../../../../runtime-traced-files/file.txt',
-          output: 'file.txt',
-        },
-        {
-          input: '../../../../runtime-traced-files/util/date.py',
-          output: 'util/date.py',
-        },
-        {
-          input: '../../../../runtime-traced-files/util/math.py',
-          output: 'util/math.py',
-        },
       ],
     });
 
@@ -114,32 +120,16 @@ describe('convert-runtime-to-plugin', () => {
       output.server.pages.api.users['get.py.nft.json']
     );
     expect(getJson).toMatchObject({
-      version: 1,
+      version: 2,
       files: [
-        {
+        '../../../../../api/db/[id].py',
-          input: '../../../../../runtime-traced-files/api/index.py',
+        '../../../../../api/index.py',
-          output: 'api/index.py',
+        '../../../../../api/project/[aid]/[bid]/index.py',
-        },
+        '../../../../../api/users/get.py',
-        {
+        '../../../../../api/users/post.py',
-          input: '../../../../../runtime-traced-files/api/users/get.py',
+        '../../../../../file.txt',
-          output: 'api/users/get.py',
+        '../../../../../util/date.py',
-        },
+        '../../../../../util/math.py',
-        {
-          input: '../../../../../runtime-traced-files/api/users/post.py',
-          output: 'api/users/post.py',
-        },
-        {
-          input: '../../../../../runtime-traced-files/file.txt',
-          output: 'file.txt',
-        },
-        {
-          input: '../../../../../runtime-traced-files/util/date.py',
-          output: 'util/date.py',
-        },
-        {
-          input: '../../../../../runtime-traced-files/util/math.py',
-          output: 'util/math.py',
-        },
       ],
     });
 
@@ -147,32 +137,16 @@ describe('convert-runtime-to-plugin', () => {
       output.server.pages.api.users['post.py.nft.json']
     );
     expect(postJson).toMatchObject({
-      version: 1,
+      version: 2,
       files: [
-        {
+        '../../../../../api/db/[id].py',
-          input: '../../../../../runtime-traced-files/api/index.py',
+        '../../../../../api/index.py',
-          output: 'api/index.py',
+        '../../../../../api/project/[aid]/[bid]/index.py',
-        },
+        '../../../../../api/users/get.py',
-        {
+        '../../../../../api/users/post.py',
-          input: '../../../../../runtime-traced-files/api/users/get.py',
+        '../../../../../file.txt',
-          output: 'api/users/get.py',
+        '../../../../../util/date.py',
-        },
+        '../../../../../util/math.py',
-        {
-          input: '../../../../../runtime-traced-files/api/users/post.py',
-          output: 'api/users/post.py',
-        },
-        {
-          input: '../../../../../runtime-traced-files/file.txt',
-          output: 'file.txt',
-        },
-        {
-          input: '../../../../../runtime-traced-files/util/date.py',
-          output: 'util/date.py',
-        },
-        {
-          input: '../../../../../runtime-traced-files/util/math.py',
-          output: 'util/math.py',
-        },
       ],
     });
 

packages/cli/README.md

@@ -34,7 +34,7 @@ Finally, [connect your Git repository to Vercel](https://vercel.com/docs/git) an
 
 ## Documentation
 
-For details on how to use Vercel CLI, check out our [documentation](https://vercel.com/docs).
+For details on how to use Vercel CLI, check out our [documentation](https://vercel.com/docs/cli).
 
 ## Local Development
 

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vercel",
-  "version": "23.1.3-canary.30",
+  "version": "23.1.3-canary.67",
   "preferGlobal": true,
   "license": "Apache-2.0",
   "description": "The command-line interface for Vercel",
@@ -43,14 +43,14 @@
     "node": ">= 12"
   },
   "dependencies": {
-    "@vercel/build-utils": "2.12.3-canary.18",
+    "@vercel/build-utils": "2.12.3-canary.42",
-    "@vercel/go": "1.2.4-canary.3",
+    "@vercel/go": "1.2.4-canary.4",
-    "@vercel/node": "1.12.2-canary.6",
+    "@vercel/node": "1.12.2-canary.7",
-    "@vercel/python": "2.0.6-canary.5",
+    "@vercel/python": "2.1.2-canary.2",
-    "@vercel/ruby": "1.2.8-canary.4",
+    "@vercel/ruby": "1.2.10-canary.0",
     "update-notifier": "4.1.0",
-    "vercel-plugin-middleware": "0.0.0-canary.7",
+    "vercel-plugin-middleware": "0.0.0-canary.19",
-    "vercel-plugin-node": "1.12.2-canary.8"
+    "vercel-plugin-node": "1.12.2-canary.34"
   },
   "devDependencies": {
     "@next/env": "11.1.2",
@@ -90,7 +90,7 @@
     "@types/update-notifier": "5.1.0",
     "@types/which": "1.3.2",
     "@types/write-json-file": "2.2.1",
-    "@vercel/frameworks": "0.5.1-canary.11",
+    "@vercel/frameworks": "0.5.1-canary.17",
     "@vercel/ncc": "0.24.0",
     "@vercel/nft": "0.17.0",
     "@zeit/fun": "0.11.2",

packages/cli/src/commands/build.ts

@@ -5,18 +5,19 @@ import {
   GlobOptions,
   scanParentDirs,
   spawnAsync,
+  glob as buildUtilsGlob,
 } from '@vercel/build-utils';
 import { nodeFileTrace } from '@vercel/nft';
 import Sema from 'async-sema';
 import chalk from 'chalk';
 import { SpawnOptions } from 'child_process';
 import { assert } from 'console';
-import { createHash } from 'crypto';
 import fs from 'fs-extra';
 import ogGlob from 'glob';
-import { isAbsolute, join, parse, relative, resolve } from 'path';
+import { dirname, isAbsolute, join, parse, relative } from 'path';
 import pluralize from 'pluralize';
 import Client from '../util/client';
+import { VercelConfig } from '../util/dev/types';
 import { emoji, prependEmoji } from '../util/emoji';
 import getArgs from '../util/get-args';
 import handleError from '../util/handle-error';
@@ -30,10 +31,7 @@ import { getCommandName, getPkgName } from '../util/pkg-name';
 import { loadCliPlugins } from '../util/plugins';
 import { findFramework } from '../util/projects/find-framework';
 import { VERCEL_DIR } from '../util/projects/link';
-import {
+import { readProjectSettings } from '../util/projects/project-settings';
-  ProjectLinkAndSettings,
-  readProjectSettings,
-} from '../util/projects/project-settings';
 import pull from './pull';
 
 const sema = new Sema(16, {
@@ -68,15 +66,6 @@ const help = () => {
 
 const OUTPUT_DIR = '.output';
 
-const fields: {
-  name: string;
-  value: keyof ProjectLinkAndSettings['settings'];
-}[] = [
-  { name: 'Build Command', value: 'buildCommand' },
-  { name: 'Output Directory', value: 'outputDirectory' },
-  { name: 'Root Directory', value: 'rootDirectory' },
-];
-
 export default async function main(client: Client) {
   if (process.env.__VERCEL_BUILD_RUNNING) {
     client.output.error(
@@ -147,9 +136,11 @@ export default async function main(client: Client) {
   });
 
   // Set process.env with loaded environment variables
-  await processEnv(loadedEnvFiles);
+  processEnv(loadedEnvFiles);
 
-  const spawnOpts = {
+  const spawnOpts: {
+    env: Record<string, string | undefined>;
+  } = {
     env: { ...combinedEnv, VERCEL: '1' },
   };
 
@@ -168,47 +159,57 @@ export default async function main(client: Client) {
   }
 
   const buildState = { ...project.settings };
-
+  const formatSetting = (
-  client.output.log(`Retrieved Project Settings:`);
+    name: string,
-  client.output.print(
+    override: string | null | undefined,
-    chalk.dim(`  - ${chalk.bold(`Framework Preset:`)} ${framework.name}\n`)
+    defaults: typeof framework.settings.outputDirectory
+  ) =>
+    `  - ${chalk.bold(`${name}:`)} ${`${
+      override
+        ? override + ` (override)`
+        : 'placeholder' in defaults
+        ? chalk.italic(`${defaults.placeholder}`)
+        : defaults.value
+    }`}`;
+  console.log(`Retrieved Project Settings:`);
+  console.log(
+    chalk.dim(`  - ${chalk.bold(`Framework Preset:`)} ${framework.name}`)
+  );
+  console.log(
+    chalk.dim(
+      formatSetting(
+        'Build Command',
+        project.settings.buildCommand,
+        framework.settings.buildCommand
+      )
+    )
+  );
+  console.log(
+    chalk.dim(
+      formatSetting(
+        'Output Directory',
+        project.settings.outputDirectory,
+        framework.settings.outputDirectory
+      )
+    )
   );
 
-  for (let field of fields) {
+  buildState.outputDirectory =
-    const defaults = (framework.settings as any)[field.value];
+    project.settings.outputDirectory ||
-    if (defaults) {
+    (isSettingValue(framework.settings.outputDirectory)
-      client.output.print(
+      ? framework.settings.outputDirectory.value
-        chalk.dim(
+      : null);
-          `  - ${chalk.bold(`${field.name}:`)} ${`${
+  buildState.rootDirectory = project.settings.rootDirectory;
-            project.settings[field.value]
-              ? project.settings[field.value] + ` (override)`
-              : isSettingValue(defaults)
-              ? defaults.value
-              : chalk.italic(`${defaults.placeholder}`)
-          }`}\n`
-        )
-      );
-    }
-    if (field.value != 'buildCommand') {
-      (buildState as any)[field.value] = project.settings[field.value]
-        ? project.settings[field.value]
-        : defaults
-        ? isSettingValue(defaults)
-          ? defaults.value
-          : null
-        : null;
-    }
-  }
 
   if (loadedEnvFiles.length > 0) {
-    client.output.log(
+    console.log(
       `Loaded Environment Variables from ${loadedEnvFiles.length} ${pluralize(
         'file',
         loadedEnvFiles.length
       )}:`
     );
     for (let envFile of loadedEnvFiles) {
-      client.output.print(chalk.dim(`  - ${envFile.path}\n`));
+      console.log(chalk.dim(`  - ${envFile.path}`));
     }
   }
 
@@ -239,7 +240,7 @@ export default async function main(client: Client) {
   };
 
   if (plugins?.pluginCount && plugins?.pluginCount > 0) {
-    client.output.log(
+    console.log(
       `Loaded ${plugins.pluginCount} CLI ${pluralize(
         'Plugin',
         plugins.pluginCount
@@ -247,7 +248,7 @@ export default async function main(client: Client) {
     );
     // preBuild Plugins
     if (plugins.preBuildPlugins.length > 0) {
-      client.output.log(
+      console.log(
         `Running ${plugins.pluginCount} CLI ${pluralize(
           'Plugin',
           plugins.pluginCount
@@ -285,17 +286,34 @@ export default async function main(client: Client) {
   // Clean the output directory
   fs.removeSync(join(cwd, OUTPUT_DIR));
 
+  if (framework && process.env.VERCEL_URL && 'envPrefix' in framework) {
+    for (const key of Object.keys(process.env)) {
+      if (key.startsWith('VERCEL_')) {
+        const newKey = `${framework.envPrefix}${key}`;
+        // Set `process.env` and `spawnOpts.env` to make sure the variables are
+        // available to the `build` step and the CLI Plugins.
+        process.env[newKey] = process.env[newKey] || process.env[key];
+        spawnOpts.env[newKey] = process.env[newKey];
+      }
+    }
+  }
+
+  // Required for Next.js to produce the correct `.nft.json` files.
+  spawnOpts.env.NEXT_PRIVATE_OUTPUT_TRACE_ROOT = baseDir;
+
+  // Yarn v2 PnP mode may be activated, so force
+  // "node-modules" linker style
+  const env = {
+    YARN_NODE_LINKER: 'node-modules',
+    ...spawnOpts.env,
+  };
+
   if (typeof buildState.buildCommand === 'string') {
-    client.output.log(`Running Build Command: ${cmd(buildState.buildCommand)}`);
+    console.log(`Running Build Command: ${cmd(buildState.buildCommand)}`);
     await execCommand(buildState.buildCommand, {
       ...spawnOpts,
-      // Yarn v2 PnP mode may be activated, so force
+      env,
-      // "node-modules" linker style
+      cwd,
-      env: {
-        YARN_NODE_LINKER: 'node-modules',
-        ...spawnOpts.env,
-      },
-      cwd: cwd,
     });
   } else if (fs.existsSync(join(cwd, 'package.json'))) {
     await runPackageJsonScript(
@@ -304,21 +322,58 @@ export default async function main(client: Client) {
       ['vercel-build', 'now-build', 'build'],
       spawnOpts
     );
+  } else if (typeof framework.settings.buildCommand.value === 'string') {
+    console.log(
+      `Running Build Command: ${cmd(framework.settings.buildCommand.value)}`
+    );
+    await execCommand(framework.settings.buildCommand.value, {
+      ...spawnOpts,
+      env,
+      cwd,
+    });
   }
 
   if (!fs.existsSync(join(cwd, OUTPUT_DIR))) {
-    let outputDir = join(OUTPUT_DIR, 'static');
+    let dotNextDir: string | null = null;
-    let distDir = await framework.getFsOutputDir(cwd);
+
-    if (framework.slug === 'nextjs') {
+    // If a custom `outputDirectory` was set, we'll need to verify
-      outputDir = OUTPUT_DIR;
+    // if it's `.next` output, or just static output.
+    const userOutputDirectory = project.settings.outputDirectory;
+
+    if (typeof userOutputDirectory === 'string') {
+      if (fs.existsSync(join(cwd, userOutputDirectory, 'BUILD_ID'))) {
+        dotNextDir = join(cwd, userOutputDirectory);
+        client.output.debug(
+          `Consider ${param(userOutputDirectory)} as ${param('.next')} output.`
+        );
+      }
+    } else if (fs.existsSync(join(cwd, '.next'))) {
+      dotNextDir = join(cwd, '.next');
+      client.output.debug(`Found ${param('.next')} directory.`);
     }
-    const copyStamp = stamp();
+
+    // We cannot rely on the `framework` alone, as it might be a static export,
+    // and the current build might use a different project that's not in the settings.
+    const isNextOutput = Boolean(dotNextDir);
+    const nextExport = await getNextExportStatus(dotNextDir);
+    const outputDir =
+      isNextOutput && !nextExport ? OUTPUT_DIR : join(OUTPUT_DIR, 'static');
+    const getDistDir = framework.getFsOutputDir || framework.getOutputDirName;
+    const distDir =
+      (nextExport?.exportDetail.outDirectory
+        ? relative(cwd, nextExport.exportDetail.outDirectory)
+        : false) ||
+      dotNextDir ||
+      userOutputDirectory ||
+      (await getDistDir(cwd));
+
     await fs.ensureDir(join(cwd, outputDir));
-    const relativeDistDir = relative(cwd, distDir);
+
+    const copyStamp = stamp();
     client.output.spinner(
       `Copying files from ${param(distDir)} to ${param(outputDir)}`
     );
-    const files = await glob(join(relativeDistDir, '**'), {
+    const files = await glob(join(relative(cwd, distDir), '**'), {
       ignore: [
         'node_modules/**',
         '.vercel/**',
@@ -352,7 +407,7 @@ export default async function main(client: Client) {
       )
     );
     client.output.stopSpinner();
-    client.output.log(
+    console.log(
       `Copied ${files.length.toLocaleString()} files from ${param(
         distDir
       )} to ${param(outputDir)} ${copyStamp()}`
@@ -366,6 +421,7 @@ export default async function main(client: Client) {
         `Generating build manifest: ${param(buildManifestPath)}`
       );
       const buildManifest = {
+        version: 1,
         cache: framework.cachePattern ? [framework.cachePattern] : [],
       };
       await fs.writeJSON(buildManifestPath, buildManifest, { spaces: 2 });
@@ -393,7 +449,53 @@ export default async function main(client: Client) {
     }
 
     // Special Next.js processing.
-    if (framework.slug === 'nextjs') {
+    if (nextExport) {
+      client.output.debug('Found `next export` output.');
+
+      const htmlFiles = await buildUtilsGlob(
+        '**/*.html',
+        join(cwd, OUTPUT_DIR, 'static')
+      );
+
+      if (nextExport.exportDetail.success !== true) {
+        client.output.error(
+          `Export of Next.js app failed. Please check your build logs.`
+        );
+        process.exit(1);
+      }
+
+      await fs.mkdirp(join(cwd, OUTPUT_DIR, 'server', 'pages'));
+      await fs.mkdirp(join(cwd, OUTPUT_DIR, 'static'));
+
+      await Promise.all(
+        Object.keys(htmlFiles).map(async fileName => {
+          await sema.acquire();
+
+          const input = join(cwd, OUTPUT_DIR, 'static', fileName);
+          const target = join(cwd, OUTPUT_DIR, 'server', 'pages', fileName);
+
+          await fs.mkdirp(dirname(target));
+
+          await fs.promises.rename(input, target).finally(() => {
+            sema.release();
+          });
+        })
+      );
+
+      for (const file of [
+        'BUILD_ID',
+        'images-manifest.json',
+        'routes-manifest.json',
+        'build-manifest.json',
+      ]) {
+        const input = join(nextExport.dotNextDir, file);
+
+        if (fs.existsSync(input)) {
+          // Do not use `smartCopy`, since we want to overwrite if they already exist.
+          await fs.copyFile(input, join(OUTPUT_DIR, file));
+        }
+      }
+    } else if (isNextOutput) {
       // The contents of `.output/static` should be placed inside of `.output/static/_next/static`
       const tempStatic = '___static';
       await fs.rename(
@@ -444,10 +546,12 @@ export default async function main(client: Client) {
       // `public`, then`static`). We can't read both at the same time because that would mean we'd
       // read public for old Next.js versions that don't support it, which might be breaking (and
       // we don't want to make vercel build specific framework versions).
+      const nextSrcDirectory = dirname(distDir);
+
       const publicFiles = await glob('public/**', {
         nodir: true,
         dot: true,
-        cwd,
+        cwd: nextSrcDirectory,
         absolute: true,
       });
       if (publicFiles.length > 0) {
@@ -456,7 +560,11 @@ export default async function main(client: Client) {
             smartCopy(
               client,
               f,
-              f.replace('public', join(OUTPUT_DIR, 'static'))
+              join(
+                OUTPUT_DIR,
+                'static',
+                relative(join(dirname(distDir), 'public'), f)
+              )
             )
           )
         );
@@ -464,7 +572,7 @@ export default async function main(client: Client) {
         const staticFiles = await glob('static/**', {
           nodir: true,
           dot: true,
-          cwd,
+          cwd: nextSrcDirectory,
           absolute: true,
         });
         await Promise.all(
@@ -472,7 +580,12 @@ export default async function main(client: Client) {
             smartCopy(
               client,
               f,
-              f.replace('static', join(OUTPUT_DIR, 'static', 'static'))
+              join(
+                OUTPUT_DIR,
+                'static',
+                'static',
+                relative(join(dirname(distDir), 'static'), f)
+              )
             )
           )
         );
@@ -491,6 +604,7 @@ export default async function main(client: Client) {
       const nftFiles = await glob(join(OUTPUT_DIR, '**', '*.nft.json'), {
         nodir: true,
         dot: true,
+        ignore: ['cache/**'],
         cwd,
         absolute: true,
       });
@@ -522,28 +636,15 @@ export default async function main(client: Client) {
             ],
           });
           fileList.delete(relative(cwd, f));
-          await resolveNftToOutput({
+
-            client,
+          const nftFileName = f.replace(ext, '.js.nft.json');
-            baseDir,
+          client.output.debug(`Creating ${nftFileName}`);
-            outputDir: OUTPUT_DIR,
+
-            nftFileName: f.replace(ext, '.js.nft.json'),
+          await fs.writeJSON(nftFileName, {
-            nft: {
+            version: 2,
-              version: 1,
+            files: Array.from(fileList).map(fileListEntry =>
-              files: Array.from(fileList).map(fileListEntry =>
+              relative(dir, fileListEntry)
-                relative(dir, fileListEntry)
+            ),
-              ),
-            },
-          });
-        }
-      } else {
-        for (let f of nftFiles) {
-          const json = await fs.readJson(f);
-          await resolveNftToOutput({
-            client,
-            baseDir,
-            outputDir: OUTPUT_DIR,
-            nftFileName: f,
-            nft: json,
           });
         }
       }
@@ -552,33 +653,44 @@ export default async function main(client: Client) {
         OUTPUT_DIR,
         'required-server-files.json'
       );
-      const requiredServerFilesJson = await fs.readJSON(
-        requiredServerFilesPath
-      );
-      await fs.writeJSON(requiredServerFilesPath, {
-        ...requiredServerFilesJson,
-        appDir: '.',
-        files: requiredServerFilesJson.files.map((i: string) => {
-          const absolutePath = join(cwd, i.replace('.next', '.output'));
-          const output = relative(baseDir, absolutePath);
 
-          return {
+      if (fs.existsSync(requiredServerFilesPath)) {
-            input: i.replace('.next', '.output'),
+        client.output.debug(`Resolve ${param('required-server-files.json')}.`);
-            output,
+
-          };
+        const requiredServerFilesJson = await fs.readJSON(
-        }),
+          requiredServerFilesPath
-      });
+        );
+
+        await fs.writeJSON(requiredServerFilesPath, {
+          ...requiredServerFilesJson,
+          appDir: '.',
+          files: requiredServerFilesJson.files.map((i: string) => {
+            const originalPath = join(requiredServerFilesJson.appDir, i);
+            const relPath = join(OUTPUT_DIR, relative(distDir, originalPath));
+
+            return relPath;
+          }),
+        });
+      }
     }
   }
 
   // Build Plugins
   if (plugins?.buildPlugins && plugins.buildPlugins.length > 0) {
-    client.output.log(
+    console.log(
       `Running ${plugins.pluginCount} CLI ${pluralize(
         'Plugin',
         plugins.pluginCount
       )} after Build Command:`
     );
+    let vercelConfig: VercelConfig = {};
+    try {
+      vercelConfig = await fs.readJSON(join(cwd, 'vercel.json'));
+    } catch (error) {
+      if (error.code !== 'ENOENT') {
+        throw new Error(`Failed to read vercel.json: ${error.message}`);
+      }
+    }
     for (let item of plugins.buildPlugins) {
       const { name, plugin, color } = item;
       if (typeof plugin.build === 'function') {
@@ -591,6 +703,7 @@ export default async function main(client: Client) {
           console.error = (...args: any[]) =>
             prefixedLog(prefix, args, origErr);
           await plugin.build({
+            vercelConfig,
             workPath: cwd,
           });
           client.output.debug(
@@ -608,13 +721,13 @@ export default async function main(client: Client) {
     }
   }
 
-  client.output.print(
+  console.log(
     `${prependEmoji(
       `Build Completed in ${chalk.bold(OUTPUT_DIR)} ${chalk.gray(
         buildStamp()
       )}`,
       emoji('success')
-    )}\n`
+    )}`
   );
 
   return 0;
@@ -660,25 +773,37 @@ export async function runPackageJsonScript(
     }
   }
 
-  client.output.log(`Running Build Command: ${cmd(opts.prettyCommand)}\n`);
+  console.log(`Running Build Command: ${cmd(opts.prettyCommand)}\n`);
   await spawnAsync(cliType, ['run', scriptName], opts);
-  client.output.print('\n'); // give it some room
+  console.log(); // give it some room
   client.output.debug(`Script complete [${Date.now() - runScriptTime}ms]`);
   return true;
 }
 
 async function linkOrCopy(existingPath: string, newPath: string) {
   try {
-    await fs.createLink(existingPath, newPath);
+    if (
+      newPath.endsWith('.nft.json') ||
+      newPath.endsWith('middleware-manifest.json') ||
+      newPath.endsWith('required-server-files.json')
+    ) {
+      await fs.copy(existingPath, newPath, {
+        overwrite: true,
+      });
+    } else {
+      await fs.createLink(existingPath, newPath);
+    }
   } catch (err: any) {
     // eslint-disable-line
-    // If a hard link to the same file already exists
+    // If a symlink to the same file already exists
     // then trying to copy it will make an empty file from it.
     if (err['code'] === 'EEXIST') return;
-    // In some VERY rare cases (1 in a thousand), hard-link creation fails on Windows.
+    // In some VERY rare cases (1 in a thousand), symlink creation fails on Windows.
     // In that case, we just fall back to copying.
     // This issue is reproducible with "pnpm add @material-ui/icons@4.9.1"
-    await fs.copyFile(existingPath, newPath);
+    await fs.copy(existingPath, newPath, {
+      overwrite: true,
+    });
   }
 }
 
@@ -701,70 +826,51 @@ async function glob(pattern: string, options: GlobOptions): Promise<string[]> {
 }
 
 /**
- * Computes a hash for the given buf.
+ * Files will only exist when `next export` was used.
- *
- * @param {Buffer} file data
- * @return {String} hex digest
  */
-function hash(buf: Buffer): string {
+async function getNextExportStatus(dotNextDir: string | null) {
-  return createHash('sha1').update(buf).digest('hex');
+  if (!dotNextDir) {
-}
+    return null;
-
-interface NftFile {
-  version: number;
-  files: (string | { input: string; output: string })[];
-}
-
-// resolveNftToOutput takes nft file and moves all of its trace files
-// into the specified directory + `inputs`, (renaming them to their hash + ext) and
-// subsequently updating the original nft file accordingly. This is done
-// to make the `.output` directory be self-contained, so that it works
-// properly with `vc --prebuilt`.
-async function resolveNftToOutput({
-  client,
-  baseDir,
-  outputDir,
-  nftFileName,
-  nft,
-}: {
-  client: Client;
-  baseDir: string;
-  outputDir: string;
-  nftFileName: string;
-  nft: NftFile;
-}) {
-  client.output.debug(`Processing and resolving ${nftFileName}`);
-  await fs.ensureDir(join(outputDir, 'inputs'));
-  const newFilesList: NftFile['files'] = [];
-  for (let fileEntity of nft.files) {
-    const relativeInput: string =
-      typeof fileEntity === 'string' ? fileEntity : fileEntity.input;
-    const fullInput = resolve(join(parse(nftFileName).dir, relativeInput));
-
-    // if the resolved path is NOT in the .output directory we move in it there
-    if (!fullInput.includes(outputDir)) {
-      const { ext } = parse(fullInput);
-      const raw = await fs.readFile(fullInput);
-      const newFilePath = join(outputDir, 'inputs', hash(raw) + ext);
-      smartCopy(client, fullInput, newFilePath);
-
-      // We have to use `baseDir` instead of `cwd`, because we want to
-      // mount everything from there (especially `node_modules`).
-      // This is important for NPM Workspaces where `node_modules` is not
-      // in the directory of the workspace.
-      const output = relative(baseDir, fullInput).replace('.output', '.next');
-
-      newFilesList.push({
-        input: relative(parse(nftFileName).dir, newFilePath),
-        output,
-      });
-    } else {
-      newFilesList.push(relativeInput);
-    }
   }
-  // Update the .nft.json with new input and output mapping
+
-  await fs.writeJSON(nftFileName, {
+  const exportDetail: {
-    ...nft,
+    success: boolean;
-    files: newFilesList,
+    outDirectory: string;
-  });
+  } | null = await fs
+    .readJson(join(dotNextDir, 'export-detail.json'))
+    .catch(error => {
+      if (error.code === 'ENOENT') {
+        return null;
+      }
+
+      throw error;
+    });
+
+  if (!exportDetail) {
+    return null;
+  }
+
+  const exportMarker: {
+    version: 1;
+    exportTrailingSlash: boolean;
+    hasExportPathMap: boolean;
+  } | null = await fs
+    .readJSON(join(dotNextDir, 'export-marker.json'))
+    .catch(error => {
+      if (error.code === 'ENOENT') {
+        return null;
+      }
+
+      throw error;
+    });
+
+  return {
+    dotNextDir,
+    exportDetail,
+    exportMarker: {
+      trailingSlash: exportMarker?.hasExportPathMap
+        ? exportMarker.exportTrailingSlash
+        : false,
+    },
+  };
 }

packages/cli/src/commands/deploy/index.ts

@@ -447,6 +447,7 @@ export default async (client: Client) => {
       forceNew: argv['--force'],
       withCache: argv['--with-cache'],
       prebuilt: argv['--prebuilt'],
+      rootDirectory,
       quiet,
       wantsPublic: argv['--public'] || localConfig.public,
       isFile,

packages/cli/src/commands/dev/dev.ts

@@ -6,7 +6,6 @@ import { ProjectEnvVariable } from '../../types';
 import Client from '../../util/client';
 import { getLinkedProject } from '../../util/projects/link';
 import { getFrameworks } from '../../util/get-frameworks';
-import { isSettingValue } from '../../util/is-setting-value';
 import { ProjectSettings } from '../../types';
 import getDecryptedEnvRecords from '../../util/get-decrypted-env-records';
 import setupAndLink from '../../util/link/setup-and-link';
@@ -71,9 +70,9 @@ export default async function dev(
           frameworkSlug = framework.slug;
         }
 
-        const defaults = framework.settings.devCommand;
+        const defaults = framework.settings.devCommand.value;
-        if (isSettingValue(defaults)) {
+        if (defaults) {
-          devCommand = defaults.value;
+          devCommand = defaults;
         }
       }
     }

packages/cli/src/index.ts

@@ -160,24 +160,26 @@ const main = async () => {
   //  * a path to deploy (as in: `vercel path/`)
   //  * a subcommand (as in: `vercel ls`)
   const targetOrSubcommand = argv._[2];
+  const isBuildOrDev =
+    targetOrSubcommand === 'build' || targetOrSubcommand === 'dev';
 
-  output.print(
+  if (isBuildOrDev) {
-    `${chalk.grey(
+    console.log(
-      `${getTitleName()} CLI ${pkg.version}${
+      `${chalk.grey(
-        targetOrSubcommand === 'dev'
+        `${getTitleName()} CLI ${
-          ? ' dev (beta)'
+          pkg.version
-          : targetOrSubcommand === 'build'
+        } ${targetOrSubcommand} (beta) — https://vercel.com/feedback`
-          ? ' build (beta)'
+      )}`
-          : ''
+    );
-      }${
+  } else {
-        isCanary ||
+    output.print(
-        targetOrSubcommand === 'dev' ||
+      `${chalk.grey(
-        targetOrSubcommand === 'build'
+        `${getTitleName()} CLI ${pkg.version}${
-          ? ' — https://vercel.com/feedback'
+          isCanary ? ' — https://vercel.com/feedback' : ''
-          : ''
+        }`
-      }`
+      )}\n`
-    )}\n`
+    );
-  );
+  }
 
   // Handle `--version` directly
   if (!targetOrSubcommand && argv['--version']) {

packages/cli/src/util/deploy/process-deployment.ts

@@ -52,6 +52,7 @@ export default async function processDeployment({
   isSettingUpProject: boolean;
   skipAutoDetectionConfirmation?: boolean;
   cwd?: string;
+  rootDirectory?: string;
 }) {
   let {
     now,
@@ -64,6 +65,7 @@ export default async function processDeployment({
     nowConfig,
     quiet,
     prebuilt,
+    rootDirectory,
   } = args;
 
   const { debug } = output;
@@ -86,6 +88,7 @@ export default async function processDeployment({
     force,
     withCache,
     prebuilt,
+    rootDirectory,
     skipAutoDetectionConfirmation,
   };
 

packages/cli/src/util/dev/server.ts

@@ -968,7 +968,7 @@ export default class DevServer {
         socket.destroy();
         return;
       }
-      const target = `http://localhost:${this.devProcessPort}`;
+      const target = `http://127.0.0.1:${this.devProcessPort}`;
       this.output.debug(`Detected "upgrade" event, proxying to ${target}`);
       this.proxy.ws(req, socket, head, { target });
     });
@@ -1663,7 +1663,7 @@ export default class DevServer {
     if (!match) {
       // If the dev command is started, then proxy to it
       if (this.devProcessPort) {
-        const upstream = `http://localhost:${this.devProcessPort}`;
+        const upstream = `http://127.0.0.1:${this.devProcessPort}`;
         debug(`Proxying to frontend dev server: ${upstream}`);
 
         // Add the Vercel platform proxy request headers
@@ -1810,7 +1810,7 @@ export default class DevServer {
         return proxyPass(
           req,
           res,
-          `http://localhost:${port}`,
+          `http://127.0.0.1:${port}`,
           this,
           requestId,
           false
@@ -1847,7 +1847,7 @@ export default class DevServer {
       return proxyPass(
         req,
         res,
-        `http://localhost:${this.devProcessPort}`,
+        `http://127.0.0.1:${this.devProcessPort}`,
         this,
         requestId,
         false

packages/cli/src/util/get-update-command.ts

@@ -1,11 +1,9 @@
 import { Stats } from 'fs';
 import { sep, dirname, join, resolve } from 'path';
-import { readJSON, lstat, readlink, readFile, realpath } from 'fs-extra';
+import { lstat, readlink, readFile, realpath } from 'fs-extra';
 import { isCanary } from './is-canary';
 import { getPkgName } from './pkg-name';
 
-// `npm` tacks a bunch of extra properties on the `package.json` file,
-// so check for one of them to determine yarn vs. npm.
 async function isYarn(): Promise<boolean> {
   let s: Stats;
   let binPath = process.argv[1];
@@ -20,8 +18,12 @@ async function isYarn(): Promise<boolean> {
     }
   }
   const pkgPath = join(dirname(binPath), '..', 'package.json');
-  const pkg = await readJSON(pkgPath).catch(() => ({}));
+  /*
-  return !('_id' in pkg);
+   * Generally, pkgPath looks like:
+   * "/Users/username/.config/yarn/global/node_modules/vercel/package.json"
+   * "/usr/local/share/.config/yarn/global/node_modules/vercel/package.json"
+   */
+  return pkgPath.includes(join('yarn', 'global'));
 }
 
 async function getConfigPrefix() {

packages/cli/src/util/index.ts

@@ -37,6 +37,7 @@ export interface CreateOptions {
   project?: string;
   wantsPublic: boolean;
   prebuilt?: boolean;
+  rootDirectory?: string;
   meta: Dictionary<string>;
   regions?: string[];
   quiet?: boolean;
@@ -113,6 +114,7 @@ export default class Now extends EventEmitter {
       name,
       project,
       prebuilt = false,
+      rootDirectory,
       wantsPublic,
       meta,
       regions,
@@ -168,6 +170,7 @@ export default class Now extends EventEmitter {
       skipAutoDetectionConfirmation,
       cwd,
       prebuilt,
+      rootDirectory,
     });
 
     if (deployment && deployment.warnings) {

packages/cli/src/util/metrics.ts

@@ -1,6 +1,5 @@
 import crypto from 'crypto';
 import ua from 'universal-analytics';
-import { platform, release, userInfo } from 'os';
 import { getPlatformEnv } from '@vercel/build-utils';
 
 import userAgent from './ua-browser';
@@ -16,10 +15,15 @@ export const shouldCollectMetrics =
 
 export const metrics = (): ua.Visitor => {
   const token =
-    typeof config.token === 'string' ? config.token : platform() + release();
+    typeof config.token === 'string'
-  const salt = userInfo().username;
+      ? config.token
+      : process.platform + process.arch;
+  const salt =
+    (process.env.USER || '') +
+    (process.env.LANG || '') +
+    (process.env.SHELL || '');
   const hash = crypto
-    .pbkdf2Sync(token, salt, 1000, 64, 'sha512')
+    .pbkdf2Sync(token, salt, 100, 64, 'sha512')
     .toString('hex')
     .substring(0, 24);
 

packages/cli/src/util/output/create-output.ts

@@ -125,10 +125,14 @@ export class Output {
       this.debug(`Spinner invoked (${message}) with a ${delay}ms delay`);
       return;
     }
-    if (this._spinner) {
+    if (this.isTTY) {
-      this._spinner.text = message;
+      if (this._spinner) {
+        this._spinner.text = message;
+      } else {
+        this._spinner = wait(message, delay);
+      }
     } else {
-      this._spinner = wait(message, delay);
+      this.print(`${message}\n`);
     }
   };
 

packages/cli/src/util/projects/link.ts

@@ -244,20 +244,27 @@ export async function linkFolderToProject(
   try {
     const gitIgnorePath = join(path, '.gitignore');
 
-    const gitIgnore = await readFile(gitIgnorePath, 'utf8').catch(() => null);
+    let gitIgnore =
-    const EOL = gitIgnore && gitIgnore.includes('\r\n') ? '\r\n' : os.EOL;
+      (await readFile(gitIgnorePath, 'utf8').catch(() => null)) ?? '';
+    const EOL = gitIgnore.includes('\r\n') ? '\r\n' : os.EOL;
+    let contentModified = false;
 
-    if (
+    if (!gitIgnore.split(EOL).includes(VERCEL_DIR)) {
-      !gitIgnore ||
+      gitIgnore += `${
-      !gitIgnore.split(EOL).includes(VERCEL_DIR) ||
+        gitIgnore.endsWith(EOL) || gitIgnore.length === 0 ? '' : EOL
-      !gitIgnore.split(EOL).includes(VERCEL_OUTPUT_DIR)
+      }${VERCEL_DIR}${EOL}`;
-    ) {
+      contentModified = true;
-      await writeFile(
+    }
-        gitIgnorePath,
+
-        gitIgnore
+    if (!gitIgnore.split(EOL).includes(VERCEL_OUTPUT_DIR)) {
-          ? `${gitIgnore}${EOL}${VERCEL_DIR}${EOL}${VERCEL_OUTPUT_DIR}${EOL}`
+      gitIgnore += `${
-          : `${VERCEL_DIR}${EOL}${VERCEL_OUTPUT_DIR}${EOL}`
+        gitIgnore.endsWith(EOL) || gitIgnore.length === 0 ? '' : EOL
-      );
+      }${VERCEL_OUTPUT_DIR}${EOL}`;
+      contentModified = true;
+    }
+
+    if (contentModified) {
+      await writeFile(gitIgnorePath, gitIgnore);
       isGitIgnoreUpdated = true;
     }
   } catch (error) {

packages/cli/src/util/projects/project-settings.ts

@@ -8,6 +8,7 @@ export type ProjectLinkAndSettings = ProjectLink & {
     buildCommand: Project['buildCommand'];
     devCommand: Project['devCommand'];
     outputDirectory: Project['outputDirectory'];
+    directoryListing: Project['directoryListing'];
     rootDirectory: Project['rootDirectory'];
     framework: Project['framework'];
   };
@@ -29,6 +30,7 @@ export async function writeProjectSettings(
       settings: {
         buildCommand: project.buildCommand,
         devCommand: project.devCommand,
+        outputDirectory: project.outputDirectory,
         directoryListing: project.directoryListing,
         rootDirectory: project.rootDirectory,
         framework: project.framework,

packages/cli/test/fixtures/unit/edge-middleware-strict/_middleware.ts

@@ -0,0 +1,6 @@
+export default function (req) {
+  const isStrict = (function () {
+    return !this;
+  })();
+  return new Response('is strict mode? ' + (isStrict ? 'yes' : 'no'));
+}

packages/cli/test/helpers/prepare.js

@@ -365,6 +365,10 @@ module.exports = async function prepare(session, binaryPath) {
     'project-link-dev': {
       'package.json': '{}',
     },
+    'project-link-gitignore': {
+      'package.json': '{}',
+      '.gitignore': '.output',
+    },
     'project-link-legacy': {
       'index.html': 'Hello',
       'vercel.json': '{"builds":[{"src":"*.html","use":"@vercel/static"}]}',

packages/cli/test/integration.js

@@ -2683,7 +2683,7 @@ test('deploy a Lambda with 3 seconds of maxDuration', async t => {
   const url = new URL(output.stdout);
 
   // Should time out
-  url.pathname = '/api/wait-for/4';
+  url.pathname = '/api/wait-for/5';
   const response1 = await fetch(url.href);
   t.is(
     response1.status,
@@ -2692,7 +2692,7 @@ test('deploy a Lambda with 3 seconds of maxDuration', async t => {
   );
 
   // Should not time out
-  url.pathname = '/api/wait-for/2';
+  url.pathname = '/api/wait-for/1';
   const response2 = await fetch(url.href);
   t.is(
     response2.status,
@@ -3453,6 +3453,29 @@ test('[vc link --confirm] should not show prompts and autolink', async t => {
   );
 });
 
+test('[vc link] should not duplicate paths in .gitignore', async t => {
+  const dir = fixture('project-link-gitignore');
+
+  // remove previously linked project if it exists
+  await remove(path.join(dir, '.vercel'));
+
+  const { exitCode, stderr, stdout } = await execa(
+    binaryPath,
+    ['link', '--confirm', ...defaultArgs],
+    { cwd: dir, reject: false }
+  );
+
+  // Ensure the exit code is right
+  t.is(exitCode, 0, formatOutput({ stderr, stdout }));
+
+  // Ensure the message is correct pattern
+  t.regex(stderr, /Linked to /m);
+
+  // Ensure .gitignore is created
+  const gitignore = await readFile(path.join(dir, '.gitignore'), 'utf8');
+  t.is(gitignore, '.output\n.vercel\n');
+});
+
 test('[vc dev] should show prompts to set up project', async t => {
   const dir = fixture('project-link-dev');
   const port = 58352;

packages/cli/test/util/dev/server.test.ts

@@ -385,4 +385,13 @@ describe('DevServer', () => {
       );
     })
   );
+
+  it(
+    'should run middleware in strict mode',
+    testFixture('edge-middleware-strict', async server => {
+      const response = await fetch(`${server.address}/index.html`);
+      const body = await response.text();
+      expect(body).toStrictEqual('is strict mode? yes');
+    })
+  );
 });

packages/cli/test/util/get-update-command.test.ts

@@ -5,7 +5,7 @@ describe('getUpdateCommand', () => {
   it('should detect update command', async () => {
     const updateCommand = await getUpdateCommand();
     expect(updateCommand).toEqual(
-      `yarn add vercel@${isCanary() ? 'canary' : 'latest'}`
+      `npm i vercel@${isCanary() ? 'canary' : 'latest'}`
     );
   });
 });

packages/client/.gitignore

@@ -6,3 +6,5 @@ node_modules
 !tests/fixtures/nowignore/node_modules
 !tests/fixtures/vercelignore-allow-nodemodules/node_modules
 !tests/fixtures/vercelignore-allow-nodemodules/sub/node_modules
+!tests/fixtures/file-system-api/.output
+!tests/fixtures/file-system-api-root-directory/**/.output

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/client",
-  "version": "10.2.3-canary.19",
+  "version": "10.2.3-canary.45",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "homepage": "https://vercel.com",
@@ -40,7 +40,7 @@
     ]
   },
   "dependencies": {
-    "@vercel/build-utils": "2.12.3-canary.18",
+    "@vercel/build-utils": "2.12.3-canary.42",
     "@zeit/fetch": "5.2.0",
     "async-retry": "1.2.3",
     "async-sema": "3.0.0",

packages/client/src/create-deployment.ts

@@ -1,12 +1,12 @@
 import { lstatSync } from 'fs-extra';
 
 import { relative, isAbsolute } from 'path';
-import hashes, { mapToObject } from './utils/hashes';
+import { hashes, mapToObject, resolveNftJsonFiles } from './utils/hashes';
 import { upload } from './upload';
 import { buildFileTree, createDebug, parseVercelConfig } from './utils';
 import { DeploymentError } from './errors';
 import {
-  NowConfig,
+  VercelConfig,
   VercelClientOptions,
   DeploymentOptions,
   DeploymentEventType,
@@ -16,7 +16,7 @@ export default function buildCreateDeployment() {
   return async function* createDeployment(
     clientOptions: VercelClientOptions,
     deploymentOptions: DeploymentOptions = {},
-    nowConfig: NowConfig = {}
+    nowConfig: VercelConfig = {}
   ): AsyncIterableIterator<{ type: DeploymentEventType; payload: any }> {
     const { path } = clientOptions;
 
@@ -74,12 +74,7 @@ export default function buildCreateDeployment() {
       debug(`Provided 'path' is a single file`);
     }
 
-    let { fileList } = await buildFileTree(
+    let { fileList } = await buildFileTree(path, clientOptions, debug);
-      path,
-      clientOptions.isDirectory,
-      debug,
-      clientOptions.prebuilt
-    );
 
     let configPath: string | undefined;
     if (!nowConfig) {
@@ -114,7 +109,11 @@ export default function buildCreateDeployment() {
       };
     }
 
-    const files = await hashes(fileList);
+    const hashedFileMap = await hashes(fileList);
+    const nftFileList = clientOptions.prebuilt
+      ? await resolveNftJsonFiles(hashedFileMap)
+      : [];
+    const files = await hashes(nftFileList, hashedFileMap);
 
     debug(`Yielding a 'hashes-calculated' event with ${files.size} hashes`);
     yield { type: 'hashes-calculated', payload: mapToObject(files) };

packages/client/src/types.ts

@@ -15,6 +15,7 @@ export interface VercelClientOptions {
   apiUrl?: string;
   force?: boolean;
   prebuilt?: boolean;
+  rootDirectory?: string;
   withCache?: boolean;
   userAgent?: string;
   defaultName?: string;

packages/client/src/utils/hashes.ts

@@ -1,6 +1,7 @@
 import { createHash } from 'crypto';
 import fs from 'fs-extra';
 import { Sema } from 'async-sema';
+import { join, dirname } from 'path';
 
 export interface DeploymentFile {
   names: string[];
@@ -15,9 +16,7 @@ export interface DeploymentFile {
  * @return {String} hex digest
  */
 function hash(buf: Buffer): string {
-  return createHash('sha1')
+  return createHash('sha1').update(buf).digest('hex');
-    .update(buf)
-    .digest('hex');
 }
 
 /**
@@ -39,34 +38,68 @@ export const mapToObject = (
 /**
  * Computes hashes for the contents of each file given.
  *
- * @param {Array} of {String} full paths
+ * @param files - absolute file paths
- * @return {Map}
+ * @param map - optional map of files to append
+ * @return Map of hash digest to file object
  */
-async function hashes(files: string[]): Promise<Map<string, DeploymentFile>> {
+export async function hashes(
-  const map = new Map<string, DeploymentFile>();
+  files: string[],
+  map = new Map<string, DeploymentFile>()
+): Promise<Map<string, DeploymentFile>> {
   const semaphore = new Sema(100);
 
   await Promise.all(
-    files.map(
+    files.map(async (name: string): Promise<void> => {
-      async (name: string): Promise<void> => {
+      await semaphore.acquire();
-        await semaphore.acquire();
+      const data = await fs.readFile(name);
-        const data = await fs.readFile(name);
+      const { mode } = await fs.stat(name);
-        const { mode } = await fs.stat(name);
 
-        const h = hash(data);
+      const h = hash(data);
-        const entry = map.get(h);
+      const entry = map.get(h);
 
-        if (entry) {
+      if (entry) {
+        if (entry.names[0] !== name) {
           entry.names.push(name);
-        } else {
-          map.set(h, { names: [name], data, mode });
         }
-
+      } else {
-        semaphore.release();
+        map.set(h, { names: [name], data, mode });
       }
-    )
+
+      semaphore.release();
+    })
   );
   return map;
 }
 
-export default hashes;
+export async function resolveNftJsonFiles(
+  hashedFiles: Map<string, DeploymentFile>
+): Promise<string[]> {
+  const semaphore = new Sema(100);
+  const existingFiles = Array.from(hashedFiles.values());
+  const resolvedFiles = new Set<string>();
+
+  await Promise.all(
+    existingFiles.map(async file => {
+      await semaphore.acquire();
+      const fsPath = file.names[0];
+      if (fsPath.endsWith('.nft.json')) {
+        const json = file.data.toString('utf8');
+        const { version, files } = JSON.parse(json) as {
+          version: number;
+          files: string[] | { input: string; output: string }[];
+        };
+        if (version === 1 || version === 2) {
+          for (let f of files) {
+            const relPath = typeof f === 'string' ? f : f.input;
+            resolvedFiles.add(join(dirname(fsPath), relPath));
+          }
+        } else {
+          console.error(`Invalid nft.json version: ${version}`);
+        }
+      }
+      semaphore.release();
+    })
+  );
+
+  return Array.from(resolvedFiles);
+}

packages/client/src/utils/index.ts

@@ -1,7 +1,7 @@
 import { DeploymentFile } from './hashes';
 import { FetchOptions } from '@zeit/fetch';
 import { nodeFetch, zeitFetch } from './fetch';
-import { join, sep, relative } from 'path';
+import { join, sep, relative, posix } from 'path';
 import { URL } from 'url';
 import ignore from 'ignore';
 type Ignore = ReturnType<typeof ignore>;
@@ -81,13 +81,16 @@ const maybeRead = async function <T>(path: string, default_: T) {
 
 export async function buildFileTree(
   path: string | string[],
-  isDirectory: boolean,
+  {
-  debug: Debug,
+    isDirectory,
-  prebuilt?: boolean
+    prebuilt,
+    rootDirectory,
+  }: Pick<VercelClientOptions, 'isDirectory' | 'prebuilt' | 'rootDirectory'>,
+  debug: Debug
 ): Promise<{ fileList: string[]; ignoreList: string[] }> {
   const ignoreList: string[] = [];
   let fileList: string[];
-  let { ig, ignores } = await getVercelIgnore(path, prebuilt);
+  let { ig, ignores } = await getVercelIgnore(path, prebuilt, rootDirectory);
 
   debug(`Found ${ignores.length} rules in .vercelignore`);
   debug('Building file tree...');
@@ -119,37 +122,50 @@ export async function buildFileTree(
 
 export async function getVercelIgnore(
   cwd: string | string[],
-  prebuilt?: boolean
+  prebuilt?: boolean,
+  rootDirectory?: string
 ): Promise<{ ig: Ignore; ignores: string[] }> {
-  const ignores: string[] = prebuilt
+  let ignores: string[] = [];
-    ? ['*', '!.output', '!.output/**']
+
-    : [
+  const outputDir = posix.join(rootDirectory || '', '.output');
-        '.hg',
+
-        '.git',
+  if (prebuilt) {
-        '.gitmodules',
+    ignores.push('*');
-        '.svn',
+    const parts = outputDir.split('/');
-        '.cache',
+    parts.forEach((_, i) => {
-        '.next',
+      const level = parts.slice(0, i + 1).join('/');
-        '.now',
+      ignores.push(`!${level}`);
-        '.vercel',
+    });
-        '.npmignore',
+    ignores.push(`!${outputDir}/**`);
-        '.dockerignore',
+  } else {
-        '.gitignore',
+    ignores = [
-        '.*.swp',
+      '.hg',
-        '.DS_Store',
+      '.git',
-        '.wafpicke-*',
+      '.gitmodules',
-        '.lock-wscript',
+      '.svn',
-        '.env.local',
+      '.cache',
-        '.env.*.local',
+      '.next',
-        '.venv',
+      '.now',
-        'npm-debug.log',
+      '.vercel',
-        'config.gypi',
+      '.npmignore',
-        'node_modules',
+      '.dockerignore',
-        '__pycache__',
+      '.gitignore',
-        'venv',
+      '.*.swp',
-        'CVS',
+      '.DS_Store',
-        '.output',
+      '.wafpicke-*',
-      ];
+      '.lock-wscript',
+      '.env.local',
+      '.env.*.local',
+      '.venv',
+      'npm-debug.log',
+      'config.gypi',
+      'node_modules',
+      '__pycache__',
+      'venv',
+      'CVS',
+      `.output`,
+    ];
+  }
   const cwds = Array.isArray(cwd) ? cwd : [cwd];
 
   const files = await Promise.all(
@@ -250,39 +266,31 @@ export const prepareFiles = (
   files: Map<string, DeploymentFile>,
   clientOptions: VercelClientOptions
 ): PreparedFile[] => {
-  const preparedFiles = [...files.keys()].reduce(
+  const preparedFiles: PreparedFile[] = [];
-    (acc: PreparedFile[], sha: string): PreparedFile[] => {
+  for (const [sha, file] of files) {
-      const next = [...acc];
+    for (const name of file.names) {
+      let fileName: string;
 
-      const file = files.get(sha) as DeploymentFile;
+      if (clientOptions.isDirectory) {
-
+        // Directory
-      for (const name of file.names) {
+        fileName =
-        let fileName: string;
+          typeof clientOptions.path === 'string'
-
+            ? relative(clientOptions.path, name)
-        if (clientOptions.isDirectory) {
+            : name;
-          // Directory
+      } else {
-          fileName =
+        // Array of files or single file
-            typeof clientOptions.path === 'string'
+        const segments = name.split(sep);
-              ? relative(clientOptions.path, name)
+        fileName = segments[segments.length - 1];
-              : name;
-        } else {
-          // Array of files or single file
-          const segments = name.split(sep);
-          fileName = segments[segments.length - 1];
-        }
-
-        next.push({
-          file: isWin ? fileName.replace(/\\/g, '/') : fileName,
-          size: file.data.byteLength || file.data.length,
-          mode: file.mode,
-          sha,
-        });
       }
 
-      return next;
+      preparedFiles.push({
-    },
+        file: isWin ? fileName.replace(/\\/g, '/') : fileName,
-    []
+        size: file.data.byteLength || file.data.length,
-  );
+        mode: file.mode,
+        sha,
+      });
+    }
+  }
 
   return preparedFiles;
 };

packages/client/tests/fixtures/file-system-api-root-directory/foo.txt

@@ -0,0 +1 @@
+foo

packages/client/tests/fixtures/file-system-api-root-directory/root/.output/baz.txt

@@ -0,0 +1 @@
+baz

packages/client/tests/fixtures/file-system-api-root-directory/root/.output/sub/qux.txt

@@ -0,0 +1 @@
+qux

packages/client/tests/fixtures/file-system-api-root-directory/root/bar.txt

@@ -0,0 +1 @@
+bar

packages/client/tests/fixtures/file-system-api-root-directory/someother/.output/baz.txt

@@ -0,0 +1 @@
+baz

packages/client/tests/fixtures/file-system-api-root-directory/someother/.output/sub/qux.txt

@@ -0,0 +1 @@
+qux

packages/client/tests/fixtures/file-system-api-root-directory/someother/bar.txt

@@ -0,0 +1 @@
+bar

packages/client/tests/fixtures/file-system-api/.output/baz.txt

@@ -0,0 +1 @@
+baz

packages/client/tests/fixtures/file-system-api/.output/sub/qux.txt

@@ -0,0 +1 @@
+qux

packages/client/tests/fixtures/file-system-api/foo.txt

@@ -0,0 +1 @@
+foo

packages/client/tests/fixtures/file-system-api/sub/bar.txt

@@ -0,0 +1 @@
+bar

packages/client/tests/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["*.test.ts"]
+}

packages/client/tests/unit.utils.test.ts

@@ -17,7 +17,11 @@ const toAbsolutePaths = (cwd: string, files: string[]) =>
 describe('buildFileTree()', () => {
   it('should exclude files using `.nowignore` blocklist', async () => {
     const cwd = fixture('nowignore');
-    const { fileList, ignoreList } = await buildFileTree(cwd, true, noop);
+    const { fileList, ignoreList } = await buildFileTree(
+      cwd,
+      { isDirectory: true },
+      noop
+    );
 
     const expectedFileList = toAbsolutePaths(cwd, ['.nowignore', 'index.txt']);
     expect(normalizeWindowsPaths(expectedFileList).sort()).toEqual(
@@ -36,7 +40,11 @@ describe('buildFileTree()', () => {
 
   it('should include the node_modules using `.vercelignore` allowlist', async () => {
     const cwd = fixture('vercelignore-allow-nodemodules');
-    const { fileList, ignoreList } = await buildFileTree(cwd, true, noop);
+    const { fileList, ignoreList } = await buildFileTree(
+      cwd,
+      { isDirectory: true },
+      noop
+    );
 
     const expected = toAbsolutePaths(cwd, [
       'node_modules/one.txt',
@@ -54,4 +62,90 @@ describe('buildFileTree()', () => {
       normalizeWindowsPaths(ignoreList).sort()
     );
   });
+
+  it('should find root files but ignore .output files when prebuilt=false', async () => {
+    const cwd = fixture('file-system-api');
+    const { fileList, ignoreList } = await buildFileTree(
+      cwd,
+      { isDirectory: true, prebuilt: false },
+      noop
+    );
+
+    const expectedFileList = toAbsolutePaths(cwd, ['foo.txt', 'sub/bar.txt']);
+    expect(normalizeWindowsPaths(expectedFileList).sort()).toEqual(
+      normalizeWindowsPaths(fileList).sort()
+    );
+
+    const expectedIgnoreList = ['.output'];
+    expect(normalizeWindowsPaths(expectedIgnoreList).sort()).toEqual(
+      normalizeWindowsPaths(ignoreList).sort()
+    );
+  });
+
+  it('should find .output files but ignore other files when prebuilt=true', async () => {
+    const cwd = fixture('file-system-api');
+    const { fileList, ignoreList } = await buildFileTree(
+      cwd,
+      { isDirectory: true, prebuilt: true },
+      noop
+    );
+
+    const expectedFileList = toAbsolutePaths(cwd, [
+      '.output/baz.txt',
+      '.output/sub/qux.txt',
+    ]);
+    expect(normalizeWindowsPaths(expectedFileList).sort()).toEqual(
+      normalizeWindowsPaths(fileList).sort()
+    );
+
+    const expectedIgnoreList = ['foo.txt', 'sub'];
+    expect(normalizeWindowsPaths(expectedIgnoreList).sort()).toEqual(
+      normalizeWindowsPaths(ignoreList).sort()
+    );
+  });
+
+  it('should find root files but ignore all .output files when prebuilt=false and rootDirectory=root', async () => {
+    const cwd = fixture('file-system-api-root-directory');
+    const { fileList, ignoreList } = await buildFileTree(
+      cwd,
+      { isDirectory: true, prebuilt: false, rootDirectory: 'root' },
+      noop
+    );
+
+    const expectedFileList = toAbsolutePaths(cwd, [
+      'foo.txt',
+      'root/bar.txt',
+      'someother/bar.txt',
+    ]);
+    expect(normalizeWindowsPaths(expectedFileList).sort()).toEqual(
+      normalizeWindowsPaths(fileList).sort()
+    );
+
+    const expectedIgnoreList = ['root/.output', 'someother/.output'];
+    expect(normalizeWindowsPaths(expectedIgnoreList).sort()).toEqual(
+      normalizeWindowsPaths(ignoreList).sort()
+    );
+  });
+
+  it('should find root/.output files but ignore other files when prebuilt=true and rootDirectory=root', async () => {
+    const cwd = fixture('file-system-api-root-directory');
+    const { fileList, ignoreList } = await buildFileTree(
+      cwd,
+      { isDirectory: true, prebuilt: true, rootDirectory: 'root' },
+      noop
+    );
+
+    const expectedFileList = toAbsolutePaths(cwd, [
+      'root/.output/baz.txt',
+      'root/.output/sub/qux.txt',
+    ]);
+    expect(normalizeWindowsPaths(expectedFileList).sort()).toEqual(
+      normalizeWindowsPaths(fileList).sort()
+    );
+
+    const expectedIgnoreList = ['foo.txt', 'root/bar.txt', 'someother'];
+    expect(normalizeWindowsPaths(expectedIgnoreList).sort()).toEqual(
+      normalizeWindowsPaths(ignoreList).sort()
+    );
+  });
 });

packages/frameworks/logos/remix-no-shadow.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M700 0H100C44.772 0 0 44.772 0 100v600c0 55.228 44.772 100 100 100h600c55.228 0 100-44.772 100-100V100C800 44.772 755.228 0 700 0Z" fill="#212121"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M587.947 527.768c4.254 54.65 4.254 80.268 4.254 108.232H465.756c0-6.091.109-11.663.219-17.313.342-17.564.699-35.88-2.147-72.868-3.761-54.152-27.08-66.185-69.957-66.185H195v-98.525h204.889c54.16 0 81.241-16.476 81.241-60.098 0-38.357-27.081-61.601-81.241-61.601H195V163h227.456C545.069 163 606 220.912 606 313.42c0 69.193-42.877 114.319-100.799 121.84 48.895 9.777 77.48 37.605 82.746 92.508Z" fill="#fff"/>
+  <path d="M195 636v-73.447h133.697c22.332 0 27.181 16.563 27.181 26.441V636H195Z" fill="#fff"/>
+  <path d="M194.5 636v.5h161.878v-47.506c0-5.006-1.226-11.734-5.315-17.224-4.108-5.515-11.059-9.717-22.366-9.717H194.5V636Z" stroke="#fff" stroke-opacity=".8"/>
+</svg>

packages/frameworks/logos/remix.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M700 0H100C44.772 0 0 44.772 0 100v600c0 55.228 44.772 100 100 100h600c55.228 0 100-44.772 100-100V100C800 44.772 755.228 0 700 0Z" fill="#212121"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M587.947 527.768c4.254 54.65 4.254 80.268 4.254 108.232H465.756c0-6.091.109-11.663.219-17.313.342-17.564.699-35.88-2.147-72.868-3.761-54.152-27.08-66.185-69.957-66.185H195v-98.525h204.889c54.16 0 81.241-16.476 81.241-60.098 0-38.357-27.081-61.601-81.241-61.601H195V163h227.456C545.069 163 606 220.912 606 313.42c0 69.193-42.877 114.319-100.799 121.84 48.895 9.777 77.48 37.605 82.746 92.508Z" fill="#fff"/>
+  <path d="M195 636v-73.447h133.697c22.332 0 27.181 16.563 27.181 26.441V636H195Z" fill="#fff"/>
+  <path d="M194.5 636v.5h161.878v-47.506c0-5.006-1.226-11.734-5.315-17.224-4.108-5.515-11.059-9.717-22.366-9.717H194.5V636Z" stroke="#fff" stroke-opacity=".8"/>
+</svg>

packages/frameworks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/frameworks",
-  "version": "0.5.1-canary.11",
+  "version": "0.5.1-canary.17",
   "main": "./dist/frameworks.js",
   "types": "./dist/frameworks.d.ts",
   "files": [

packages/frameworks/src/frameworks.ts

@@ -43,6 +43,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `blitz build`',
+        value: 'blitz build',
       },
       devCommand: {
         value: 'blitz start',
@@ -51,8 +52,6 @@ export const frameworks = [
         placeholder: 'Next.js default',
       },
     },
-    devCommand: 'blitz start',
-    buildCommand: 'blitz build',
     getFsOutputDir: async () => '.next',
     getOutputDirName: async () => 'public',
   },
@@ -83,6 +82,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `next build`',
+        value: 'next build',
       },
       devCommand: {
         value: 'next dev --port $PORT',
@@ -98,8 +98,6 @@ export const frameworks = [
         dependencies: ['next-plugin-sentry', 'next-sentry-source-maps'],
       },
     ],
-    devCommand: 'next dev --port $PORT',
-    buildCommand: 'next build',
     getFsOutputDir: async () => '.next',
     getOutputDirName: async () => 'public',
     cachePattern: '.next/cache/**',
@@ -114,7 +112,7 @@ export const frameworks = [
     description:
       'A Gatsby app, using the default starter theme and a Serverless Function API.',
     website: 'https://gatsbyjs.org',
-    sort: 2,
+    sort: 5,
     envPrefix: 'GATSBY_',
     detectors: {
       every: [
@@ -131,6 +129,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `gatsby build`',
+        value: 'gatsby build',
       },
       devCommand: {
         value: 'gatsby develop --port $PORT',
@@ -141,10 +140,7 @@ export const frameworks = [
       },
     },
     dependency: 'gatsby',
-    devCommand: 'gatsby develop --port $PORT',
-    buildCommand: 'gatsby build',
     getOutputDirName: async () => 'public',
-    getFsOutputDir: async () => 'public',
     defaultRoutes: async (dirPrefix: string) => {
       // This file could be generated by gatsby-plugin-now or gatsby-plugin-zeit-now
       try {
@@ -194,6 +190,76 @@ export const frameworks = [
     },
     cachePattern: '{.cache,public}/**',
   },
+  {
+    name: 'Remix',
+    slug: 'remix',
+    demo: 'https://remix.examples.vercel.com',
+    logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/remix-no-shadow.svg',
+    tagline: 'Build Better Websites',
+    description: 'A new Remix app — the result of running `npx create-remix`.',
+    website: 'https://remix.run',
+    sort: 6,
+    detectors: {
+      every: [
+        {
+          path: 'package.json',
+          matchContent:
+            '"(dev)?(d|D)ependencies":\\s*{[^}]*"remix":\\s*".+?"[^}]*}',
+        },
+      ],
+    },
+    settings: {
+      installCommand: {
+        placeholder: '`yarn install` or `npm install`',
+      },
+      buildCommand: {
+        value: 'remix build',
+        placeholder: '`npm run build` or `remix build`',
+      },
+      devCommand: {
+        value: 'remix dev',
+        placeholder: 'remix dev',
+      },
+      outputDirectory: {
+        value: 'public',
+      },
+    },
+    dependency: 'remix',
+    getOutputDirName: async () => 'public',
+    defaultRoutes: [
+      {
+        src: '^/build/(.*)$',
+        headers: { 'cache-control': 'public, max-age=31536000, immutable' },
+        continue: true,
+      },
+      {
+        handle: 'filesystem',
+      },
+      {
+        src: '/(.*)',
+        dest: '/api',
+      },
+    ],
+    defaultRewrites: [
+      {
+        source: '/(.*)',
+        regex: '/(.*)',
+        destination: '/api',
+      },
+    ],
+    defaultHeaders: [
+      {
+        source: '/build/(.*)',
+        regex: '/build/(.*)',
+        headers: [
+          {
+            key: 'cache-control',
+            value: 'public, max-age=31536000, immutable',
+          },
+        ],
+      },
+    ],
+  },
   {
     name: 'Hexo',
     slug: 'hexo',
@@ -203,7 +269,6 @@ export const frameworks = [
       'Hexo is a fast, simple & powerful blog framework powered by Node.js.',
     description: 'A Hexo site, created with the Hexo CLI.',
     website: 'https://hexo.io',
-    sort: 3,
     detectors: {
       every: [
         {
@@ -219,6 +284,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `hexo generate`',
+        value: 'hexo generate',
       },
       devCommand: {
         value: 'hexo server --port $PORT',
@@ -229,9 +295,6 @@ export const frameworks = [
       },
     },
     dependency: 'hexo',
-    devCommand: 'hexo server --port $PORT',
-    buildCommand: 'hexo generate',
-    getFsOutputDir: async () => 'public',
     getOutputDirName: async () => 'public',
   },
   {
@@ -243,7 +306,6 @@ export const frameworks = [
       '11ty is a simpler static site generator written in JavaScript, created to be an alternative to Jekyll.',
     description: 'An Eleventy site, created with npm init.',
     website: 'https://www.11ty.dev',
-    sort: 4,
     detectors: {
       every: [
         {
@@ -259,6 +321,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `npx @11ty/eleventy`',
+        value: 'npx @11ty/eleventy',
       },
       devCommand: {
         value: 'npx @11ty/eleventy --serve --watch --port $PORT',
@@ -269,9 +332,6 @@ export const frameworks = [
       },
     },
     dependency: '@11ty/eleventy',
-    devCommand: 'npx @11ty/eleventy --serve --watch --port $PORT',
-    buildCommand: 'npx @11ty/eleventy',
-    getFsOutputDir: async () => '_site',
     getOutputDirName: async () => '_site',
     cachePattern: '.cache/**',
   },
@@ -300,6 +360,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `docusaurus build`',
+        value: 'docusaurus build',
       },
       devCommand: {
         value: 'docusaurus start --port $PORT',
@@ -310,24 +371,6 @@ export const frameworks = [
       },
     },
     dependency: '@docusaurus/core',
-    devCommand: 'docusaurus start --port $PORT',
-    buildCommand: 'docusaurus build',
-    getFsOutputDir: async (dirPrefix: string) => {
-      const base = 'build';
-      try {
-        const location = join(dirPrefix, base);
-        const content = await readdir(location, { withFileTypes: true });
-
-        // If there is only one file in it that is a dir we'll use it as dist dir
-        if (content.length === 1 && content[0].isDirectory()) {
-          return join(base, content[0].name);
-        }
-      } catch (error) {
-        console.error(`Error detecting output directory: `, error);
-      }
-
-      return base;
-    },
     getOutputDirName: async (dirPrefix: string) => {
       const base = 'build';
       try {
@@ -456,6 +499,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `docusaurus-build`',
+        value: 'docusaurus-build',
       },
       devCommand: {
         value: 'docusaurus-start --port $PORT',
@@ -466,23 +510,6 @@ export const frameworks = [
       },
     },
     dependency: 'docusaurus',
-    devCommand: 'docusaurus-start --port $PORT',
-    buildCommand: 'docusaurus-build',
-    getFsOutputDir: async (dirPrefix: string) => {
-      const base = 'build';
-      try {
-        const location = join(dirPrefix, base);
-        const content = await readdir(location, { withFileTypes: true });
-
-        // If there is only one file in it that is a dir we'll use it as dist dir
-        if (content.length === 1 && content[0].isDirectory()) {
-          return join(base, content[0].name);
-        }
-      } catch (error) {
-        console.error(`Error detecting output directory: `, error);
-      }
-      return base;
-    },
     getOutputDirName: async (dirPrefix: string) => {
       const base = 'build';
       try {
@@ -523,6 +550,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `preact build`',
+        value: 'preact build',
       },
       devCommand: {
         value: 'preact watch --port $PORT',
@@ -533,9 +561,6 @@ export const frameworks = [
       },
     },
     dependency: 'preact-cli',
-    devCommand: 'preact watch --port $PORT',
-    buildCommand: 'preact build',
-    getFsOutputDir: async () => 'build',
     getOutputDirName: async () => 'build',
     defaultRoutes: [
       {
@@ -581,6 +606,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `dojo build`',
+        value: 'dojo build',
       },
       devCommand: {
         value: 'dojo build -m dev -w -s -p $PORT',
@@ -591,9 +617,6 @@ export const frameworks = [
       },
     },
     dependency: '@dojo/cli',
-    devCommand: 'dojo build -m dev -w -s -p $PORT',
-    buildCommand: 'dojo build',
-    getFsOutputDir: async () => 'output/dist',
     getOutputDirName: async () => join('output', 'dist'),
     defaultRoutes: [
       {
@@ -649,6 +672,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `ember build`',
+        value: 'ember build',
       },
       devCommand: {
         value: 'ember serve --port $PORT',
@@ -659,9 +683,6 @@ export const frameworks = [
       },
     },
     dependency: 'ember-cli',
-    devCommand: 'ember serve --port $PORT',
-    buildCommand: 'ember build',
-    getFsOutputDir: async () => 'dist',
     getOutputDirName: async () => 'dist',
     defaultRoutes: [
       {
@@ -705,6 +726,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `vue-cli-service build`',
+        value: 'vue-cli-service build',
       },
       devCommand: {
         value: 'vue-cli-service serve --port $PORT',
@@ -715,9 +737,6 @@ export const frameworks = [
       },
     },
     dependency: '@vue/cli-service',
-    devCommand: 'vue-cli-service serve --port $PORT',
-    buildCommand: 'vue-cli-service build',
-    getFsOutputDir: async () => 'dist',
     getOutputDirName: async () => 'dist',
     defaultRoutes: [
       {
@@ -783,6 +802,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `ng build && scully`',
+        value: 'ng build && scully',
       },
       devCommand: {
         value: 'ng serve --port $PORT',
@@ -793,9 +813,6 @@ export const frameworks = [
       },
     },
     dependency: '@scullyio/init',
-    devCommand: 'ng serve --port $PORT',
-    buildCommand: 'ng build && scully',
-    getFsOutputDir: async () => 'dist',
     getOutputDirName: async () => 'dist/static',
   },
   {
@@ -822,6 +839,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `ng build`',
+        value: 'ng build',
       },
       devCommand: {
         value: 'ng serve --port $PORT',
@@ -831,9 +849,6 @@ export const frameworks = [
       },
     },
     dependency: '@ionic/angular',
-    devCommand: 'ng serve --port $PORT',
-    buildCommand: 'ng build',
-    getFsOutputDir: async () => 'www',
     getOutputDirName: async () => 'www',
     defaultRoutes: [
       {
@@ -876,6 +891,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `ng build`',
+        value: 'ng build',
       },
       devCommand: {
         value: 'ng serve --port $PORT',
@@ -886,9 +902,6 @@ export const frameworks = [
       },
     },
     dependency: '@angular/cli',
-    devCommand: 'ng serve --port $PORT',
-    buildCommand: 'ng build',
-    getFsOutputDir: async () => 'dist',
     getOutputDirName: async (dirPrefix: string) => {
       const base = 'dist';
       try {
@@ -945,6 +958,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `polymer build`',
+        value: 'polymer build',
       },
       devCommand: {
         value: 'polymer serve --port $PORT',
@@ -955,9 +969,6 @@ export const frameworks = [
       },
     },
     dependency: 'polymer-cli',
-    devCommand: 'polymer serve --port $PORT',
-    buildCommand: 'polymer build',
-    getFsOutputDir: async () => 'build',
     getOutputDirName: async (dirPrefix: string) => {
       const base = 'build';
       try {
@@ -996,6 +1007,7 @@ export const frameworks = [
       'Svelte lets you write high performance reactive apps with significantly less boilerplate.',
     description: 'A basic Svelte app using the default template.',
     website: 'https://svelte.dev',
+    sort: 3,
     detectors: {
       every: [
         {
@@ -1016,6 +1028,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `rollup -c`',
+        value: 'rollup -c',
       },
       devCommand: {
         value: 'rollup -c -w',
@@ -1025,9 +1038,6 @@ export const frameworks = [
       },
     },
     dependency: 'sirv-cli',
-    devCommand: 'rollup -c -w',
-    buildCommand: 'rollup -c',
-    getFsOutputDir: async () => 'public',
     getOutputDirName: async () => 'public',
     defaultRoutes: [
       {
@@ -1070,18 +1080,16 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `svelte-kit build`',
+        value: 'svelte-kit build',
       },
       devCommand: {
         value: 'svelte-kit dev --port $PORT',
         placeholder: 'svelte-kit dev',
       },
       outputDirectory: {
-        placeholder: 'public',
+        value: 'public',
       },
     },
-    devCommand: 'svelte-kit dev --port $PORT',
-    buildCommand: 'svelte-kit build',
-    getFsOutputDir: async () => '.output',
     getOutputDirName: async () => 'public',
   },
   {
@@ -1108,6 +1116,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `react-scripts build`',
+        value: 'react-scripts build',
       },
       devCommand: {
         value: 'react-scripts start',
@@ -1117,9 +1126,6 @@ export const frameworks = [
       },
     },
     dependency: '@ionic/react',
-    devCommand: 'react-scripts start',
-    buildCommand: 'react-scripts build',
-    getFsOutputDir: async () => 'build',
     getOutputDirName: async () => 'build',
     defaultRoutes: [
       {
@@ -1195,6 +1201,7 @@ export const frameworks = [
     description:
       'A React app, bootstrapped with create-react-app, and a Serverless Function API.',
     website: 'https://create-react-app.dev',
+    sort: 4,
     envPrefix: 'REACT_APP_',
     detectors: {
       some: [
@@ -1216,6 +1223,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `react-scripts build`',
+        value: 'react-scripts build',
       },
       devCommand: {
         value: 'react-scripts start',
@@ -1225,9 +1233,6 @@ export const frameworks = [
       },
     },
     dependency: 'react-scripts',
-    devCommand: 'react-scripts start',
-    buildCommand: 'react-scripts build',
-    getFsOutputDir: async () => 'build',
     getOutputDirName: async () => 'build',
     defaultRoutes: [
       {
@@ -1318,6 +1323,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `gridsome build`',
+        value: 'gridsome build',
       },
       devCommand: {
         value: 'gridsome develop -p $PORT',
@@ -1328,9 +1334,6 @@ export const frameworks = [
       },
     },
     dependency: 'gridsome',
-    devCommand: 'gridsome develop -p $PORT',
-    buildCommand: 'gridsome build',
-    getFsOutputDir: async () => 'dist',
     getOutputDirName: async () => 'dist',
   },
   {
@@ -1357,6 +1360,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `umi build`',
+        value: 'umi build',
       },
       devCommand: {
         value: 'umi dev --port $PORT',
@@ -1367,9 +1371,6 @@ export const frameworks = [
       },
     },
     dependency: 'umi',
-    devCommand: 'umi dev --port $PORT',
-    buildCommand: 'umi build',
-    getFsOutputDir: async () => 'dist',
     getOutputDirName: async () => 'dist',
     defaultRoutes: [
       {
@@ -1412,6 +1413,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `sapper export`',
+        value: 'sapper export',
       },
       devCommand: {
         value: 'sapper dev --port $PORT',
@@ -1422,9 +1424,6 @@ export const frameworks = [
       },
     },
     dependency: 'sapper',
-    devCommand: 'sapper dev --port $PORT',
-    buildCommand: 'sapper export',
-    getFsOutputDir: async () => '__sapper__/export',
     getOutputDirName: async () => '__sapper__/export',
   },
   {
@@ -1451,6 +1450,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `saber build`',
+        value: 'saber build',
       },
       devCommand: {
         value: 'saber --port $PORT',
@@ -1461,9 +1461,6 @@ export const frameworks = [
       },
     },
     dependency: 'saber',
-    devCommand: 'saber --port $PORT',
-    buildCommand: 'saber build',
-    getFsOutputDir: async () => 'public',
     getOutputDirName: async () => 'public',
     defaultRoutes: [
       {
@@ -1521,6 +1518,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `stencil build`',
+        value: 'stencil build',
       },
       devCommand: {
         value: 'stencil build --dev --watch --serve --port $PORT',
@@ -1531,9 +1529,6 @@ export const frameworks = [
       },
     },
     dependency: '@stencil/core',
-    devCommand: 'stencil build --dev --watch --serve --port $PORT',
-    buildCommand: 'stencil build',
-    getFsOutputDir: async () => 'www',
     getOutputDirName: async () => 'www',
     defaultRoutes: [
       {
@@ -1595,6 +1590,7 @@ export const frameworks = [
       'Nuxt.js is the web comprehensive framework that lets you dream big with Vue.js.',
     description: 'A Nuxt.js app, bootstrapped with create-nuxt-app.',
     website: 'https://nuxtjs.org',
+    sort: 2,
     envPrefix: 'NUXT_ENV_',
     detectors: {
       every: [
@@ -1611,6 +1607,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `nuxt generate`',
+        value: 'nuxt generate',
       },
       devCommand: {
         value: 'nuxt',
@@ -1620,9 +1617,6 @@ export const frameworks = [
       },
     },
     dependency: 'nuxt',
-    devCommand: 'nuxt',
-    buildCommand: 'nuxt generate',
-    getFsOutputDir: async () => '.output',
     getOutputDirName: async () => 'dist',
     cachePattern: '.nuxt/**',
     defaultRoutes: [
@@ -1680,9 +1674,6 @@ export const frameworks = [
         placeholder: 'RedwoodJS default',
       },
     },
-    devCommand: 'yarn rw dev --fwd="--port=$PORT --open=false',
-    buildCommand: 'yarn rw deploy vercel',
-    getFsOutputDir: async () => 'public',
     getOutputDirName: async () => 'public',
   },
   {
@@ -1694,7 +1685,6 @@ export const frameworks = [
       'Hugo is the world’s fastest framework for building websites, written in Go.',
     description: 'A Hugo site, created with the Hugo CLI.',
     website: 'https://gohugo.io',
-    sort: 5,
     detectors: {
       some: [
         {
@@ -1717,6 +1707,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `hugo -D --gc`',
+        value: 'hugo -D --gc',
       },
       devCommand: {
         value: 'hugo server -D -w -p $PORT',
@@ -1726,18 +1717,6 @@ export const frameworks = [
         placeholder: '`public` or `publishDir` from the `config` file',
       },
     },
-    devCommand: 'hugo server -D -w -p $PORT',
-    buildCommand: 'hugo -D --gc',
-    getFsOutputDir: async (dirPrefix: string): Promise<string> => {
-      type HugoConfig = { publishDir?: string };
-      const config = await readConfigFile<HugoConfig>(
-        ['config.json', 'config.yaml', 'config.toml'].map(fileName => {
-          return join(dirPrefix, fileName);
-        })
-      );
-
-      return (config && config.publishDir) || 'public';
-    },
     getOutputDirName: async (dirPrefix: string): Promise<string> => {
       type HugoConfig = { publishDir?: string };
       const config = await readConfigFile<HugoConfig>(
@@ -1772,6 +1751,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `jekyll build`',
+        value: 'jekyll build',
       },
       devCommand: {
         value: 'bundle exec jekyll serve --watch --port $PORT',
@@ -1781,15 +1761,6 @@ export const frameworks = [
         placeholder: '`_site` or `destination` from `_config.yml`',
       },
     },
-    devCommand: 'bundle exec jekyll serve --watch --port $PORT',
-    buildCommand: 'jekyll build',
-    getFsOutputDir: async (dirPrefix: string): Promise<string> => {
-      type JekyllConfig = { destination?: string };
-      const config = await readConfigFile<JekyllConfig>(
-        join(dirPrefix, '_config.yml')
-      );
-      return (config && config.destination) || '_site';
-    },
     getOutputDirName: async (dirPrefix: string): Promise<string> => {
       type JekyllConfig = { destination?: string };
       const config = await readConfigFile<JekyllConfig>(
@@ -1821,6 +1792,7 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `brunch build --production`',
+        value: 'brunch build --production',
       },
       devCommand: {
         value: 'brunch watch --server --port $PORT',
@@ -1830,9 +1802,6 @@ export const frameworks = [
         value: 'public',
       },
     },
-    devCommand: 'brunch watch --server --port $PORT',
-    buildCommand: 'brunch build --production',
-    getFsOutputDir: async () => 'public',
     getOutputDirName: async () => 'public',
   },
   {
@@ -1856,19 +1825,17 @@ export const frameworks = [
         value: 'bundle install',
       },
       buildCommand: {
-        value: '`npm run build` or `bundle exec middleman build`',
+        placeholder: '`npm run build` or `bundle exec middleman build`',
+        value: 'bundle exec middleman build',
       },
       devCommand: {
-        value: 'bundle exec middleman server -p $PORT',
         placeholder: 'bundle exec middleman server',
+        value: 'bundle exec middleman server -p $PORT',
       },
       outputDirectory: {
         value: 'build',
       },
     },
-    devCommand: 'bundle exec middleman server -p $PORT',
-    buildCommand: 'bundle exec middleman build',
-    getFsOutputDir: async () => 'build',
     getOutputDirName: async () => 'build',
     cachePattern: '{vendor/bin,vendor/cache,vendor/bundle}/**',
   },
@@ -1896,16 +1863,13 @@ export const frameworks = [
         value: 'zola build',
       },
       devCommand: {
-        value: 'zola serve --port $PORT',
         placeholder: 'zola serve',
+        value: 'zola serve --port $PORT',
       },
       outputDirectory: {
         value: 'public',
       },
     },
-    devCommand: 'zola serve --port $PORT',
-    buildCommand: 'zola build',
-    getFsOutputDir: async () => 'public',
     getOutputDirName: async () => 'public',
     defaultVersion: '0.13.0',
   },
@@ -1934,18 +1898,17 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `vite build`',
+        value: 'vite build',
       },
       devCommand: {
         placeholder: 'vite',
+        value: 'vite',
       },
       outputDirectory: {
         value: 'dist',
       },
     },
     dependency: 'vite',
-    devCommand: 'vite',
-    buildCommand: 'vite build',
-    getFsOutputDir: async () => 'dist',
     getOutputDirName: async () => 'dist',
   },
   {
@@ -1972,18 +1935,17 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run build` or `parcel build`',
+        value: 'parcel build',
       },
       devCommand: {
         placeholder: 'parcel',
+        value: 'parcel',
       },
       outputDirectory: {
-        placeholder: 'dist',
+        value: 'dist',
       },
     },
     dependency: 'parcel',
-    devCommand: 'parcel',
-    buildCommand: 'parcel build',
-    getFsOutputDir: async () => 'dist',
     getOutputDirName: async () => 'dist',
     defaultRoutes: [
       {
@@ -2016,16 +1978,16 @@ export const frameworks = [
       },
       buildCommand: {
         placeholder: '`npm run vercel-build` or `npm run build`',
+        value: null,
       },
       devCommand: {
         placeholder: 'None',
+        value: null,
       },
       outputDirectory: {
         placeholder: '`public` if it exists, or `.`',
       },
     },
-    devCommand: null,
-    buildCommand: null,
     getFsOutputDir: async (dirPrefix: string): Promise<string> => {
       // Public if it exists or `.`
       let base = 'public';

packages/frameworks/src/types.ts

@@ -26,7 +26,7 @@ export interface SettingValue {
    * A predefined setting for the detected framework
    * @example "next dev --port $PORT"
    */
-  value: string;
+  value: string | null;
   placeholder?: string;
 }
 
@@ -129,11 +129,11 @@ export interface Framework {
     /**
      * Default Build Command or a placeholder
      */
-    buildCommand: Setting;
+    buildCommand: SettingValue;
     /**
      * Default Development Command or a placeholder
      */
-    devCommand: Setting;
+    devCommand: SettingValue;
     /**
      * Default Output Directory
      */
@@ -157,13 +157,14 @@ export interface Framework {
   /**
    * Name of a dependency in `package.json` to detect this framework.
    * @example "hexo"
+   * @deprecated use `detectors` instead (new frameworks should not use this prop)
    */
   dependency?: string;
   /**
    * Function that returns the name of the directory that the framework outputs
-   * its build results to. In some cases this is read from a configuration file.
+   * its File System API build results to, usually called `.output`.
    */
-  getFsOutputDir: (dirPrefix: string) => Promise<string>;
+  getFsOutputDir?: (dirPrefix: string) => Promise<string>;
   /**
    * Function that returns the name of the directory that the framework outputs
    * its STATIC build results to. In some cases this is read from a configuration file.
@@ -201,16 +202,6 @@ export interface Framework {
    * @example ".cache/**"
    */
   cachePattern?: string;
-  /**
-   * The default build command for the framework.
-   * @example "next build"
-   */
-  buildCommand: string | null;
-  /**
-   * The default development command for the framework.
-   * @example "next dev"
-   */
-  devCommand: string | null;
   /**
    * The default version of the framework command that is available within the
    * build image. Usually an environment variable can be set to override this.

packages/frameworks/test/frameworks.unit.test.ts

@@ -34,7 +34,7 @@ const SchemaSettings = {
       additionalProperties: false,
       properties: {
         value: {
-          type: 'string',
+          type: ['string', 'null'],
         },
         placeholder: {
           type: 'string',
@@ -58,15 +58,7 @@ const Schema = {
   type: 'array',
   items: {
     type: 'object',
-    required: [
+    required: ['name', 'slug', 'logo', 'description', 'settings'],
-      'name',
-      'slug',
-      'logo',
-      'description',
-      'settings',
-      'buildCommand',
-      'devCommand',
-    ],
     properties: {
       name: { type: 'string' },
       slug: { type: ['string', 'null'] },
@@ -138,8 +130,6 @@ const Schema = {
 
       dependency: { type: 'string' },
       cachePattern: { type: 'string' },
-      buildCommand: { type: ['string', 'null'] },
-      devCommand: { type: ['string', 'null'] },
       defaultVersion: { type: 'string' },
     },
   },

packages/go/go-helpers.ts

@@ -6,7 +6,8 @@ import { join } from 'path';
 import stringArgv from 'string-argv';
 import { debug } from '@vercel/build-utils';
 const versionMap = new Map([
-  ['1.16', '1.16'],
+  ['1.17', '1.17.3'],
+  ['1.16', '1.16.10'],
   ['1.15', '1.15.8'],
   ['1.14', '1.14.15'],
   ['1.13', '1.13.15'],

packages/go/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/go",
-  "version": "1.2.4-canary.3",
+  "version": "1.2.4-canary.4",
   "license": "MIT",
   "main": "./dist/index",
   "homepage": "https://vercel.com/docs/runtimes#official-runtimes/go",

packages/go/test/fixtures/01-cowsay/vercel.json

@@ -5,10 +5,10 @@
     { "src": "subdirectory/index.go", "use": "@vercel/go" }
   ],
   "probes": [
-    { "path": "/", "mustContain": "cow:go1.16:RANDOMNESS_PLACEHOLDER" },
+    { "path": "/", "mustContain": "cow:go1.17.3:RANDOMNESS_PLACEHOLDER" },
     {
       "path": "/subdirectory",
-      "mustContain": "subcow:go1.16:RANDOMNESS_PLACEHOLDER"
+      "mustContain": "subcow:go1.17.3:RANDOMNESS_PLACEHOLDER"
     }
   ]
 }