chore(e2e): Add local E2E action to check workflow

.github/actions/lint/action.yml

@@ -4,10 +4,6 @@ description: Run biome to lint codebase and ensure code quality
 runs:
     using: "composite"
     steps:
-        - name: Install dependencies
-          run: pnpm install
-          shell: bash
-
         - name: Setup Biome CLI
           uses: biomejs/[email protected]
 

.github/actions/local/build/action.yml

@@ -0,0 +1,9 @@
+name: Build OpenNext package
+description: Installs dependencies and builds OpenNext
+runs:
+  using: 'composite'
+  steps:
+    # Build only the @opennextjs/aws package + its monorepo dependencies
+    - name: Build
+      shell: bash
+      run: pnpm --filter @opennextjs/aws... run build

.github/actions/local/e2e/action.yml

@@ -0,0 +1,38 @@
+name: E2E Local
+description: Runs E2E tests locally with development overrides
+runs:
+  using: 'composite'
+  steps:
+    - name: Setup Playwright
+      uses: ./.github/actions/setup-playwright
+
+    - name: Build examples apps with local configuration
+      shell: bash
+      run: pnpm -r openbuild:local 
+
+    # Remember to add more ports here if we add new examples app
+    - name: Start the local OpenNext servers
+      shell: bash
+      run: |
+        pnpm -r openbuild:local:start &
+        for port in 3001 3002 3003 3004; do
+          echo "Checking port $port..."
+          for attempt in {1..20}; do 
+            sleep 0.5
+            if curl --silent --fail http://localhost:$port > /dev/null; then
+              echo "Server on $port is ready"
+              break
+            fi
+            if [ $attempt -eq 20 ]; then
+              echo "Server on $port failed to start"
+              exit 1
+            fi
+            echo "Waiting for server on $port, attempt $attempt..."
+          done
+        done
+    - name: Run E2E Test locally
+      shell: bash
+      run: |
+        pnpm e2e:test
+
+    ## Do we want to report to Discord?

.github/actions/setup-playwright/action.yml

@@ -0,0 +1,22 @@
+name: 'Setup Playwright'
+description: 'Setup Playwright with caching'
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Put $HOME in env
+      if: runner.os == 'windows'
+      shell: pwsh
+      run: echo "HOME=$HOME" | Out-File -FilePath $env:GITHUB_ENV -Append
+
+    - name: Cache Playwright
+      id: playwright-cache
+      uses: actions/cache@v4
+      with:
+        path: ${{ runner.os == 'Windows' && format('{0}{1}', env.HOME, '\AppData\Local\ms-playwright') || runner.os == 'Linux' && '~/.cache/ms-playwright' || '~/Library/Caches/ms-playwright' }}
+        key: playwright-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
+
+    - name: Install Playwright with dependencies
+      if: steps.playwright-cache.outputs.cache-hit != 'true'
+      shell: bash
+      run: pnpm exec playwright install chromium --with-deps

.github/actions/pnpm-setup/action.yml → .github/actions/setup/action.yml

@@ -1,21 +1,22 @@
-name: Install & setup pnpm
-description: Install's node, pnpm, restores cache
+name: Install & setup
+description: Install's node, pnpm, restores cache, and then installs dependencies
 
 runs:
   using: 'composite'
   steps:
-    # Install nodejs. https://github.com/actions/setup-node
-    - name: Setup Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: 18.x
-
     # Install pnpm. https://github.com/pnpm/action-setup
     - uses: pnpm/action-setup@v4
       with:
         version: 9
         # run_install: false
 
+    - name: Install Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 20.19.4
+        cache: "pnpm"
+        registry-url: "https://registry.npmjs.org"
+
     # Get pnpm store path so we can cache it
     - name: Get pnpm store directory
       shell: bash
@@ -29,3 +30,7 @@ runs:
         key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
         restore-keys: |
           ${{ runner.os }}-pnpm-store-
+          
+    - name: Install dependencies
+      run: pnpm install
+      shell: bash

.github/workflows/check.yml

@@ -14,6 +14,8 @@ jobs:
         steps:
             - name: Checkout
               uses: actions/checkout@v4
-            - uses: ./.github/actions/pnpm-setup
             - uses: ./.github/actions/lint
-            - uses: ./.github/actions/test
+            - uses: ./.github/actions/setup
+            - uses: ./.github/actions/test
+            - uses: ./.github/actions/local/build
+            - uses: ./.github/actions/local/e2e

.github/workflows/e2e.yml

@@ -113,22 +113,9 @@ jobs:
         run: pnpm add next@${{ needs.check_next_version.outputs.previousNextVersion }}
       # We do not install the latest canary of Next in the experimental app.
 
-      - name: Get Playwright version
-        id: playwright-version
-        run: echo "version=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//' | sed 's/ .*//' )"
-
-      - name: Cache Playwright
-        uses: actions/cache@v4
-        id: playwright-cache
-        with:
-          path: "~/.cache/ms-playwright"
-          key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}
-          restore-keys: |
-            ${{ runner.os }}-playwright-
-
-      - name: Install Playwright
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: pnpm exec playwright install chromium --with-deps
+      # Setup playwright
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright
 
       # Cache turbo runs
       - name: Cache Turbo

.github/workflows/pre-release.yml

@@ -24,7 +24,7 @@ jobs:
         with:
           registry-url: "https://registry.npmjs.org"
 
-      - uses: ./.github/actions/pnpm-setup
+      - uses: ./.github/actions/setup
 
       - name: Install dependencies
         run: pnpm install

.github/workflows/release.yml

@@ -16,7 +16,7 @@ jobs:
         # https://github.com/actions/checkout
         uses: actions/checkout@v4
 
-      - uses: ./.github/actions/pnpm-setup
+      - uses: ./.github/actions/setup
       - uses: ./.github/actions/lint
 
       - name: Create Release Pull Request or Publish to npm

.github/workflows/v2-release.yml

@@ -16,7 +16,7 @@ jobs:
         with:
           registry-url: "https://registry.npmjs.org"
 
-      - uses: ./.github/actions/pnpm-setup
+      - uses: ./.github/actions/setup
 
       - name: Install dependencies
         run: pnpm install

README.md

@@ -98,7 +98,28 @@ To run `OpenNext` locally:
 
 There is also a way to run OpenNext locally. You can read a guide about it [here](https://opennext.js.org/aws/contribute/local_run). Its mostly used for development/debugging purposes.
 
-### Coldstart
+## Testing
+
+You can run unit tests with
+
+```bash
+pnpm test
+```
+
+You can tun e2e locally with:
+
+```bash
+pnpm -r openbuild:local
+pnpm -r openbuild:local:start
+```
+
+And in a different shell:
+
+```bash
+pnpm e2e:test
+```
+
+## Coldstart
 
 OpenNext provide you with a warmer function that can be used to reduce cold start.
 

examples/app-pages-router/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "openbuild": "node ../../packages/open-next/dist/index.js build --build-command \"npx turbo build\"",
     "openbuild:local": "node ../../packages/open-next/dist/index.js build --config-path open-next.config.local.ts",
-    "openbuild:local:start": "tsx proxy.ts",
+    "openbuild:local:start": "PORT=3003 tsx proxy.ts",
     "dev": "next dev --turbopack --port 3003",
     "build": "next build",
     "start": "next start --port 3003",

examples/app-router/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "openbuild": "node ../../packages/open-next/dist/index.js build",
     "openbuild:local": "node ../../packages/open-next/dist/index.js build --config-path open-next.config.local.ts",
+    "openbuild:local:start": "PORT=3001 OPEN_NEXT_REQUEST_ID_HEADER=true node .open-next/server-functions/default/index.mjs",
     "dev": "next dev --turbopack --port 3001",
     "build": "next build",
     "start": "next start --port 3001",
@@ -13,12 +14,12 @@
   },
   "dependencies": {
     "@example/shared": "workspace:*",
-    "@opennextjs/aws": "workspace:*",
     "next": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:"
   },
   "devDependencies": {
+    "@opennextjs/aws": "workspace:*",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",

examples/experimental/open-next.config.local.ts

@@ -0,0 +1,24 @@
+import type { OpenNextConfig } from "@opennextjs/aws/types/open-next.js";
+
+export default {
+  default: {
+    override: {
+      wrapper: "express-dev",
+      converter: "node",
+      incrementalCache: "fs-dev",
+      queue: "direct",
+      tagCache: "fs-dev-nextMode",
+    },
+  },
+
+  imageOptimization: {
+    override: {
+      wrapper: "dummy",
+      converter: "dummy",
+    },
+    loader: "fs-dev",
+  },
+
+  // You can override the build command here so that you don't have to rebuild next every time you make a change
+  //buildCommand: "echo 'No build command'",
+} satisfies OpenNextConfig;

examples/experimental/package.json

@@ -4,6 +4,8 @@
   "private": true,
   "scripts": {
     "openbuild": "node ../../packages/open-next/dist/index.js build",
+    "openbuild:local": "node ../../packages/open-next/dist/index.js build --config-path open-next.config.local.ts",
+    "openbuild:local:start": "PORT=3004 node .open-next/server-functions/default/index.mjs",
     "dev": "next dev --turbopack --port 3004",
     "build": "next build",
     "start": "next start --port 3004",
@@ -19,6 +21,7 @@
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "typescript": "catalog:"
+    "typescript": "catalog:",
+    "@opennextjs/aws": "workspace:*"
   }
 }

examples/pages-router/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "openbuild": "node ../../packages/open-next/dist/index.js build --build-command \"npx turbo build\"",
     "openbuild:local": "node ../../packages/open-next/dist/index.js build --config-path open-next.config.local.ts",
+    "openbuild:local:start": "PORT=3002 node .open-next/server-functions/default/index.mjs",
     "dev": "next dev --turbopack --port 3002",
     "build": "next build",
     "start": "next start --port 3002",

packages/open-next/src/build/createImageOptimizationBundle.ts

@@ -1,5 +1,6 @@
 import fs from "node:fs";
 import { createRequire } from "node:module";
+import os from "node:os";
 import path from "node:path";
 
 import logger from "../logger.js";
@@ -112,12 +113,17 @@ export async function createImageOptimizationBundle(
 
   const sharpVersion = process.env.SHARP_VERSION ?? "0.32.6";
 
+  // In development, we want to use the local machine settings
+  const isDev = config.imageOptimization?.loader === "fs-dev";
+
   installDependencies(
     outputPath,
     config.imageOptimization?.install ?? {
       packages: [`sharp@${sharpVersion}`],
-      // By not specifying an arch, `npm install` will choose one for us (i.e. our system one)
-      arch: config.imageOptimization?.loader === "fs-dev" ? undefined : "arm64",
+      // By not specifying an arch in dev, `npm install` will choose one for us (i.e. our system one)
+      arch: isDev ? undefined : "arm64",
+      // Use the local platform in dev
+      os: isDev ? os.platform() : "linux",
       nodeVersion: "18",
       libc: "glibc",
     },

packages/open-next/src/build/installDeps.ts

@@ -34,9 +34,10 @@ export function installDependencies(
     const libcOption = installOptions.libc
       ? `--libc=${installOptions.libc}`
       : "";
+    const osOption = installOptions.os ? `--os=${installOptions.os}` : "linux";
 
     const additionalArgs = installOptions.additionalArgs ?? "";
-    const installCommand = `npm install --os=linux ${archOption} ${targetOption} ${libcOption} ${additionalArgs} ${installOptions.packages.join(" ")}`;
+    const installCommand = `npm install ${osOption} ${archOption} ${targetOption} ${libcOption} ${additionalArgs} ${installOptions.packages.join(" ")}`;
     execSync(installCommand, {
       stdio: "pipe",
       cwd: tempInstallDir,

packages/open-next/src/types/open-next.ts

@@ -296,18 +296,15 @@ export interface InstallOptions {
    * ```
    */
   packages: string[];
-  /**
-   * @default undefined
-   */
+  /** @default undefined */
   arch?: "x64" | "arm64";
-  /**
-   * @default undefined
-   */
+  /** @default undefined */
   nodeVersion?: string;
-  /**
-   * @default undefined
-   */
+  /** @default undefined */
   libc?: "glibc" | "musl";
+  /** @default "linux" */
+  os?: string;
+
   /**
    * @default undefined
    * Additional arguments to pass to the install command (i.e. npm install)