Add basic app

.github/workflows/playwright.yml

@@ -15,11 +15,9 @@ jobs:
           node-version: lts/*
       - name: Install dependencies
         run: npm install -g pnpm && pnpm install
-      - name: Run Playwright tests
-        run: pnpm e2e
-      - uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: api-playwright-report
-          path: next-apps/api/playwright-report/
-          retention-days: 30
+      - name: Install Playwright browsers
+        run: pnpm run install-playwright
+      - name: Run playwright tests (api)
+        run: pnpm -F api run e2e
+      - name: Run playwright tests (create-next-app)
+        run: pnpm -F create-next-app run e2e

README.md

@@ -10,7 +10,7 @@ This monorepo includes a POC to see if it is possible to get a Next.js applicati
 The repository contains two directories:
 
 - `builder` containing a package that can be used to build Cloudflare workers compatible output from Next.js applications
-- `next` containing Next.js application that use the above mentioned builder (currently it only contains `api`)
+- `examples` containing Next.js applications that use the above mentioned builder.
 
 ## How to try out/develop in the repository
 

TODO.md

@@ -0,0 +1,72 @@
+# POC
+
+## TODO
+
+- move the wrangler.toml to the templates
+- dependency graph
+
+DONE:
+
+- wrangler alias
+- figure out the assets
+- copy the template folders
+
+## Install
+
+- `npx create-next-app@latest <app-name> --use-npm` (use npm to avoid symlinks)
+- update next.config.mjs as follows
+
+  ```typescript
+  /** @type {import('next').NextConfig} */
+  const nextConfig = {
+  	output: "standalone",
+  	experimental: {
+  		serverMinification: false,
+  	},
+  };
+
+  export default nextConfig;
+  ```
+
+- add the following devDependency to the package.json:
+
+  ```json
+  "node-url": "npm:url@^0.11.4",
+  "wrangler": "^3.77.0"
+  ```
+
+- add a wrangler.toml int the generated app
+
+  ```toml
+  #:schema node_modules/wrangler/config-schema.json
+  name = "<app-name>"
+  main = ".worker-next/index.mjs"
+
+  compatibility_date = "2024-08-29"
+  compatibility_flags = ["nodejs_compat_v2"]
+  workers_dev = true
+  minify = false
+
+  # Use the new Workers + Assets to host the static frontend files
+  experimental_assets = { directory = ".worker-next/assets", binding = "ASSETS" }
+  ```
+
+- Build the builder
+
+  ```sh
+  pnpm --filter builder build:watch
+  ```
+
+- To build for workers:
+
+  - Build the next app once:
+
+    ```sh
+    node /path/to/poc-next/builder/dist/index.mjs && npx wrangler dev
+    ```
+
+  - Then you can skip building the next app
+
+    ```sh
+    SKIP_NEXT_APP_BUILD=1 node /path/to/poc-next/builder/dist/index.mjs && npx wrangler dev
+    ```

next/api/e2e-tests/base.spec.ts → examples/api/e2e-tests/base.spec.ts

@@ -3,14 +3,14 @@ import { test, expect } from "@playwright/test";
 test("the application's noop index page is visible and it allows navigating to the hello-world api route", async ({
 	page,
 }) => {
-	await page.goto("http://localhost:8770/");
+	await page.goto("/");
 	await expect(page.getByText("This application doesn't have")).toBeVisible();
 	await page.getByRole("link", { name: "/api/hello" }).click();
 	await expect(page.getByText("Hello World!")).toBeVisible();
 });
 
 test("the hello-world api route works as intended", async ({ page }) => {
-	const res = await fetch("http://localhost:8770/api/hello");
-	expect(res.headers.get("content-type")).toContain("text/plain");
+	const res = await page.request.get("/api/hello");
+	expect(res.headers()["content-type"]).toContain("text/plain");
 	expect(await res.text()).toEqual("Hello World!");
 });

next/api/package.json → examples/api/package.json

@@ -10,16 +10,15 @@
 		"build:worker": "builder",
 		"dev:worker": "wrangler dev --port 8770",
 		"preview:worker": "pnpm build:worker && pnpm dev:worker",
-		"pree2e": "playwright install --with-deps",
 		"e2e": "playwright test"
 	},
 	"dependencies": {
-		"builder": "workspace:*",
 		"next": "14.2.5",
 		"react": "^18",
 		"react-dom": "^18"
 	},
 	"devDependencies": {
+		"builder": "workspace:*",
 		"@playwright/test": "1.47.0",
 		"@types/node": "^22.2.0",
 		"node-url": "npm:url@^0.11.4",

next/api/playwright.config.ts → examples/api/playwright.config.ts

@@ -27,7 +27,7 @@ export default defineConfig({
 	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
 	use: {
 		/* Base URL to use in actions like `await page.goto('/')`. */
-		// baseURL: 'http://127.0.0.1:3000',
+		baseURL: "http://localhost:8770",
 
 		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
 		trace: "on-first-retry",

examples/create-next-app/.eslintrc.json

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

examples/create-next-app/.gitignore

@@ -0,0 +1,45 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# wrangler
+.wrangler
+
+# playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

examples/create-next-app/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## 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/app/building-your-application/deploying) for more details.

examples/create-next-app/e2e/base.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from "@playwright/test";
+
+test("the index page of the application shows the Next.js logo", async ({
+	page,
+}) => {
+	await page.goto("/");
+	await expect(page.getByAltText("Next.js logo")).toBeVisible();
+});

examples/create-next-app/e2e/playwright.config.ts

@@ -0,0 +1,80 @@
+import { defineConfig, devices } from "@playwright/test";
+
+declare const process: { env: Record<string, string> };
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: "./",
+	/* Run tests in files in parallel */
+	fullyParallel: true,
+	/* Fail the build on CI if you accidentally left test.only in the source code. */
+	forbidOnly: !!process.env.CI,
+	/* Retry on CI only */
+	retries: process.env.CI ? 2 : 0,
+	/* Opt out of parallel tests on CI. */
+	workers: process.env.CI ? 1 : undefined,
+	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
+	reporter: "html",
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		baseURL: "http://localhost:8771",
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: "on-first-retry",
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: "chromium",
+			use: { ...devices["Desktop Chrome"] },
+		},
+
+		{
+			name: "firefox",
+			use: { ...devices["Desktop Firefox"] },
+		},
+
+		{
+			name: "webkit",
+			use: { ...devices["Desktop Safari"] },
+		},
+
+		/* Test against mobile viewports. */
+		// {
+		//   name: 'Mobile Chrome',
+		//   use: { ...devices['Pixel 5'] },
+		// },
+		// {
+		//   name: 'Mobile Safari',
+		//   use: { ...devices['iPhone 12'] },
+		// },
+
+		/* Test against branded browsers. */
+		// {
+		//   name: 'Microsoft Edge',
+		//   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+		// },
+		// {
+		//   name: 'Google Chrome',
+		//   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+		// },
+	],
+
+	/* Run your local dev server before starting the tests */
+	webServer: {
+		command: "pnpm preview:worker",
+		url: "http://localhost:8771",
+		reuseExistingServer: !process.env.CI,
+	},
+});