feat: migrate to cloudflare pages and vite (Work in progress)

.node-version

@@ -0,0 +1 @@
+20.14

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

app/analytics/collect.test.ts

@@ -43,8 +43,8 @@ describe("collectRequestHandler", () => {
         const env = {
             WEB_COUNTER_AE: {
                 writeDataPoint: vi.fn(),
-            } as CFAnalyticsEngine,
-        } as Environment;
+            } as AnalyticsEngineDataset,
+        } as Env;
 
         // @ts-expect-error - we're mocking the request object
         const request = httpMocks.createRequest(defaultRequestParams);
@@ -80,8 +80,8 @@ describe("collectRequestHandler", () => {
         const env = {
             WEB_COUNTER_AE: {
                 writeDataPoint: vi.fn(),
-            } as CFAnalyticsEngine,
-        } as Environment;
+            } as AnalyticsEngineDataset,
+        } as Env;
 
         // @ts-expect-error - we're mocking the request object
         const request = httpMocks.createRequest(generateRequestParams({}));
@@ -102,8 +102,8 @@ describe("collectRequestHandler", () => {
         const env = {
             WEB_COUNTER_AE: {
                 writeDataPoint: vi.fn(),
-            } as CFAnalyticsEngine,
-        } as Environment;
+            } as AnalyticsEngineDataset,
+        } as Env;
 
         const request = httpMocks.createRequest(
             // @ts-expect-error - we're mocking the request object
@@ -130,8 +130,8 @@ describe("collectRequestHandler", () => {
         const env = {
             WEB_COUNTER_AE: {
                 writeDataPoint: vi.fn(),
-            } as CFAnalyticsEngine,
-        } as Environment;
+            } as AnalyticsEngineDataset,
+        } as Env;
 
         // intentionally set system time as 00:15:00
         // if the user last visited ~30 minutes ago, that occurred during
@@ -164,8 +164,8 @@ describe("collectRequestHandler", () => {
         const env = {
             WEB_COUNTER_AE: {
                 writeDataPoint: vi.fn(),
-            } as CFAnalyticsEngine,
-        } as Environment;
+            } as AnalyticsEngineDataset,
+        } as Env;
 
         const request = httpMocks.createRequest(
             // @ts-expect-error - we're mocking the request object
@@ -192,8 +192,8 @@ describe("collectRequestHandler", () => {
         const env = {
             WEB_COUNTER_AE: {
                 writeDataPoint: vi.fn(),
-            } as CFAnalyticsEngine,
-        } as Environment;
+            } as AnalyticsEngineDataset,
+        } as Env;
 
         const request = httpMocks.createRequest(
             // @ts-expect-error - we're mocking the request object

app/analytics/collect.ts

@@ -51,7 +51,7 @@ function extractParamsFromQueryString(requestUrl: string): {
     return params;
 }
 
-export function collectRequestHandler(request: Request, env: Environment) {
+export function collectRequestHandler(request: Request, env: Env) {
     const params = extractParamsFromQueryString(request.url);
 
     const userAgent = request.headers.get("user-agent") || undefined;
@@ -130,7 +130,7 @@ interface DataPoint {
 // More here: https://developers.cloudflare.com/analytics/analytics-engine/get-started/#limits
 
 export function writeDataPoint(
-    analyticsEngine: CFAnalyticsEngine,
+    analyticsEngine: AnalyticsEngineDataset,
     data: DataPoint,
 ) {
     const datapoint = {

app/entry.server.tsx

@@ -6,7 +6,7 @@
 
 import type { AppLoadContext, EntryContext } from "@remix-run/cloudflare";
 import { RemixServer } from "@remix-run/react";
-import isbot from "isbot";
+import { isbot } from "isbot";
 import { renderToReadableStream } from "react-dom/server";
 
 export default async function handleRequest(

app/root.tsx

@@ -1,36 +1,39 @@
-import styles from "./globals.css";
+import styles from "./globals.css?url";
 import {
     json,
     LoaderFunctionArgs,
     type LinksFunction,
 } from "@remix-run/cloudflare";
-import { cssBundleHref } from "@remix-run/css-bundle";
+
 import {
+    isRouteErrorResponse,
     Links,
-    LiveReload,
     Meta,
     Outlet,
     Scripts,
     ScrollRestoration,
-    useLoaderData,
+    useRouteError,
+    useRouteLoaderData,
 } from "@remix-run/react";
 
-export const links: LinksFunction = () => [
-    { rel: "stylesheet", href: styles },
-    ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
-];
+export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
 
 export const loader = ({ context, request }: LoaderFunctionArgs) => {
     const url = new URL(request.url);
     return json({
-        version: context.env.VERSION,
+        version: context.cloudflare.env.CF_PAGES_COMMIT_SHA,
         origin: url.origin,
         url: request.url,
     });
 };
 
-export default function App() {
-    const data = useLoaderData<typeof loader>();
+export const Layout = ({ children }: { children: React.ReactNode }) => {
+    const data = useRouteLoaderData<typeof loader>("root") ?? {
+        version: "unknown",
+        origin: "counterscale.dev",
+        url: "https://counterscale.dev/",
+    };
+    // const error = useRouteError();
 
     return (
         <html lang="en">
@@ -111,7 +114,7 @@ export default function App() {
                         </nav>
                     </header>
                     <main role="main" className="w-full">
-                        <Outlet />
+                        {children}
                     </main>
 
                     <footer className="py-4 flex justify-end text-s">
@@ -127,7 +130,6 @@ export default function App() {
                 </div>
                 <ScrollRestoration />
                 <Scripts />
-                <LiveReload />
                 <script
                     dangerouslySetInnerHTML={{
                         __html: "window.counterscale = {'q': [['set', 'siteId', 'counterscale-dev'], ['trackPageview']] };",
@@ -137,4 +139,30 @@ export default function App() {
             </body>
         </html>
     );
+};
+
+export default function App() {
+    return <Outlet />;
 }
+
+export const ErrorBoundary = () => {
+    const error = useRouteError();
+
+    if (isRouteErrorResponse(error)) {
+        return (
+            <>
+                <h1>
+                    {error.status} {error.statusText}
+                </h1>
+                <p>{error.data}</p>
+            </>
+        );
+    }
+
+    return (
+        <>
+            <h1>Error!</h1>
+            <p>{(error as { message?: string })?.message ?? "Unknown error"}</p>
+        </>
+    );
+};

app/routes/admin-redirect.tsx

@@ -2,6 +2,6 @@ import { LoaderFunctionArgs, redirect } from "@remix-run/cloudflare";
 
 export const loader = async ({ context }: LoaderFunctionArgs) => {
     return redirect(
-        `https://dash.cloudflare.com/${context.env.CF_ACCOUNT_ID}/workers/services/view/counterscale/production`,
+        `https://dash.cloudflare.com/${context.cloudflare.env.CF_ACCOUNT_ID}/workers/services/view/counterscale/production`,
     );
 };

app/routes/collect-beta.tsx

@@ -0,0 +1,6 @@
+import { LoaderFunctionArgs } from "@remix-run/cloudflare";
+import { collectRequestHandler } from "~/analytics/collect";
+
+export async function loader({ request, context }: LoaderFunctionArgs) {
+    return collectRequestHandler(request, context.cloudflare.env);
+}

app/routes/dashboard.test.tsx

@@ -51,10 +51,12 @@ describe("Dashboard route", () => {
                             "testAccountId",
                             "testApiToken",
                         ),
-                        env: {
-                            VERSION: "",
-                            CF_BEARER_TOKEN: "",
-                            CF_ACCOUNT_ID: "",
+                        cloudflare: {
+                            // @ts-expect-error we don't need to provide all the properties of the cloudflare object
+                            env: {
+                                CF_BEARER_TOKEN: "",
+                                CF_ACCOUNT_ID: "",
+                            },
                         },
                     },
                     // @ts-expect-error we don't need to provide all the properties of the request object
@@ -79,10 +81,13 @@ describe("Dashboard route", () => {
                         "testAccountId",
                         "testApiToken",
                     ),
-                    env: {
-                        VERSION: "",
-                        CF_BEARER_TOKEN: "fake",
-                        CF_ACCOUNT_ID: "fake",
+                    cloudflare: {
+                        // @ts-expect-error we don't need to provide all the properties of the cloudflare object
+                        env: {
+                            CF_BEARER_TOKEN: "fake",
+                            CF_ACCOUNT_ID: "fake",
+                        },
+                        cf: {} as any,
                     },
                 },
                 // @ts-expect-error we don't need to provide all the properties of the request object
@@ -112,10 +117,12 @@ describe("Dashboard route", () => {
                         "testAccountId",
                         "testApiToken",
                     ),
-                    env: {
-                        VERSION: "",
-                        CF_BEARER_TOKEN: "fake",
-                        CF_ACCOUNT_ID: "fake",
+                    cloudflare: {
+                        // @ts-expect-error we don't need to provide all the properties of the cloudflare object
+                        env: {
+                            CF_BEARER_TOKEN: "fake",
+                            CF_ACCOUNT_ID: "fake",
+                        },
                     },
                 },
                 // @ts-expect-error we don't need to provide all the properties of the request object
@@ -165,10 +172,13 @@ describe("Dashboard route", () => {
                         "testAccountId",
                         "testApiToken",
                     ),
-                    env: {
-                        VERSION: "",
-                        CF_BEARER_TOKEN: "fake",
-                        CF_ACCOUNT_ID: "fake",
+                    cloudflare: {
+                        // @ts-expect-error we don't need to provide all the properties of the cloudflare object
+                        env: {
+                            CF_BEARER_TOKEN: "fake",
+                            CF_ACCOUNT_ID: "fake",
+                        },
+                        cf: {} as any,
                     },
                 },
                 // @ts-expect-error we don't need to provide all the properties of the request object
@@ -213,10 +223,13 @@ describe("Dashboard route", () => {
                         "testAccountId",
                         "testApiToken",
                     ),
-                    env: {
-                        VERSION: "",
-                        CF_BEARER_TOKEN: "fake",
-                        CF_ACCOUNT_ID: "fake",
+                    cloudflare: {
+                        // @ts-expect-error we don't need to provide all the properties of the cloudflare object
+                        env: {
+                            CF_BEARER_TOKEN: "fake",
+                            CF_ACCOUNT_ID: "fake",
+                        },
+                        cf: {} as any,
                     },
                 },
                 // @ts-expect-error we don't need to provide all the properties of the request object

app/routes/dashboard.tsx

@@ -15,8 +15,6 @@ import {
     useSearchParams,
 } from "@remix-run/react";
 
-import { AnalyticsEngineAPI } from "../analytics/query";
-
 import { ReferrerCard } from "./resources.referrer";
 import { PathsCard } from "./resources.paths";
 import { BrowserCard } from "./resources.browser";
@@ -35,26 +33,16 @@ export const meta: MetaFunction = () => {
 
 const MAX_RETENTION_DAYS = 90;
 
-declare module "@remix-run/server-runtime" {
-    export interface AppLoadContext {
-        analyticsEngine: AnalyticsEngineAPI;
-        env: {
-            VERSION: string;
-            CF_BEARER_TOKEN: string;
-            CF_ACCOUNT_ID: string;
-        };
-    }
-}
-
 export const loader = async ({ context, request }: LoaderFunctionArgs) => {
-    if (!context.env.CF_BEARER_TOKEN || !context.env.CF_ACCOUNT_ID) {
+    // NOTE: probably duped from getLoadContext / need to de-duplicate
+    if (
+        !context.cloudflare.env.CF_BEARER_TOKEN ||
+        !context.cloudflare.env.CF_ACCOUNT_ID
+    ) {
         throw new Error("Missing Cloudflare credentials");
     }
 
-    const analyticsEngine = new AnalyticsEngineAPI(
-        context.env.CF_ACCOUNT_ID,
-        context.env.CF_BEARER_TOKEN,
-    );
+    const { analyticsEngine } = context;
 
     const url = new URL(request.url);
 
@@ -81,7 +69,7 @@ export const loader = async ({ context, request }: LoaderFunctionArgs) => {
     const siteId = url.searchParams.get("site") || "";
     const actualSiteId = siteId == "@unknown" ? "" : siteId;
 
-    const tz = context.requestTimezone as string;
+    const tz = context.cloudflare.cf.timezone as string;
 
     // initiate requests to AE in parallel
 

app/routes/resources.browser.tsx

@@ -10,7 +10,7 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
     const { analyticsEngine } = context;
 
     const { interval, site, page = 1 } = paramsFromUrl(request.url);
-    const tz = context.requestTimezone as string;
+    const tz = context.cloudflare.cf.timezone as string;
 
     return json({
         countsByProperty: await analyticsEngine.getCountByBrowser(

app/routes/resources.country.tsx

@@ -29,7 +29,7 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
     const { analyticsEngine } = context;
 
     const { interval, site, page = 1 } = paramsFromUrl(request.url);
-    const tz = context.requestTimezone as string;
+    const tz = context.cloudflare.cf.timezone as string;
 
     const countByCountry = await analyticsEngine.getCountByCountry(
         site,

app/routes/resources.device.tsx

@@ -10,7 +10,7 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
     const { analyticsEngine } = context;
 
     const { interval, site, page = 1 } = paramsFromUrl(request.url);
-    const tz = context.requestTimezone as string;
+    const tz = context.cloudflare.cf.timezone as string;
 
     return json({
         countsByProperty: await analyticsEngine.getCountByDevice(

app/routes/resources.paths.tsx

@@ -10,7 +10,7 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
     const { analyticsEngine } = context;
 
     const { interval, site, page = 1 } = paramsFromUrl(request.url);
-    const tz = context.requestTimezone as string;
+    const tz = context.cloudflare.cf.timezone as string;
 
     return json({
         countsByProperty: await analyticsEngine.getCountByPath(

app/routes/resources.referrer.tsx

@@ -10,7 +10,7 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
     const { analyticsEngine } = context;
 
     const { interval, site, page = 1 } = paramsFromUrl(request.url);
-    const tz = context.requestTimezone as string;
+    const tz = context.cloudflare.cf.timezone as string;
 
     return json({
         countsByProperty: await analyticsEngine.getCountByReferrer(

env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/cloudflare" />
+/// <reference types="vite/client" />