test(cloudflare): Add e2e test for cloudflare pages

dev-packages/e2e-tests/test-applications/cloudflare-remix/.eslintrc.cjs

@@ -0,0 +1,84 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+  ignorePatterns: ["!**/.server", "!**/.client"],
+
+  // Base config
+  extends: ["eslint:recommended"],
+
+  overrides: [
+    // React
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      plugins: ["react", "jsx-a11y"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+        "import/resolver": {
+          typescript: {},
+        },
+      },
+    },
+
+    // Typescript
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+      ],
+    },
+
+    // Node
+    {
+      files: [".eslintrc.cjs"],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};

dev-packages/e2e-tests/test-applications/cloudflare-remix/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+
+/.cache
+/build
+.env
+.dev.vars
+
+.wrangler

dev-packages/e2e-tests/test-applications/cloudflare-remix/.npmrc

@@ -0,0 +1,2 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873

dev-packages/e2e-tests/test-applications/cloudflare-remix/README.md

@@ -0,0 +1,47 @@
+# Welcome to Remix + Cloudflare!
+
+- 📖 [Remix docs](https://remix.run/docs)
+- 📖 [Remix Cloudflare docs](https://remix.run/guides/vite#cloudflare)
+
+## Development
+
+Run the dev server:
+
+```sh
+npm run dev
+```
+
+To run Wrangler:
+
+```sh
+npm run build
+npm run start
+```
+
+## Typegen
+
+Generate types for your Cloudflare bindings in `wrangler.toml`:
+
+```sh
+npm run typegen
+```
+
+You will need to rerun typegen whenever you make changes to `wrangler.toml`.
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then, deploy your app to Cloudflare Pages:
+
+```sh
+npm run deploy
+```
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information.

dev-packages/e2e-tests/test-applications/cloudflare-remix/app/entry.client.tsx

@@ -0,0 +1,18 @@
+/**
+ * By default, Remix will handle hydrating your app on the client for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.client
+ */
+
+import { RemixBrowser } from "@remix-run/react";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>
+  );
+});

dev-packages/e2e-tests/test-applications/cloudflare-remix/app/entry.server.tsx

@@ -0,0 +1,43 @@
+/**
+ * By default, Remix will handle generating the HTTP Response for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.server
+ */
+
+import type { AppLoadContext, EntryContext } from "@remix-run/cloudflare";
+import { RemixServer } from "@remix-run/react";
+import { isbot } from "isbot";
+import { renderToReadableStream } from "react-dom/server";
+
+export default async function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+  // This is ignored so we can keep it in the template for visibility.  Feel
+  // free to delete this parameter in your app if you're not using it!
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  loadContext: AppLoadContext
+) {
+  const body = await renderToReadableStream(
+    <RemixServer context={remixContext} url={request.url} />,
+    {
+      signal: request.signal,
+      onError(error: unknown) {
+        // Log streaming rendering errors from inside the shell
+        console.error(error);
+        responseStatusCode = 500;
+      },
+    }
+  );
+
+  if (isbot(request.headers.get("user-agent") || "")) {
+    await body.allReady;
+  }
+
+  responseHeaders.set("Content-Type", "text/html");
+  return new Response(body, {
+    headers: responseHeaders,
+    status: responseStatusCode,
+  });
+}

dev-packages/e2e-tests/test-applications/cloudflare-remix/app/root.tsx

@@ -0,0 +1,30 @@
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+import "./tailwind.css";
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return <Outlet />;
+}

dev-packages/e2e-tests/test-applications/cloudflare-remix/app/routes/_index.tsx

@@ -0,0 +1,41 @@
+import type { MetaFunction } from "@remix-run/cloudflare";
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "New Remix App" },
+    {
+      name: "description",
+      content: "Welcome to Remix on Cloudflare!",
+    },
+  ];
+};
+
+export default function Index() {
+  return (
+    <div className="font-sans p-4">
+      <h1 className="text-3xl">Welcome to Remix on Cloudflare</h1>
+      <ul className="list-disc mt-4 pl-6 space-y-2">
+        <li>
+          <a
+            className="text-blue-700 underline visited:text-purple-900"
+            target="_blank"
+            href="https://remix.run/docs"
+            rel="noreferrer"
+          >
+            Remix Docs
+          </a>
+        </li>
+        <li>
+          <a
+            className="text-blue-700 underline visited:text-purple-900"
+            target="_blank"
+            href="https://developers.cloudflare.com/pages/framework-guides/deploy-a-remix-site/"
+            rel="noreferrer"
+          >
+            Cloudflare Pages Docs - Remix guide
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/cloudflare-remix/app/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

dev-packages/e2e-tests/test-applications/cloudflare-remix/functions/[[path]].ts

@@ -0,0 +1,13 @@
+import { createPagesFunctionHandler } from '@remix-run/cloudflare-pages';
+import { sentryPagesPlugin } from '@sentry/cloudflare';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - the server build file is generated by `remix vite:build`
+// eslint-disable-next-line import/no-unresolved
+import * as build from '../build/server';
+
+export const onRequest = [
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (context: any) => sentryPagesPlugin({ dsn: context.env.E2E_TEST_DSN })(context),
+  createPagesFunctionHandler({ build }),
+];

dev-packages/e2e-tests/test-applications/cloudflare-remix/load-context.ts

@@ -0,0 +1,17 @@
+import { type PlatformProxy } from "wrangler";
+
+// When using `wrangler.toml` to configure bindings,
+// `wrangler types` will generate types for those bindings
+// into the global `Env` interface.
+// Need this empty interface so that typechecking passes
+// even if no `wrangler.toml` exists.
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface Env {}
+
+type Cloudflare = Omit<PlatformProxy<Env>, "dispose">;
+
+declare module "@remix-run/cloudflare" {
+  interface AppLoadContext {
+    cloudflare: Cloudflare;
+  }
+}

dev-packages/e2e-tests/test-applications/cloudflare-remix/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "cloudflare-remix",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "build": "remix vite:build",
+    "deploy": "wrangler pages deploy ./build/client",
+    "dev": "remix vite:dev",
+    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
+    "start": "wrangler pages dev ./build/client --binding=E2E_TEST_DSN=$E2E_TEST_DSN --port=$PORT",
+    "typecheck": "tsc",
+    "typegen": "wrangler types",
+    "test:build": "pnpm install && npx playwright install && pnpm build",
+    "test:assert": "pnpm playwright test"
+  },
+  "dependencies": {
+    "@sentry/cloudflare": "latest || *",
+    "@remix-run/cloudflare": "^2.10.3",
+    "@remix-run/cloudflare-pages": "^2.10.3",
+    "@remix-run/react": "^2.10.3",
+    "isbot": "^4.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20240512.0",
+    "@sentry-internal/test-utils": "link:../../../test-utils",
+    "@playwright/test": "^1.44.1",
+    "@remix-run/dev": "^2.10.3",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.38.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.1.6",
+    "vite": "^5.1.0",
+    "vite-tsconfig-paths": "^4.2.1",
+    "wrangler": "3.57.1"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

dev-packages/e2e-tests/test-applications/cloudflare-remix/playwright.config.mjs

@@ -0,0 +1,7 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+
+const config = getPlaywrightConfig({
+  // startCommand: 'pnpm start',
+});
+
+export default config;

dev-packages/e2e-tests/test-applications/cloudflare-remix/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

dev-packages/e2e-tests/test-applications/cloudflare-remix/public/_headers

@@ -0,0 +1,4 @@
+/favicon.ico
+  Cache-Control: public, max-age=3600, s-maxage=3600
+/assets/*
+  Cache-Control: public, max-age=31536000, immutable

dev-packages/e2e-tests/test-applications/cloudflare-remix/public/_routes.json

@@ -0,0 +1,5 @@
+{
+  "version": 1,
+  "include": ["/*"],
+  "exclude": ["/favicon.ico", "/assets/*"]
+}