working independently

.npmrc

@@ -0,0 +1,3 @@
+registry=https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/ 
+                        
+always-auth=true

README.md

@@ -1,4 +1,4 @@
-# @fluid-example/app-integration-external-views
+# @fluid-example/hello-world
 
 **Dice Roller** is a basic example that has a die and a button. Clicking the button re-rolls the die and persists the value in the root SharedDirectory. The Fluid Container is defined in container/, the Data Object is defined in dataObject/.
 
@@ -8,20 +8,16 @@ This implementation demonstrates plugging that Container into a standalone appli
 
 If you want to run this container follow the following steps:
 
-### Start Tinylicious
-
-Go to [/server/tinylicious](/server/tinylicious) and follow the instructions there to start the Tinylicious server.
-
-### Start the app server
-
-1. Run `npm install` and `npm run build:fast` from the `FluidFramework` root directory
-2. Navigate to this directory
-3. Run `npm run start`
+```bash
+    npm i
+    npm run start:server
+    npm start
+```
 
 ## Testing
 
 ```bash
-    npm run test:jest
+    npm run test
 ```
 
 For in browser testing update `./jest-puppeteer.config.js` to:

jest-puppeteer.config.js

@@ -5,14 +5,14 @@
 
 module.exports = {
   server: {
-    command: `npm run start:test -- --no-live-reload --port ${process.env["PORT"]}`,
-    port: process.env["PORT"],
+    command: `npm run start:test -- --no-live-reload --port 8081`,
+    port: 8081,
     launchTimeout:10000,
     usedPortAction: 'error'
   },
   launch: {
     args: ['--no-sandbox', '--disable-setuid-sandbox'], // https://github.com/puppeteer/puppeteer/blob/master/docs/troubleshooting.md#setting-up-chrome-linux-sandbox
-    dumpio: process.env.FLUID_TEST_VERBOSE !== undefined // output browser console to cmd line
+    dumpio: true // output browser console to cmd line
     // slowMo: 500, // slows down process for easier viewing
     // headless: false, // run in the browser
   },

jest.config.js

@@ -4,16 +4,17 @@
  */
 
 // Get the test port from the global map and set it in env for this test
-const testTools = require("@fluidframework/test-tools");
 const { name } = require("./package.json");
 
-mappedPort = testTools.getTestPort(name);
-process.env["PORT"] = mappedPort;
-
 module.exports = {
   preset: "jest-puppeteer",
   globals: {
-    PATH: `http://localhost:${mappedPort}`
+    PATH: "http://localhost:8081",
+    "ts-jest": {
+        diagnostics: {
+          ignoreCodes: [7016] // ignores tsconfig `"strict": true`
+        }
+      }
   },
   testMatch: ["**/?(*.)+(spec|test).[t]s"],
   testPathIgnorePatterns: ['/node_modules/', 'dist'],

package.json

@@ -1,45 +1,28 @@
 {
-  "name": "@fluid-example/app-integration-external-views",
-  "version": "0.25.1",
+  "name": "@fluid-example/hello-world",
+  "version": "0.1.0",
   "description": "Minimal Fluid Container & Data Object sample to implement a collaborative dice roller as a standalone app.",
-  "repository": "microsoft/FluidFramework",
+  "repository": "microsoft/FluidHelloWorld",
   "license": "MIT",
   "author": "Microsoft",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "concurrently npm:build:compile npm:lint",
-    "build:compile": "concurrently npm:tsc npm:build:esnext",
-    "build:esnext": "tsc --project ./tsconfig.esnext.json",
-    "build:full": "concurrently npm:build npm:webpack",
-    "build:full:compile": "concurrently npm:build:compile npm:webpack",
-    "clean": "rimraf dist lib *.tsbuildinfo *.build.log",
-    "eslint": "eslint --ext=ts,tsx --format stylish src",
-    "eslint:fix": "eslint --ext=ts,tsx --format stylish src --fix",
-    "lint": "npm run eslint",
-    "lint:fix": "npm run eslint:fix",
-    "prepack": "npm run webpack",
+    "build": "npm run webpack && npm run tsc",
     "start": "webpack-dev-server",
+    "start:server": "tinylicious",
     "start:test": "webpack-dev-server --config webpack.test.js",
-    "test": "npm run test:jest",
-    "test:jest": "jest",
-    "test:jest:verbose": "cross-env FLUID_TEST_VERBOSE=1 jest",
+    "test": "jest",
     "tsc": "tsc",
-    "tsfmt": "tsfmt --verify",
-    "tsfmt:fix": "tsfmt --replace",
-    "webpack": "webpack --env.production",
-    "webpack:dev": "webpack --env.development"
+    "webpack": "webpack"
   },
   "dependencies": {
-    "@fluidframework/aqueduct": "^0.25.1",
-    "@fluidframework/get-session-storage-container": "^0.25.1",
-    "@fluidframework/get-tinylicious-container": "^0.25.1"
+    "@fluidframework/aqueduct": "0.25.1-833",
+    "@fluidframework/get-tinylicious-container": "0.25.1-833"
   },
   "devDependencies": {
-    "@fluidframework/build-common": "^0.18.0",
-    "@fluidframework/eslint-config-fluid": "^0.18.0",
-    "@fluidframework/test-tools": "^0.1.0",
+    "@fluidframework/get-session-storage-container": "0.25.1-833",
     "@types/expect-puppeteer": "2.2.1",
     "@types/jest": "22.2.3",
     "@types/jest-environment-puppeteer": "2.2.0",
@@ -48,15 +31,12 @@
     "@typescript-eslint/eslint-plugin": "~2.17.0",
     "@typescript-eslint/parser": "~2.17.0",
     "clean-webpack-plugin": "^3.0.0",
-    "concurrently": "^5.2.0",
-    "cross-env": "^7.0.2",
     "eslint": "~6.8.0",
     "eslint-plugin-eslint-comments": "~3.1.2",
     "eslint-plugin-import": "2.20.0",
     "eslint-plugin-no-null": "~1.0.2",
     "eslint-plugin-optimize-regex": "~1.1.7",
     "eslint-plugin-prefer-arrow": "~1.1.7",
-    "eslint-plugin-react": "~7.18.0",
     "eslint-plugin-unicorn": "~15.0.1",
     "html-webpack-plugin": "^4.3.0",
     "jest": "^24.9.0",
@@ -66,6 +46,7 @@
     "rimraf": "^2.6.2",
     "ts-jest": "24.1.0",
     "ts-loader": "^6.1.2",
+    "tinylicious": "0.2.204",
     "typescript": "~3.7.4",
     "typescript-formatter": "7.1.0",
     "webpack": "^4.43.0",

tests/diceRoller.test.ts

@@ -5,7 +5,6 @@
 
 import { globals } from "../jest.config";
 
-// Tests disabled -- requires Tinylicious to be running, which our test environment doesn't do.
 describe("diceRoller", () => {
     beforeAll(async () => {
         // Wait for the page to load first before running any tests

tests/index.ts

@@ -35,7 +35,6 @@ export async function createContainerAndRenderInElement(element: HTMLDivElement,
     renderDiceRoller(defaultObject, element);
 
     // Setting "fluidStarted" is just for our test automation
-    // eslint-disable-next-line dot-notation
     window["fluidStarted"] = true;
 }
 

tsconfig.json

@@ -1,17 +1,29 @@
 {
-    "extends": "@fluidframework/build-common/ts-common-config.json",
     "exclude": [
         "dist",
-        "node_modules"
+        "node_modules",
+        "tests/*.test.ts"
     ],
     "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
+        "suppressImplicitAnyIndexErrors": true,
+        "target": "es6",
+        "noUnusedLocals": true,
         "module": "esnext",
+        "moduleResolution": "node",
         "outDir": "dist",
-        "jsx": "react",
-        "types": ["react", "react-dom", "jest", "puppeteer", "jest-environment-puppeteer", "expect-puppeteer"]
+        "sourceMap": true,
+        "inlineSources": true,
+        "strict": true,
+        "types": [
+            "jest",
+            "puppeteer",
+            "jest-environment-puppeteer",
+            "expect-puppeteer"
+        ]
     },
     "include": [
-        "src/**/*",
-        "tests/**/*"
+        "src/**/*"
     ]
 }
+

webpack.config.js

@@ -1,26 +1,18 @@
-/*!
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the MIT License.
- */
-
 const path = require("path");
 const merge = require("webpack-merge");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
-// const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 
-module.exports = env => {
-    const isProduction = env && env.production;
-
-    return merge({
+module.exports = () => {
+    return ({
         entry: {
             app: "./src/app.ts"
         },
         resolve: {
-            extensions: [".ts", ".tsx", ".js"],
+            extensions: [".ts", ".js"],
         },
         module: {
             rules: [{
-                test: /\.tsx?$/,
+                test: /\.ts?$/,
                 loader: "ts-loader"
             }]
         },
@@ -30,16 +22,15 @@ module.exports = env => {
             library: "[name]",
             // https://github.com/webpack/webpack/issues/5767
             // https://github.com/webpack/webpack/issues/7939
-            devtoolNamespace: "fluid-example/dice-roller",
+            devtoolNamespace: "@fluid-example/hello-world",
             libraryTarget: "umd"
         },
         plugins: [
             new HtmlWebpackPlugin({
                 template: "./src/index.html",
             }),
-            // new CleanWebpackPlugin(),
         ],
-    }, isProduction
-        ? require("./webpack.prod")
-        : require("./webpack.dev"));
+        mode: "development",
+        devtool: "inline-source-map"
+    });
 };

webpack.dev.js

@@ -1,9 +0,0 @@
-/*!
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the MIT License.
- */
-
-module.exports = {
-    mode: "development",
-    devtool: "inline-source-map"
-};

webpack.prod.js

@@ -1,9 +0,0 @@
-/*!
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the MIT License.
- */
-
-module.exports = {
-    mode: "production",
-    devtool: "source-map"
-};

webpack.test.js

@@ -13,7 +13,7 @@ module.exports = env => {
             app: "./tests/index.ts"
         },
         resolve: {
-            extensions: [".ts", ".tsx", ".js"],
+            extensions: [".ts", ".js"],
         },
         module: {
             rules: [{
@@ -31,7 +31,7 @@ module.exports = env => {
             library: "[name]",
             // https://github.com/webpack/webpack/issues/5767
             // https://github.com/webpack/webpack/issues/7939
-            devtoolNamespace: "fluid-example/draft-js",
+            devtoolNamespace: "fluid-example/hello-world",
             libraryTarget: "umd"
         },
         devServer: {