Try and get self-hosted dashbaord built as daily precompile

.github/workflows/precompile.yml

@@ -6,7 +6,62 @@ on:
   workflow_dispatch:
 
 jobs:
-  release:
+  release_dashboard:
+    name: Build Convex Dashboard
+    runs-on: [self-hosted, aws, x64, xlarge]
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+
+      - name: Install just
+        uses: extractions/setup-just@v2
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: NPM install globals
+        run: npm ci --prefix scripts
+
+      - name: Rush install
+        run: |
+          just rush install
+
+      - name: Build dashboard dependencies
+        run: |
+          just rush build -T dashboard-self-hosted
+
+      - name: Build dashboard
+        run: |
+          cd npm-packages/dashboard-self-hosted && npm run build:export
+
+      - name: Zip output
+        run: |
+          cd npm-packages/dashboard-self-hosted/out && zip -r ../../../dashboard.zip .
+
+      - name: Precompute release name
+        id: release_name
+        shell: bash
+        run: |
+          echo "RELEASE_NAME=$(date +'%Y-%m-%d')-$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
+
+      - name: Create Upload Precompiled Artifacts
+        id: create_release
+        uses: softprops/action-gh-release@v2
+        with:
+          files: |
+            dashboard.zip
+          tag_name: precompiled-${{ steps.release_name.outputs.RELEASE_NAME }}
+          name: Precompiled ${{ steps.release_name.outputs.RELEASE_NAME }}
+          draft: false
+          prerelease: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  release_backend:
     strategy:
       fail-fast: false
       matrix:

npm-packages/dashboard-self-hosted/next.config.js

@@ -31,11 +31,13 @@ const securityHeaders = [
   },
 ];
 
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  swcMinify: true,
-  transpilePackages: [],
-  reactStrictMode: true,
+const optionsForExport = {
+  output: "export",
+  images: {
+    unoptimized: true,
+  },
+};
+const optionsForBuild = {
   output: "standalone",
   async headers() {
     return [
@@ -46,6 +48,14 @@ const nextConfig = {
       },
     ];
   },
+};
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  swcMinify: true,
+  transpilePackages: [],
+  reactStrictMode: true,
+  ...(process.env.BUILD_TYPE === "export" ? optionsForExport : optionsForBuild),
   experimental: {
     webpackBuildWorker: true,
   },
@@ -103,4 +113,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = nextConfig;

npm-packages/dashboard-self-hosted/package.json

@@ -6,6 +6,7 @@
     "dev": "npm run build:generated && next dev --port 6790",
     "build": "npm run build:generated && next build",
     "build:generated": "python3 ../dashboard-common/scripts/build-convexServerTypes.py",
+    "build:export": "BUILD_TYPE=export NEXT_PUBLIC_DEFAULT_LIST_DEPLOYMENTS_API_PORT=6791 npm run build",
     "start": "next start -p 6791",
     "lint": "next lint --max-warnings 0 --dir src/ && tsc",
     "lint:fix": "next lint --fix --max-warnings 0 --dir src/"

npm-packages/dashboard-self-hosted/src/components/DeploymentCredentialsForm.tsx

@@ -0,0 +1,66 @@
+import { EnterIcon, EyeNoneIcon, EyeOpenIcon } from "@radix-ui/react-icons";
+import { Button } from "dashboard-common/elements/Button";
+import { TextInput } from "dashboard-common/elements/TextInput";
+import { useState } from "react";
+
+export function DeploymentCredentialsForm({
+  onSubmit,
+  initialAdminKey,
+  initialDeploymentUrl,
+}: {
+  onSubmit: (adminKey: string, deploymentUrl: string) => Promise<void>;
+  initialAdminKey: string | null;
+  initialDeploymentUrl: string | null;
+}) {
+  const [draftAdminKey, setDraftAdminKey] = useState<string>(
+    initialAdminKey ?? "",
+  );
+  const [draftDeploymentUrl, setDraftDeploymentUrl] = useState<string>(
+    initialDeploymentUrl ?? "",
+  );
+  const [showKey, setShowKey] = useState(false);
+  return (
+    <form
+      className="flex w-[30rem] flex-col gap-2"
+      onSubmit={(e) => {
+        e.preventDefault();
+        void onSubmit(draftAdminKey, draftDeploymentUrl);
+      }}
+    >
+      <TextInput
+        id="deploymentUrl"
+        label="Deployment URL"
+        value={draftDeploymentUrl}
+        placeholder="Enter the deployment URL"
+        onChange={(e) => {
+          setDraftDeploymentUrl(e.target.value);
+        }}
+      />
+      <TextInput
+        id="adminKey"
+        label="Admin Key"
+        type={showKey ? "text" : "password"}
+        Icon={showKey ? EyeNoneIcon : EyeOpenIcon}
+        outerClassname="w-[30rem]"
+        placeholder="Enter the admin key for this deployment"
+        value={draftAdminKey}
+        action={() => {
+          setShowKey(!showKey);
+        }}
+        description="The admin key is required every time you open the dashboard."
+        onChange={(e) => {
+          setDraftAdminKey(e.target.value);
+        }}
+      />
+      <Button
+        type="submit"
+        icon={<EnterIcon />}
+        disabled={!draftAdminKey || !draftDeploymentUrl}
+        size="xs"
+        className="ml-auto w-fit"
+      >
+        Log In
+      </Button>
+    </form>
+  );
+}

npm-packages/dashboard-self-hosted/src/components/DeploymentList.tsx

@@ -0,0 +1,73 @@
+import { Button } from "dashboard-common/elements/Button";
+import { useEffect, useState } from "react";
+import { useLocalStorage } from "react-use";
+
+export type Deployment = {
+  name: string;
+  adminKey: string;
+  url: string;
+};
+
+export function DeploymentList({
+  listDeploymentsApiUrl,
+  onError,
+  onSelect,
+}: {
+  listDeploymentsApiUrl: string;
+  onError: (error: string) => void;
+  onSelect: (adminKey: string, deploymentUrl: string) => Promise<void>;
+}) {
+  const [lastStoredDeployment, setLastStoredDeployment] = useLocalStorage(
+    "lastDeployment",
+    "",
+  );
+  const [deployments, setDeployments] = useState<Deployment[]>([]);
+  useEffect(() => {
+    const f = async () => {
+      let resp: Response;
+      try {
+        resp = await fetch(listDeploymentsApiUrl);
+      } catch (e) {
+        onError(`Failed to fetch deployments: ${e}`);
+        return;
+      }
+      if (!resp.ok) {
+        const text = await resp.text();
+        onError(`Failed to fetch deployments: ${resp.statusText} ${text}`);
+        return;
+      }
+      let data: { deployments: Deployment[] };
+      try {
+        data = await resp.json();
+      } catch (e) {
+        onError(`Failed to parse deployments: ${e}`);
+        return;
+      }
+      setDeployments(data.deployments);
+      const lastDeployment = data.deployments.find(
+        (d: Deployment) => d.name === lastStoredDeployment,
+      );
+      if (lastDeployment) {
+        void onSelect(lastDeployment.adminKey, lastDeployment.url);
+      }
+    };
+    void f();
+  }, [listDeploymentsApiUrl, onError, onSelect, lastStoredDeployment]);
+  return (
+    <div className="flex flex-col gap-2">
+      <h3>Select a deployment:</h3>
+      {deployments.map((d) => (
+        <Button
+          key={d.name}
+          variant="neutral"
+          onClick={() => {
+            setLastStoredDeployment(d.name);
+            void onSelect(d.adminKey, d.url);
+          }}
+        >
+          {d.name}
+        </Button>
+      ))}
+    </div>
+  );
+}

npm-packages/dashboard-self-hosted/src/lib/checkDeploymentInfo.ts

@@ -0,0 +1,38 @@
+async function sleep(ms: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+const MAX_RETRIES = 3;
+const MAX_RETRIES_DELAY_MS = 500;
+
+export async function checkDeploymentInfo(
+  adminKey: string,
+  deploymentUrl: string
+): Promise<boolean | null> {
+  let retries = 0;
+  while (retries < MAX_RETRIES) {
+    try {
+      const resp = await fetch(new URL("/api/check_admin_key", deploymentUrl), {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Convex ${adminKey}`,
+          "Convex-Client": "dashboard-0.0.0",
+        },
+      });
+      if (resp.ok) {
+        return true;
+      }
+      if (resp.status === 404) {
+        return null;
+      }
+    } catch (e) {
+      // Do nothing
+    }
+    await sleep(MAX_RETRIES_DELAY_MS);
+    retries++;
+  }
+  return false;
+}