add example

update lockfile

chore: add vercel edge end2end test

lockfile

run e2e test

adjustments

fix lockfile

pls work

adjust example

might this work?

small documentation improvements

try use cli

Author: n1ru4l

.github/workflows/deployment-e2e.yml

@@ -16,6 +16,7 @@ jobs:
             'azure-function',
             'aws-lambda',
             'vercel-function',
+            'vercel-edge',
           ]
     name: e2e / ${{ matrix.plan }}
 

e2e/README.md

@@ -15,6 +15,7 @@ On each PR, this workflow runs, and tried to deploy and test an actual environme
 - [x] [AWS Lambda](./tests/aws-lambda.ts)
 - [x] [Docker container](./tests/docker.ts)
 - [x] [Vercel Function](./tests/vercel.ts)
+- [x] [Vercel Edge Function](./tests/vercel-edge.ts)
 - [ ] K8s Pod
 - [ ] Docker
 

e2e/index.ts

@@ -7,13 +7,15 @@ import { dockerDeployment } from './tests/docker'
 import { DeploymentConfiguration } from './types'
 import { env, getCommitId } from './utils'
 import { vercelDeployment } from './tests/vercel'
+import { vercelEdgeDeployment } from './tests/vercel-edge'
 
 const AVAILABLE_TEST_PLANS = {
   'cf-worker': cloudFlareDeployment,
   'cf-modules': cfModulesDeployment,
   'azure-function': azureFunctionDeployment,
   'aws-lambda': awsLambdaDeployment,
   'vercel-function': vercelDeployment,
+  'vercel-edge': vercelEdgeDeployment,
   'docker-node-17': dockerDeployment('node:17.8.0-alpine3.14'),
 }
 

e2e/package.json

@@ -11,6 +11,7 @@
     "@pulumi/aws": "5.34.0",
     "@pulumi/docker": "4.1.2",
     "@types/node": "18.15.11",
+    "execa": "^5.1.0",
     "typescript": "5.0.3",
     "ts-node": "10.9.1"
   },

e2e/tests/vercel-edge.ts

@@ -0,0 +1,178 @@
+import * as pulumi from '@pulumi/pulumi'
+import * as fs from 'fs/promises'
+import * as path from 'path'
+import execa = require('execa')
+import {
+  assertGraphiQL,
+  assertQuery,
+  env,
+  fsPromises,
+  waitForEndpoint,
+} from '../utils'
+import { DeploymentConfiguration } from '../types'
+
+type VercelDeploymentInputs = {}
+
+class VercelProvider implements pulumi.dynamic.ResourceProvider {
+  private baseUrl = 'https://api.vercel.com'
+  private authToken = env('VERCEL_AUTH_TOKEN')
+  private directory = path.resolve(__dirname, '..', 'examples', 'nextjs-edge')
+
+  private getTeamId(): string | null {
+    try {
+      return env('VERCEL_TEAM_ID')
+    } catch {
+      return null
+    }
+  }
+
+  async delete(id: string) {
+    const teamId = this.getTeamId()
+    const response = await fetch(
+      `${this.baseUrl}/v13/deployments/${id}${
+        teamId ? `?teamId=${teamId}` : ''
+      }`,
+      {
+        method: 'DELETE',
+        headers: {
+          Authorization: `Bearer ${this.authToken}`,
+        },
+      },
+    )
+
+    if (response.status !== 200) {
+      throw new Error(
+        `Failed to delete Vercel deployment: invalid status code (${
+          response.status
+        }), body: ${await response.text()}`,
+      )
+    }
+  }
+
+  async create(): Promise<pulumi.dynamic.CreateResult> {
+    // Create project
+    const teamId = this.getTeamId()
+
+    const url = new URL(`${this.baseUrl}/v9/projects`)
+    url.searchParams.set('teamId', teamId)
+
+    const response = await fetch(url.toString(), {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${this.authToken}`,
+      },
+      body: JSON.stringify({
+        name: new Date().toISOString(),
+        framework: 'nextjs',
+      }),
+    })
+
+    await pulumi.log.info(`Create deployment (status=${response.status})`)
+
+    if (response.status !== 200) {
+      throw new Error(
+        `Failed to create Vercel deployment: invalid status code (${
+          response.status
+        }), body: ${await response.text()}`,
+      )
+    }
+
+    const responseJson: {
+      id: string
+      // url: string
+    } = await response.json()
+
+    // Deploy project
+    await fs.rmdir(path.join(this.directory, '.vercel'), {
+      recursive: true,
+      // @ts-expect-error
+      force: true,
+    })
+
+    await fs.mkdir(path.join(this.directory, '.vercel'))
+
+    await fs.writeFile(
+      path.join(this.directory, '.vercel', 'project.json'),
+      JSON.stringify({
+        projectId: responseJson.id,
+        // TODO: figure out how we can `orgId` without inlining it.
+        orgId: this.getTeamId(),
+        settings: {
+          createdAt: 1677572115659,
+          framework: 'nextjs',
+          devCommand: null,
+          installCommand: null,
+          buildCommand: null,
+          outputDirectory: null,
+          rootDirectory: null,
+          directoryListing: false,
+          nodeVersion: '18.x',
+        },
+      }),
+    )
+
+    await execa('pnpm', ['run', 'end2end:build'], {
+      cwd: this.directory,
+    })
+
+    const deployment = await execa('pnpm', ['run', 'end2end:deploy'], {
+      cwd: this.directory,
+    })
+
+    const regex = /\n✅  Production: (https:\/\/.*.vercel.app) \[/
+
+    const result = deployment.all?.match(regex)
+
+    if (!Array.isArray(result)) {
+      pulumi.log.info("Couldn't find deployment URL in output.")
+      throw new Error("Couldn't find deployment URL in output.")
+    }
+
+    const deploymentUrl = result[1]
+
+    return {
+      id: responseJson.id,
+      outs: {
+        url: deploymentUrl,
+      },
+    }
+  }
+}
+
+export class VercelDeployment extends pulumi.dynamic.Resource {
+  public readonly url: pulumi.Output<string>
+
+  constructor(
+    name: string,
+    props: VercelDeploymentInputs,
+    opts?: pulumi.CustomResourceOptions,
+  ) {
+    super(
+      new VercelProvider(),
+      name,
+      {
+        url: undefined,
+        ...props,
+      },
+      opts,
+    )
+  }
+}
+
+export const vercelEdgeDeployment: DeploymentConfiguration<{
+  functionUrl: string
+}> = {
+  program: async () => {
+    const deployment = new VercelDeployment('vercel-edge', {})
+
+    return {
+      functionUrl: pulumi.interpolate`https://${deployment.url}/api/graphql`,
+    }
+  },
+  test: async ({ functionUrl }) => {
+    console.log(`ℹ️ Vercel Edge Function deployed to URL: ${functionUrl.value}`)
+    await waitForEndpoint(functionUrl.value, 5, 10000)
+    await assertGraphiQL(functionUrl.value)
+    await assertQuery(functionUrl.value)
+  },
+}

examples/nextjs-edge/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/nextjs-edge/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/nextjs-edge/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/nextjs-edge/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/nextjs-edge/next.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  reactStrictMode: true,
+  eslint: {
+    // Warning: This allows production builds to successfully complete even if
+    // your project has ESLint errors.
+    ignoreDuringBuilds: true,
+  },
+}