Allow tinylicious servers to be connected to within codespaces

Author: brrichards

examples/benchmarks/tablebench/src/azure.ts

@@ -13,6 +13,16 @@ import { SharedTree } from "@fluidframework/tree/legacy";
 import { generateTable } from "./data.js";
 import { Table } from "./tree/index.js";
 
+function getTinyliciousEndpoint(port = 7070): string {
+	if (typeof window !== "undefined") {
+		const match = /^(.+)-\d+\.(.+)$/.exec(window.location.hostname);
+		if (match) {
+			return `https://${match[1]}-${port}.${match[2]}`;
+		}
+	}
+	return `http://localhost:${port}`;
+}
+
 const userId = Math.random().toString(36).slice(2);
 
 const localConnectionConfig: AzureLocalConnectionConfig = {
@@ -21,7 +31,7 @@ const localConnectionConfig: AzureLocalConnectionConfig = {
 		id: userId,
 		name: `TestUser-${userId}`,
 	}),
-	endpoint: "http://localhost:7070",
+	endpoint: getTinyliciousEndpoint(),
 };
 
 const client = new AzureClient({ connection: localConnectionConfig });

examples/service-clients/azure-client/external-controller/src/fluid.ts

@@ -33,6 +33,16 @@ const userDetails: ICustomUserDetails = {
 // Define the server we will be using and initialize Fluid
 const useAzure = process.env.FLUID_CLIENT === "azure";
 
+function getTinyliciousEndpoint(port = 7070): string {
+	if (typeof window !== "undefined") {
+		const match = /^(.+)-\d+\.(.+)$/.exec(window.location.hostname);
+		if (match) {
+			return `https://${match[1]}-${port}.${match[2]}`;
+		}
+	}
+	return `http://localhost:${port}`;
+}
+
 const user = {
 	id: uuid(),
 	name: uuid(),
@@ -55,7 +65,7 @@ export const connectionConfig: AzureRemoteConnectionConfig | AzureLocalConnectio
 		: {
 				type: "local",
 				tokenProvider: new InsecureTokenProvider("fooBar", user),
-				endpoint: "http://localhost:7070",
+				endpoint: getTinyliciousEndpoint(),
 			};
 
 /**

examples/service-clients/azure-client/todo-list/src/fluid.ts

@@ -24,6 +24,16 @@ import { TodoItem, TodoList } from "./schema.js";
 // Define the server we will be using and initialize Fluid
 const useAzure = process.env.FLUID_CLIENT === "azure";
 
+function getTinyliciousEndpoint(port = 7070): string {
+	if (typeof window !== "undefined") {
+		const match = /^(.+)-\d+\.(.+)$/.exec(window.location.hostname);
+		if (match) {
+			return `https://${match[1]}-${port}.${match[2]}`;
+		}
+	}
+	return `http://localhost:${port}`;
+}
+
 const user = {
 	id: uuid(),
 	name: uuid(),
@@ -52,7 +62,7 @@ export const connectionConfig: AzureRemoteConnectionConfig | AzureLocalConnectio
 		: {
 				type: "local",
 				tokenProvider: new InsecureTokenProvider("fooBar", user),
-				endpoint: "http://localhost:7070",
+				endpoint: getTinyliciousEndpoint(),
 			};
 
 /**

examples/utils/example-driver/src/tinyliciousDriver.ts

@@ -8,16 +8,16 @@ import { RouterliciousDocumentServiceFactory } from "@fluidframework/routerlicio
 import {
 	createTinyliciousCreateNewRequest,
 	InsecureTinyliciousTokenProvider,
-	InsecureTinyliciousUrlResolver,
 	// eslint-disable-next-line import-x/no-internal-modules
 } from "@fluidframework/tinylicious-driver/internal";
+import { createInsecureTinyliciousTestUrlResolver } from "@fluidframework/tinylicious-driver/test-utils";
 
 import type { ExampleDriver } from "./interfaces.js";
 
 export const createTinyliciousDriver = async (): Promise<ExampleDriver> => {
 	const tokenProvider = new InsecureTinyliciousTokenProvider();
 	return {
-		urlResolver: new InsecureTinyliciousUrlResolver(),
+		urlResolver: createInsecureTinyliciousTestUrlResolver(),
 		documentServiceFactory: new RouterliciousDocumentServiceFactory(tokenProvider),
 		createCreateNewRequest: (id: string) => createTinyliciousCreateNewRequest(),
 		createLoadExistingRequest: async (id: string) => {

examples/utils/example-utils/src/modelLoader/tinyliciousModelLoader.ts

@@ -24,7 +24,7 @@ class TinyliciousService {
 
 	constructor(tinyliciousPort?: number) {
 		const tokenProvider = createInsecureTinyliciousTestTokenProvider();
-		this.urlResolver = createInsecureTinyliciousTestUrlResolver();
+		this.urlResolver = createInsecureTinyliciousTestUrlResolver(tinyliciousPort);
 		this.documentServiceFactory = createRouterliciousDocumentServiceFactory(tokenProvider);
 	}
 }

examples/utils/webpack-fluid-loader/src/getUrlResolver.ts

@@ -29,6 +29,15 @@ export const tinyliciousUrls = (
 } => {
 	const port = options.tinyliciousPort ?? defaultTinyliciousPort;
 
+	// Detect GitHub Codespaces and use the forwarded port URL
+	if (typeof window !== "undefined") {
+		const match = /^(.+)-\d+\.(.+)$/.exec(window.location.hostname);
+		if (match) {
+			const url = `https://${match[1]}-${port}.${match[2]}`;
+			return { deltaStreamUrl: url, hostUrl: url, ordererUrl: url, storageUrl: url };
+		}
+	}
+
 	return {
 		deltaStreamUrl: `http://localhost:${port}`,
 		hostUrl: `http://localhost:${port}`,

packages/drivers/tinylicious-driver/src/insecureTinyliciousUrlResolver.ts

@@ -93,10 +93,33 @@ export class InsecureTinyliciousUrlResolver implements IUrlResolver {
 }
 
 /**
- * Creates an insecure Tinylicious URL resolver for testing purposes with localhost port 7070.
+ * Detects the appropriate Tinylicious endpoint based on the environment.
+ * In GitHub Codespaces, returns the forwarded port URL. Otherwise returns localhost.
  */
-export function createInsecureTinyliciousTestUrlResolver(): IUrlResolver {
-	return new InsecureTinyliciousUrlResolver();
+function getTinyliciousEndpoint(port: number = defaultTinyliciousPort): {
+	endpoint: string;
+	port: number;
+} {
+	if (typeof window !== "undefined") {
+		const match = /^(.+)-\d+\.(.+)$/.exec(window.location.hostname);
+		if (match) {
+			// In Codespaces, the port is embedded in the hostname, use HTTPS port 443
+			return { endpoint: `https://${match[1]}-${port}.${match[2]}`, port: 443 };
+		}
+	}
+	return { endpoint: defaultTinyliciousEndpoint, port };
+}
+
+/**
+ * Creates an insecure Tinylicious URL resolver for testing purposes.
+ * Automatically detects GitHub Codespaces and uses the appropriate endpoint.
+ * @param tinyliciousPort - Optional port number (defaults to 7070)
+ */
+export function createInsecureTinyliciousTestUrlResolver(
+	tinyliciousPort?: number,
+): IUrlResolver {
+	const { endpoint, port } = getTinyliciousEndpoint(tinyliciousPort);
+	return new InsecureTinyliciousUrlResolver(port, endpoint);
 }
 
 /**