Add ODSP support to examples in /examples/apps following PR #25524 pattern

examples/apps/blobs/tests/app.ts

@@ -74,7 +74,7 @@ async function createContainerAndRenderInElement(element: HTMLDivElement): Promi
 				.catch(console.error);
 		};
 	} else {
-		const id = location.hash.substring(1);
+		const id = location.hash.slice(1);
 		container = await loadExistingContainer({
 			request: { url: `${window.location.origin}/${id}` },
 			urlResolver,

examples/apps/collaborative-textarea/package.json

@@ -34,7 +34,10 @@
 		"lint": "fluid-build . --task lint",
 		"lint:fix": "fluid-build . --task eslint:fix --task format",
 		"prepack": "npm run webpack",
-		"start": "webpack serve --config webpack.config.cjs",
+		"start": "npm run start:t9s",
+		"start:local": "webpack serve --config webpack.config.cjs --env service=local",
+		"start:odsp": "webpack serve --config webpack.config.cjs --env service=odsp",
+		"start:t9s": "webpack serve --config webpack.config.cjs --env service=t9s",
 		"start:test": "webpack serve --config webpack.test.cjs",
 		"test": "npm run test:jest",
 		"test:jest": "jest --ci",
@@ -43,9 +46,11 @@
 		"webpack:dev": "webpack --env development"
 	},
 	"dependencies": {
+		"@fluid-example/example-driver": "workspace:~",
 		"@fluid-example/example-utils": "workspace:~",
 		"@fluidframework/aqueduct": "workspace:~",
 		"@fluidframework/container-definitions": "workspace:~",
+		"@fluidframework/container-loader": "workspace:~",
 		"@fluidframework/container-runtime-definitions": "workspace:~",
 		"@fluidframework/core-interfaces": "workspace:~",
 		"@fluidframework/runtime-utils": "workspace:~",
@@ -57,6 +62,7 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "~1.9.3",
+		"@fluid-example/example-webpack-integration": "workspace:~",
 		"@fluid-tools/build-cli": "^0.58.3",
 		"@fluidframework/build-common": "^2.0.3",
 		"@fluidframework/build-tools": "^0.58.3",

examples/apps/collaborative-textarea/src/app.ts

@@ -3,7 +3,16 @@
  * Licensed under the MIT License.
  */
 
-import { StaticCodeLoader, TinyliciousModelLoader } from "@fluid-example/example-utils";
+import {
+	createExampleDriver,
+	getSpecifiedServiceFromWebpack,
+} from "@fluid-example/example-driver";
+import { StaticCodeLoader } from "@fluid-example/example-utils";
+import type { IContainer } from "@fluidframework/container-definitions/legacy";
+import {
+	createDetachedContainer,
+	loadExistingContainer,
+} from "@fluidframework/container-loader/legacy";
 import React from "react";
 import ReactDOM from "react-dom";
 
@@ -18,25 +27,54 @@ import { CollaborativeTextView } from "./view.js";
  * requires making async calls.
  */
 async function start(): Promise<void> {
-	const tinyliciousModelLoader = new TinyliciousModelLoader<ICollaborativeTextAppModel>(
-		new StaticCodeLoader(new CollaborativeTextContainerRuntimeFactory()),
-	);
+	const service = getSpecifiedServiceFromWebpack();
+	const {
+		urlResolver,
+		documentServiceFactory,
+		createCreateNewRequest,
+		createLoadExistingRequest,
+	} = await createExampleDriver(service);
+
+	const codeLoader = new StaticCodeLoader(new CollaborativeTextContainerRuntimeFactory());
 
 	let id: string;
-	let model: ICollaborativeTextAppModel;
+	let container: IContainer;
 
 	if (location.hash.length === 0) {
-		// Normally our code loader is expected to match up with the version passed here.
-		// But since we're using a StaticCodeLoader that always loads the same runtime factory regardless,
-		// the version doesn't actually matter.
-		const createResponse = await tinyliciousModelLoader.createDetached("1.0");
-		model = createResponse.model;
-		id = await createResponse.attach();
+		// Some services support or require specifying the container id at attach time (local, odsp). For
+		// services that do not (t9s), the passed id will be ignored.
+		id = Date.now().toString();
+		const createNewRequest = createCreateNewRequest(id);
+		container = await createDetachedContainer({
+			codeDetails: { package: "1.0" },
+			urlResolver,
+			documentServiceFactory,
+			codeLoader,
+		});
+		await container.attach(createNewRequest);
+		// For most services, the id on the resolvedUrl is the authoritative source for the container id
+		// (regardless of whether the id passed in createCreateNewRequest is respected or not). However,
+		// for odsp the id is a hashed combination of drive and container ID which we can't use. Instead,
+		// we retain the id we generated above.
+		if (service !== "odsp") {
+			if (container.resolvedUrl === undefined) {
+				throw new Error("Resolved Url unexpectedly missing!");
+			}
+			id = container.resolvedUrl.id;
+		}
 	} else {
 		id = location.hash.slice(1);
-		model = await tinyliciousModelLoader.loadExisting(id);
+		container = await loadExistingContainer({
+			request: await createLoadExistingRequest(id),
+			urlResolver,
+			documentServiceFactory,
+			codeLoader,
+		});
 	}
 
+	// Get the model from the container
+	const model = (await container.getEntryPoint()) as ICollaborativeTextAppModel;
+
 	// update the browser URL and the window title with the actual container ID
 	// eslint-disable-next-line require-atomic-updates
 	location.hash = id;
@@ -52,12 +90,4 @@ async function start(): Promise<void> {
 	}
 }
 
-try {
-	await start();
-} catch (error) {
-	console.error(error);
-	console.log(
-		"%cEnsure you are running the Tinylicious Fluid Server\nUse:`npm run start:server`",
-		"font-size:30px",
-	);
-}
+await start();

examples/apps/collaborative-textarea/tests/index.ts

@@ -33,7 +33,7 @@ async function createContainerAndRenderInElement(element: HTMLElement) {
 		model = createResponse.model;
 		id = await createResponse.attach();
 	} else {
-		id = location.hash.substring(1);
+		id = location.hash.slice(1);
 		model = await sessionStorageModelLoader.loadExisting(id);
 	}
 

examples/apps/collaborative-textarea/webpack.config.cjs

@@ -3,13 +3,17 @@
  * Licensed under the MIT License.
  */
 
+const {
+	createExampleDriverServiceWebpackPlugin,
+	createOdspMiddlewares,
+} = require("@fluid-example/example-webpack-integration");
 const path = require("path");
 const { merge } = require("webpack-merge");
 const webpack = require("webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = (env) => {
-	const isProduction = env?.production;
+	const { production, service } = env;
 
 	return merge(
 		{
@@ -46,8 +50,17 @@ module.exports = (env) => {
 				new HtmlWebpackPlugin({
 					template: "./src/index.html",
 				}),
+				createExampleDriverServiceWebpackPlugin(service),
 			],
+			devServer: {
+				setupMiddlewares: (middlewares) => {
+					if (service === "odsp") {
+						middlewares.push(...createOdspMiddlewares());
+					}
+					return middlewares;
+				},
+			},
 		},
-		isProduction ? require("./webpack.prod.cjs") : require("./webpack.dev.cjs"),
+		production ? require("./webpack.prod.cjs") : require("./webpack.dev.cjs"),
 	);
 };

examples/apps/contact-collection/package.json

@@ -26,7 +26,10 @@
 		"lint": "fluid-build . --task lint",
 		"lint:fix": "fluid-build . --task eslint:fix --task format",
 		"prepack": "npm run webpack",
-		"start": "webpack serve",
+		"start": "npm run start:t9s",
+		"start:local": "webpack serve --config webpack.config.cjs --env service=local",
+		"start:odsp": "webpack serve --config webpack.config.cjs --env service=odsp",
+		"start:t9s": "webpack serve --config webpack.config.cjs --env service=t9s",
 		"start:test": "webpack serve --config webpack.test.cjs",
 		"test": "npm run test:jest",
 		"test:jest": "jest --ci",
@@ -35,9 +38,11 @@
 		"webpack:dev": "webpack --env development"
 	},
 	"dependencies": {
+		"@fluid-example/example-driver": "workspace:~",
 		"@fluid-example/example-utils": "workspace:~",
 		"@fluidframework/aqueduct": "workspace:~",
 		"@fluidframework/container-definitions": "workspace:~",
+		"@fluidframework/container-loader": "workspace:~",
 		"@fluidframework/container-runtime-definitions": "workspace:~",
 		"@fluidframework/core-interfaces": "workspace:~",
 		"@fluidframework/runtime-utils": "workspace:~",
@@ -49,6 +54,7 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "~1.9.3",
+		"@fluid-example/example-webpack-integration": "workspace:~",
 		"@fluid-tools/build-cli": "^0.58.3",
 		"@fluidframework/build-common": "^2.0.3",
 		"@fluidframework/build-tools": "^0.58.3",

examples/apps/contact-collection/src/app.ts

@@ -3,7 +3,16 @@
  * Licensed under the MIT License.
  */
 
-import { StaticCodeLoader, TinyliciousModelLoader } from "@fluid-example/example-utils";
+import {
+	createExampleDriver,
+	getSpecifiedServiceFromWebpack,
+} from "@fluid-example/example-driver";
+import { StaticCodeLoader } from "@fluid-example/example-utils";
+import type { IContainer } from "@fluidframework/container-definitions/legacy";
+import {
+	createDetachedContainer,
+	loadExistingContainer,
+} from "@fluidframework/container-loader/legacy";
 
 import {
 	ContactCollectionContainerRuntimeFactory,
@@ -36,25 +45,54 @@ const getContactUrl = (contactId: string): string => {
 // ID to load from, so the URL for a document load will look something like http://localhost:8080/#1596520748752.
 // These policy choices are arbitrary for demo purposes, and can be changed however you'd like.
 async function start(): Promise<void> {
-	const tinyliciousModelLoader = new TinyliciousModelLoader<IContactCollectionAppModel>(
-		new StaticCodeLoader(new ContactCollectionContainerRuntimeFactory()),
-	);
+	const service = getSpecifiedServiceFromWebpack();
+	const {
+		urlResolver,
+		documentServiceFactory,
+		createCreateNewRequest,
+		createLoadExistingRequest,
+	} = await createExampleDriver(service);
+
+	const codeLoader = new StaticCodeLoader(new ContactCollectionContainerRuntimeFactory());
 
 	let id: string;
-	let model: IContactCollectionAppModel;
+	let container: IContainer;
 
 	if (location.hash.length === 0) {
-		// Normally our code loader is expected to match up with the version passed here.
-		// But since we're using a StaticCodeLoader that always loads the same runtime factory regardless,
-		// the version doesn't actually matter.
-		const createResponse = await tinyliciousModelLoader.createDetached("1.0");
-		model = createResponse.model;
-		id = await createResponse.attach();
+		// Some services support or require specifying the container id at attach time (local, odsp). For
+		// services that do not (t9s), the passed id will be ignored.
+		id = Date.now().toString();
+		const createNewRequest = createCreateNewRequest(id);
+		container = await createDetachedContainer({
+			codeDetails: { package: "1.0" },
+			urlResolver,
+			documentServiceFactory,
+			codeLoader,
+		});
+		await container.attach(createNewRequest);
+		// For most services, the id on the resolvedUrl is the authoritative source for the container id
+		// (regardless of whether the id passed in createCreateNewRequest is respected or not). However,
+		// for odsp the id is a hashed combination of drive and container ID which we can't use. Instead,
+		// we retain the id we generated above.
+		if (service !== "odsp") {
+			if (container.resolvedUrl === undefined) {
+				throw new Error("Resolved Url unexpectedly missing!");
+			}
+			id = container.resolvedUrl.id;
+		}
 	} else {
 		id = location.hash.slice(1);
-		model = await tinyliciousModelLoader.loadExisting(id);
+		container = await loadExistingContainer({
+			request: await createLoadExistingRequest(id),
+			urlResolver,
+			documentServiceFactory,
+			codeLoader,
+		});
 	}
 
+	// Get the model from the container
+	const model = (await container.getEntryPoint()) as IContactCollectionAppModel;
+
 	// update the browser URL and the window title with the actual container ID
 	// eslint-disable-next-line require-atomic-updates
 	location.hash = id;
@@ -81,8 +119,4 @@ async function start(): Promise<void> {
 	}
 }
 
-try {
-	await start();
-} catch (error) {
-	console.error(error);
-}
+await start();

examples/apps/contact-collection/tests/index.ts

@@ -38,7 +38,7 @@ export async function createContainerAndRenderInElement(element: HTMLDivElement)
 		model = createResponse.model;
 		id = await createResponse.attach();
 	} else {
-		id = location.hash.substring(1);
+		id = location.hash.slice(1);
 		model = await sessionStorageModelLoader.loadExisting(id);
 	}
 

examples/apps/contact-collection/webpack.config.cjs

@@ -3,13 +3,17 @@
  * Licensed under the MIT License.
  */
 
+const {
+	createExampleDriverServiceWebpackPlugin,
+	createOdspMiddlewares,
+} = require("@fluid-example/example-webpack-integration");
 const path = require("path");
 const { merge } = require("webpack-merge");
 const webpack = require("webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = (env) => {
-	const isProduction = env?.production;
+	const { production, service } = env;
 
 	return merge(
 		{
@@ -46,8 +50,17 @@ module.exports = (env) => {
 				new HtmlWebpackPlugin({
 					template: "./src/index.html",
 				}),
+				createExampleDriverServiceWebpackPlugin(service),
 			],
+			devServer: {
+				setupMiddlewares: (middlewares) => {
+					if (service === "odsp") {
+						middlewares.push(...createOdspMiddlewares());
+					}
+					return middlewares;
+				},
+			},
 		},
-		isProduction ? require("./webpack.prod.cjs") : require("./webpack.dev.cjs"),
+		production ? require("./webpack.prod.cjs") : require("./webpack.dev.cjs"),
 	);
 };

examples/apps/data-object-grid/package.json

@@ -28,7 +28,10 @@
 		"lint": "fluid-build . --task lint",
 		"lint:fix": "fluid-build . --task eslint:fix --task format",
 		"prepack": "npm run webpack",
-		"start": "webpack serve",
+		"start": "npm run start:t9s",
+		"start:local": "webpack serve --config webpack.config.cjs --env service=local",
+		"start:odsp": "webpack serve --config webpack.config.cjs --env service=odsp",
+		"start:t9s": "webpack serve --config webpack.config.cjs --env service=t9s",
 		"start:test": "webpack serve --config webpack.test.cjs",
 		"test": "npm run test:jest",
 		"test:jest": "jest --ci",
@@ -42,12 +45,14 @@
 		"@fluid-example/clicker": "workspace:~",
 		"@fluid-example/codemirror": "workspace:~",
 		"@fluid-example/collaborative-textarea": "workspace:~",
+		"@fluid-example/example-driver": "workspace:~",
 		"@fluid-example/example-utils": "workspace:~",
 		"@fluid-example/multiview-coordinate-model": "workspace:~",
 		"@fluid-example/multiview-slider-coordinate-view": "workspace:~",
 		"@fluid-example/prosemirror": "workspace:~",
 		"@fluidframework/aqueduct": "workspace:~",
 		"@fluidframework/container-definitions": "workspace:~",
+		"@fluidframework/container-loader": "workspace:~",
 		"@fluidframework/container-runtime-definitions": "workspace:~",
 		"@fluidframework/core-interfaces": "workspace:~",
 		"@fluidframework/datastore-definitions": "workspace:~",
@@ -63,6 +68,7 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "~1.9.3",
+		"@fluid-example/example-webpack-integration": "workspace:~",
 		"@fluid-tools/build-cli": "^0.58.3",
 		"@fluidframework/build-common": "^2.0.3",
 		"@fluidframework/build-tools": "^0.58.3",