diff --git a/examples/hosts/app-integration/external-controller/package.json b/examples/hosts/app-integration/external-controller/package.json
index f46c475ac528..12c8b38f29b5 100644
--- a/examples/hosts/app-integration/external-controller/package.json
+++ b/examples/hosts/app-integration/external-controller/package.json
@@ -36,13 +36,8 @@
   "dependencies": {
     "@fluidframework/azure-client": "^0.47.0",
     "@fluidframework/common-definitions": "^0.20.1",
-    "@fluidframework/container-definitions": "^0.39.8",
-    "@fluidframework/server-services-client": "^0.1029.0-0",
-    "css-loader": "^1.0.0",
     "fluid-framework": "^0.47.0",
-    "react": "^16.10.2",
-    "react-dom": "^16.10.2",
-    "style-loader": "^1.0.0"
+    "uuid": "^8.3.1"
   },
   "devDependencies": {
     "@fluid-experimental/get-container": "^0.47.0",
diff --git a/examples/hosts/app-integration/external-controller/src/app.ts b/examples/hosts/app-integration/external-controller/src/app.ts
index b79757dd4414..f78588ae7044 100644
--- a/examples/hosts/app-integration/external-controller/src/app.ts
+++ b/examples/hosts/app-integration/external-controller/src/app.ts
@@ -9,11 +9,11 @@ import {
     InsecureTokenProvider,
     AzureContainerServices,
 } from "@fluidframework/azure-client";
-import { generateUser } from "@fluidframework/server-services-client";
 import {
     FluidContainer,
     SharedMap,
 } from "fluid-framework";
+import { v4 as uuid } from "uuid";
 import { DiceRollerController } from "./controller";
 import { ConsoleLogger } from "./ConsoleLogger";
 import { renderAudience, renderDiceRoller } from "./view";
@@ -31,7 +31,10 @@ const userDetails: ICustomUserDetails = {
 // Define the server we will be using and initialize Fluid
 const useAzure = process.env.FLUID_CLIENT === "azure";
 
-const user = generateUser() as any;
+const user = {
+    id: uuid(),
+    name: uuid(),
+};
 
 const azureUser = {
     userId: user.id,
diff --git a/examples/hosts/app-integration/external-controller/src/controller.ts b/examples/hosts/app-integration/external-controller/src/controller.ts
index 634ce43122b6..9582b9d244d8 100644
--- a/examples/hosts/app-integration/external-controller/src/controller.ts
+++ b/examples/hosts/app-integration/external-controller/src/controller.ts
@@ -4,7 +4,7 @@
  */
 
 import { EventEmitter } from "events";
-import { IDirectoryValueChanged } from "fluid-framework";
+import { IValueChanged } from "fluid-framework";
 
 /**
  * IDiceRoller describes the public API surface for our dice roller data object.
@@ -32,8 +32,8 @@ const diceValueKey = "diceValue";
 interface DiceRollerControllerProps {
     get: (key: string) => any;
     set: (key: string, value: any) => void;
-    on(event: "changed" | "valueChanged", listener: (args: IDirectoryValueChanged) => void): this;
-    off(event: "changed" | "valueChanged", listener: (args: IDirectoryValueChanged) => void): this;
+    on(event: "valueChanged", listener: (args: IValueChanged) => void): this;
+    off(event: "valueChanged", listener: (args: IValueChanged) => void): this;
 }
 
 /**
@@ -42,12 +42,6 @@ interface DiceRollerControllerProps {
 export class DiceRollerController extends EventEmitter implements IDiceRollerController {
     constructor(private readonly props: DiceRollerControllerProps) {
         super();
-        this.props.on("changed", (changed) => {
-            if (changed.key === diceValueKey) {
-                // When we see the dice value change, we'll emit the diceRolled event we specified in our interface.
-                this.emit("diceRolled");
-            }
-        });
         this.props.on("valueChanged", (changed) => {
             if (changed.key === diceValueKey) {
                 // When we see the dice value change, we'll emit the diceRolled event we specified in our interface.
@@ -76,11 +70,9 @@ export class DiceRollerController extends EventEmitter implements IDiceRollerCon
             const resolveIfKeySet = () => {
                 if (this.props.get(diceValueKey) !== undefined) {
                     resolve();
-                    this.props.off("changed", resolveIfKeySet);
                     this.props.off("valueChanged", resolveIfKeySet);
                 }
             };
-            this.props.on("changed", resolveIfKeySet);
             this.props.on("valueChanged", resolveIfKeySet);
         });
     }
diff --git a/examples/hosts/app-integration/external-controller/tsconfig.json b/examples/hosts/app-integration/external-controller/tsconfig.json
index 2afc156f2ee5..81cef79d58b4 100644
--- a/examples/hosts/app-integration/external-controller/tsconfig.json
+++ b/examples/hosts/app-integration/external-controller/tsconfig.json
@@ -8,7 +8,7 @@
         "module": "esnext",
         "outDir": "dist",
         "jsx": "react",
-        "types": ["react", "react-dom", "jest", "puppeteer", "jest-environment-puppeteer", "expect-puppeteer"]
+        "types": ["jest", "puppeteer", "jest-environment-puppeteer", "expect-puppeteer"]
     },
     "include": [
         "src/**/*",
diff --git a/examples/hosts/app-integration/external-controller/webpack.config.js b/examples/hosts/app-integration/external-controller/webpack.config.js
index 1e78b1c6ba6f..96da353d7e72 100644
--- a/examples/hosts/app-integration/external-controller/webpack.config.js
+++ b/examples/hosts/app-integration/external-controller/webpack.config.js
@@ -17,9 +17,6 @@ module.exports = env => {
         },
         resolve: {
             extensions: [".ts", ".tsx", ".js"],
-            alias: {
-                vue$: "vue/dist/vue.esm-bundler.js",
-            },
         },
         module: {
             rules: [{