fix server side events for remix actions (#112)

* Fix server side events for remix * Add remix example * Update packages/web/src/server/index.ts Co-authored-by: Chris <7249920+chriswdmr@users.noreply.github.com> --------- Co-authored-by: Chris <7249920+chriswdmr@users.noreply.github.com>
vercel · Oct 12, 2023 · ab1213b · ab1213b
1 parent c57f273
commit ab1213b
Show file tree

Hide file tree

Showing 14 changed files with 15,032 additions and 813 deletions.
diff --git a/apps/remix/.gitignore b/apps/remix/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+
+/build
+/public/build
+.env
+
diff --git a/apps/remix/README.md b/apps/remix/README.md
@@ -0,0 +1 @@
+# Remix Vercel Web Analytics Test
diff --git a/apps/remix/app/root.tsx b/apps/remix/app/root.tsx
@@ -0,0 +1,25 @@
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
diff --git a/apps/remix/app/routes/_index.tsx b/apps/remix/app/routes/_index.tsx
@@ -0,0 +1,24 @@
+import { json } from "@vercel/remix";
+import { Form, useActionData } from "@remix-run/react";
+import { track } from "@vercel/analytics/server";
+
+export const action = async () => {
+  await track("Server Action", { some: "data" });
+  return json({ success: true });
+};
+
+export default function Home() {
+  const data = useActionData<typeof action>();
+  return (
+    <main>
+      <h1>Vercel Web Analytics Demo</h1>
+      {data?.success ? (
+        <p>Success!</p>
+      ) : (
+        <Form method="POST" replace>
+          <button type="submit">Submit action</button>
+        </Form>
+      )}
+    </main>
+  );
+}
diff --git a/apps/remix/app/routes/health.tsx b/apps/remix/app/routes/health.tsx
@@ -0,0 +1,11 @@
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import { track } from "@vercel/analytics/server";
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const host =
+    request.headers.get("X-Forwarded-Host") ?? request.headers.get("host");
+
+  await track("Health", { host });
+
+  return new Response("OK");
+}
diff --git a/apps/remix/package.json b/apps/remix/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "remix-vercel-analytics",
+  "private": true,
+  "scripts": {
+    "build": "remix build",
+    "dev": "remix dev",
+    "format": "prettier -w .",
+    "start": "remix-serve build"
+  },
+  "prettier": {},
+  "dependencies": {
+    "@remix-run/node": "^2.0.1",
+    "@remix-run/react": "^2.0.1",
+    "@remix-run/serve": "^2.0.1",
+    "@remix-run/server-runtime": "^2.0.1",
+    "@vercel/analytics": "workspace:*",
+    "@vercel/remix": "2.0.1",
+    "isbot": "^3.6.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "^2.0.1",
+    "@remix-run/eslint-config": "^2.0.1",
+    "@types/eslint": "^8.4.10",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "autoprefixer": "^10.4.13",
+    "cross-env": "^7.0.3",
+    "postcss": "^8.4.18",
+    "prettier": "2.7.1",
+    "ts-node": "^10.9.1",
+    "tsconfig-paths": "^4.1.0",
+    "typescript": "^5.2.2"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}