Dev server usage cleanups (liveblocks#3095)

Co-authored-by: Chris Nicholas <ctnicholasdev@gmail.com>

Author: nvie

.github/workflows/tests.yml

@@ -279,9 +279,6 @@ jobs:
 
     timeout-minutes: 60
 
-    env:
-      LIVEBLOCKS_PUBLIC_KEY: ${{ secrets.E2E_TEST_LIVEBLOCKS_PUBLIC_KEY }}
-
     steps:
       - name: Checkout
         if: needs.check_for_code_changes.outputs.changes == 'true'
@@ -295,6 +292,10 @@ jobs:
           cache: npm
           cache-dependency-path: "**/package-lock.json"
 
+      - name: Install Bun
+        if: needs.check_for_code_changes.outputs.changes == 'true'
+        uses: oven-sh/setup-bun@v1
+
       - name: Install dependencies
         if: needs.check_for_code_changes.outputs.changes == 'true'
         run: npm install

docs/pages/tools/dev-server.mdx

@@ -212,6 +212,45 @@ curl http://localhost:1153/v2/* \
   -H 'Authorization: Bearer sk_localdev'
 ```
 
+## Quick local testing
+
+When your unit tests need the Liveblocks dev server to be running, you can use
+`--cmd "vitest run"` (or whichever test command you use) to run your tests in a
+temporary, ephemeral, dev server instance.
+
+This mode will:
+
+1. Start a fresh, empty, dev server instance.
+2. Run your unit tests.
+3. Stop the dev server.
+
+Example output:
+
+```bash
+npx liveblocks dev --cmd 'vitest run'
+Starting the Liveblocks dev server...
+
+Liveblocks dev server running at http://localhost:1153
+Server logs: /tmp/liveblocks-dev-XXXXXX/server.log
+
+✓ src/__tests__/your-unit-test.test.ts (28 tests) 40ms
+
+Test Files  1 passed (1)
+      Tests  28 passed (28)
+   Start at  11:24:51
+   Duration  0.5s
+
+Liveblocks dev server shut down
+```
+
+We recommend:
+
+1. `npx liveblocks dev` for manual testing and development, which retains data
+   between runs in the `.liveblocks/` folder.
+2. `npx liveblocks dev --cmd "vitest run"` for locally running your unit tests
+   against a fresh instance (your local data in `.liveblocks/` won't be affected
+   by your unit tests).
+
 ## Continuous Integration (CI) testing
 
 You can use the dev server in CI environments by setting up a test environment

package-lock.json

@@ -335,25 +335,12 @@ test(
               throw new Error(
                 "Consistency violation! Clients disagree on final state of LiveList."
               );
-            } else {
-              // console.log(
-              //   "---------------------------------------------------"
-              // );
-              // console.log("Commands executed:");
-              // for (const c of commands) {
-              //   console.log("  - ", c.toString());
-              // }
-              // console.log("Final consistent state:", JSON.stringify(list1));
-              // console.log("");
-              // console.log(
-              //   "---------------------------------------------------"
-              // );
             }
           }
         ),
         {
-          // Run as many tests as you can run in 30 seconds
-          interruptAfterTimeLimit: 30_000,
+          // Run as many tests as you can run in 20 seconds
+          interruptAfterTimeLimit: 20_000,
           numRuns: Number.POSITIVE_INFINITY,
           verbose: true,
         }

packages/liveblocks-core/e2e/list-property.test.ts

@@ -1,7 +1,3 @@
-import "dotenv/config";
-
-import fetch from "node-fetch";
-import type { URL } from "url";
 import { expect, onTestFinished } from "vitest";
 import WebSocket from "ws";
 
@@ -19,9 +15,7 @@ import { mapValues, wait, withTimeout } from "../src/lib/utils";
 import type { BaseUserMeta } from "../src/protocol/BaseUserMeta";
 import type { Room, RoomEventMessage } from "../src/room";
 
-const BASE_URL =
-  process.env.NEXT_PUBLIC_LIVEBLOCKS_BASE_URL ?? "https://api.liveblocks.io";
-console.log(`Running against Liveblocks base URL: ${BASE_URL}`);
+const BASE_URL = "http://localhost:1154";
 
 async function initializeRoomForTest<
   P extends JsonObject = JsonObject,
@@ -31,12 +25,6 @@ async function initializeRoomForTest<
   TM extends BaseMetadata = BaseMetadata,
   CM extends BaseMetadata = BaseMetadata,
 >(roomId: string, initialPresence: NoInfr<P>, initialStorage: NoInfr<S>) {
-  const publicApiKey = process.env.LIVEBLOCKS_PUBLIC_KEY;
-
-  if (!publicApiKey) {
-    throw new Error('Environment variable "LIVEBLOCKS_PUBLIC_KEY" is missing.');
-  }
-
   let ws: PausableWebSocket | null = null;
 
   class PausableWebSocket extends WebSocket {
@@ -80,11 +68,8 @@ async function initializeRoomForTest<
 
   const client = createClient<U>({
     __DANGEROUSLY_disableThrottling: true,
-    enableDebugLogging: true,
-    publicApiKey,
+    publicApiKey: "pk_localdev",
     polyfills: {
-      // @ts-expect-error fetch from Node isn't compatible?
-      fetch,
       WebSocket: PausableWebSocket,
     },
     baseUrl: BASE_URL,
@@ -193,7 +178,7 @@ export function prepareTestsConflicts<S extends LsonObject>(
           // Unfortunately there is no public API to know this has happened. It
           // typically happens within ~5 ms, so we'll wait a multitude of that
           // here, just to be sure.
-          setTimeout(resolve, 150);
+          setTimeout(resolve, 50);
         }
         beacons.delete(event.beacon);
       }
@@ -338,7 +323,7 @@ export function prepareSingleClientTest<S extends LsonObject>(
 
     // Waiting until every messages are received by all clients.
     // We don't have a public way to know if everything has been received so we have to rely on time
-    await wait(600);
+    await wait(200);
 
     actor.ws.pause();
 
@@ -354,7 +339,7 @@ export function prepareSingleClientTest<S extends LsonObject>(
           actor.ws.resume();
           // Waiting until every messages are received by all clients.
           // We don't have a public way to know if everything has been received so we have to rely on time
-          await wait(600);
+          await wait(200);
         },
       });
       actor.leave();

packages/liveblocks-core/e2e/utils.ts

@@ -41,7 +41,7 @@
     "test:ci": "NODE_OPTIONS=\"--no-deprecation\" vitest run",
     "test:types": "ls test-d/* | xargs -n1 tsd --files",
     "test:watch": "NODE_OPTIONS=\"--no-deprecation\" vitest",
-    "test:e2e": "NODE_OPTIONS=\"--no-deprecation\" vitest run --config=./vitest.config.e2e.ts",
+    "test:e2e": "npx liveblocks dev -p 1154 -c 'vitest run --config=./vitest.config.e2e.ts'",
     "test:deps": "depcruise src --exclude __tests__",
     "showdeps": "depcruise src --include-only '^src' --exclude='__tests__' --output-type dot | dot -T svg > /tmp/dependency-graph.svg && open /tmp/dependency-graph.svg",
     "showdeps:high-level": "depcruise src --include-only '^src' --exclude='(^src/index.ts|shallow.ts|__tests__)' --collapse='^src/(refs|lib|compat|types|crdts|protocol)' --output-type dot | dot -T svg > /tmp/dependency-graph.svg && open /tmp/dependency-graph.svg"
@@ -52,7 +52,6 @@
     "@liveblocks/query-parser": "^0.1.1",
     "@liveblocks/vitest-config": "*",
     "@types/ws": "^8.5.10",
-    "dotenv": "^16.4.5",
     "eslint-plugin-rulesdir": "^0.2.2",
     "fast-check": "^4.3.0",
     "msw": "^2.10.4",

packages/liveblocks-core/package.json

@@ -588,6 +588,14 @@ function getBaseUrl(baseUrl?: string | undefined): string {
   }
 }
 
+function isLocalhost(url: string): boolean {
+  try {
+    return new URL(url).hostname === "localhost";
+  } catch {
+    return false;
+  }
+}
+
 /**
  * Create a client that will be responsible to communicate with liveblocks servers.
  *
@@ -617,8 +625,10 @@ export function createClient<U extends BaseUserMeta = DU>(
   options: ClientOptions<U>
 ): Client<U> {
   const clientOptions = options;
+  const baseUrl = getBaseUrl(clientOptions.baseUrl);
   const throttleDelay =
     process.env.NODE_ENV !== "production" &&
+    isLocalhost(baseUrl) &&
     clientOptions.__DANGEROUSLY_disableThrottling
       ? 0
       : getThrottle(clientOptions.throttle ?? DEFAULT_THROTTLE);
@@ -628,7 +638,6 @@ export function createClient<U extends BaseUserMeta = DU>(
   const backgroundKeepAliveTimeout = getBackgroundKeepAliveTimeout(
     clientOptions.backgroundKeepAliveTimeout
   );
-  const baseUrl = getBaseUrl(clientOptions.baseUrl);
 
   const currentUserId = new Signal<string | undefined>(undefined);
 

packages/liveblocks-core/src/client.ts

@@ -70,10 +70,10 @@
     "format": "eslint --fix src/; stylelint --fix src/styles/; prettier --write src/",
     "lint": "eslint src/; stylelint src/styles/",
     "lint:package": "publint --strict && attw --pack",
-    "test": "./scripts/run-with-dev-server.sh --port 1154",
-    "test:ci": "NODE_OPTIONS=\"--no-deprecation\" vitest run",
+    "test": "npx liveblocks dev -c 'vitest run'",
+    "test:ci": "vitest run",
     "test:types": "ls test-d/* | xargs -n1 tsd --files",
-    "test:watch": "NODE_OPTIONS=\"--no-deprecation\" vitest"
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",

packages/liveblocks-react-ui/package.json

@@ -29,9 +29,9 @@
     "format": "(eslint --fix src/ || true) && prettier --write src/",
     "lint": "eslint src/",
     "lint:package": "publint --strict && attw --pack",
-    "test": "./scripts/run-with-dev-server.sh --port 1154",
-    "test:ci": "NODE_OPTIONS=\"--no-deprecation\" vitest run",
-    "test:watch": "NODE_OPTIONS=\"--no-deprecation\" vitest"
+    "test": "npx liveblocks dev -c 'vitest run'",
+    "test:ci": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@liveblocks/client": "3.14.0",