Fixes 979 - Sample: 01.a.browser-echo fails to run (microsoft#1016)

* First pass at cleaning up the sample - get eslint working - update README.md to use format consistent with other samples - add lint, build package.json scripts - update eslint packages to current - fix linter issues - ignore dist folder * Updated babel to v7+ * Fixes 979 - Sample: 01.a.browser-echo fails to run - upgrade webpack - add build and lint script commands to package.json - add lint config - make sources pass lint - update README.md to have proper How to run steps
f22j · Dec 4, 2018 · 9070668 · 9070668
1 parent 1ad5052
commit 9070668
Show file tree

Hide file tree

Showing 11 changed files with 181 additions and 68 deletions.
diff --git a/.gitignore b/.gitignore
@@ -272,3 +272,4 @@ paket-files/
 /javascript_nodejs/.DS_Store
 .DS_Store
 generators/generator-botbuilder/.npmrc
+/samples/javascript_es6/01.a.browser-echo/dist
diff --git a/samples/javascript_es6/01.a.browser-echo/.babelrc b/samples/javascript_es6/01.a.browser-echo/.babelrc
@@ -1,13 +1,22 @@
 {
-  "presets": [
-    ["env", {
-      "targets": {
-        "browsers": "current"
-      },
-      "modules": "umd"
-    }]
-  ],
-  "ignore": [
-    "node_modules/**/"
-  ]
-}
+    "presets": [
+        [
+            "@babel/preset-env",
+            {
+                "targets": {
+                    "chrome": "58",
+                    "esmodules": true
+                }
+            }
+        ]
+    ],
+    "ignore": [
+        "**/*.d.ts"
+    ],
+    "sourceMaps": "inline",
+    "plugins": [
+        "@babel/proposal-class-properties",
+        "@babel/proposal-object-rest-spread",
+        "@babel/plugin-transform-runtime"
+    ]
+}
diff --git a/samples/javascript_es6/01.a.browser-echo/.eslintignore b/samples/javascript_es6/01.a.browser-echo/.eslintignore
@@ -0,0 +1,2 @@
+dist/**
+node_modules/**
diff --git a/...pt_es6/01.a.browser-echo/src/.eslintrc.js → ...script_es6/01.a.browser-echo/.eslintrc.js b/...pt_es6/01.a.browser-echo/src/.eslintrc.js → ...script_es6/01.a.browser-echo/.eslintrc.js
@@ -3,7 +3,6 @@ module.exports = {
     "rules": {
         "semi": [2, "always"],
         "indent": [2, 4],
-        "no-debugger": false,
         "no-return-await": 0,
         "space-before-function-paren": [2, {
             "named": "never",
@@ -12,4 +11,4 @@ module.exports = {
         }],
         "template-curly-spacing": [2, "always"],
     }
-};
+};
diff --git a/samples/javascript_es6/01.a.browser-echo/README.md b/samples/javascript_es6/01.a.browser-echo/README.md
@@ -1,20 +1,30 @@
-The example shows the use of the `botbuilder-js` SDKs for the browser using the [BotFramework-WebChat](https://github.com/Microsoft/BotFramework-WebChat) and a custom [WebChatAdapter](/src/webChatAdapter.js). 
-After running the bot, to see it in action, visit `http://localhost:8080`.
+# browser echo
+Bot Framework v4 browser bot sample
+
+The example shows the use of the `botbuilder-js` SDKs for the browser using the [BotFramework-WebChat](https://github.com/Microsoft/BotFramework-WebChat) and a custom [WebChatAdapter](/src/webChatAdapter.js).
 
 ## To try this sample
 - Clone the repository
     ```bash
     git clone https://github.com/microsoft/botbuilder-samples.git
     ```
-- In a terminal, navigate to samples/javascript_es6/01.a.browser-echo
+- In a terminal, navigate to `samples/javascript_es6/01.a.browser-echo`
     ```bash
     cd samples/javascript_es6/01.a.browser-echo
     ```
-- Install modules and start the bot
+- Install modules
+    ```bash
+    npm install
+    ```
+- Build the sample
+    ```bash
+    npm run build
+    ```
+- Start the bot
     ```bash
-    npm i && npm start
+    npm start
     ```
-- To see the bot in action, visit `http://localhost:8080` in a browser.
+- Launch a web browser and navigate to [http://localhost:8080](http://localhost:8080).
 
 # Adapters
 Developers can use the [BotAdapter](https://docs.microsoft.com/en-us/javascript/api/botbuilder-core/botadapter) abstract base class to implement their own custom adapters.
@@ -30,4 +40,4 @@ Hosting a bot in the browser provides these benefits:
 
 - [Azure Bot Service](https://docs.microsoft.com/en-us/azure/bot-service/bot-service-overview-introduction?view=azure-bot-service-4.0)
 - [Activity processing](https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-concept-activity-processing?view=azure-bot-service-4.0)
-- [Bot State and storage](https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-storage-concept?view=azure-bot-service-4.0)
+- [Bot State and storage](https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-storage-concept?view=azure-bot-service-4.0)
diff --git a/samples/javascript_es6/01.a.browser-echo/package.json b/samples/javascript_es6/01.a.browser-echo/package.json
@@ -1,32 +1,41 @@
 {
-  "name": "browser-echo",
-  "version": "1.0.0",
-  "description": "BotBuilder v4 echo bot using botframework-webchat",
-  "main": "app.js",
-  "scripts": {
-    "start": "webpack-dev-server",
-    "build-sample": "webpack"
-  },
-  "author": "Microsoft",
-  "license": "MIT",
-  "dependencies": {
-    "botbuilder-core": "^4.1.5",
-    "botframework-webchat": "^0.11.4"
-  },
-  "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "clean-webpack-plugin": "^0.1.18",
-    "copy-webpack-plugin": "^4.3.1",
-    "css-loader": "^0.28.9",
-    "eslint": "^5.6.0",
-    "eslint-config-standard": "^12.0.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-node": "^7.0.1",
-    "eslint-plugin-promise": "^4.0.1",
-    "eslint-plugin-standard": "^4.0.0",
-    "style-loader": "^0.20.1",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.11.1"
-  }
+    "name": "browser-echo",
+    "version": "1.0.0",
+    "description": "BotBuilder v4 echo bot using botframework-webchat",
+    "author": "Microsoft",
+    "license": "MIT",
+    "main": "app.js",
+    "scripts": {
+        "build": "webpack",
+        "start": "webpack-dev-server",
+        "lint": "./node_modules/.bin/eslint .",
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "dependencies": {
+        "botbuilder-core": "^4.1.5",
+        "botframework-webchat": "^0.11.4"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.1.0",
+        "@babel/core": "^7.1.0",
+        "@babel/plugin-proposal-class-properties": "^7.1.0",
+        "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+        "@babel/plugin-transform-runtime": "^7.1.0",
+        "@babel/preset-env": "^7.1.0",
+        "@babel/runtime": "^7.2.0",
+        "babel-loader": "^8.0.4",
+        "clean-webpack-plugin": "^1.0.0",
+        "copy-webpack-plugin": "^4.3.1",
+        "css-loader": "^1.0.1",
+        "eslint": "^5.6.0",
+        "eslint-config-standard": "^12.0.0",
+        "eslint-plugin-import": "^2.14.0",
+        "eslint-plugin-node": "^8.0.0",
+        "eslint-plugin-promise": "^4.0.1",
+        "eslint-plugin-standard": "^4.0.0",
+        "style-loader": "^0.23.1",
+        "webpack": "^4.27.0",
+        "webpack-cli": "^3.1.2",
+        "webpack-dev-server": "^3.1.10"
+    }
 }
diff --git a/samples/javascript_es6/01.a.browser-echo/src/app.js b/samples/javascript_es6/01.a.browser-echo/src/app.js
@@ -12,9 +12,9 @@ const webChatAdapter = new WebChatAdapter();
 
 // Connect our BotFramework-WebChat App instance with the DOM.
 App({
-    user: { id: "Me!" },
-    bot: { id: "bot" },
-    botConnection: webChatAdapter.botConnection,
+    user: { id: 'Me!' },
+    bot: { id: 'bot' },
+    botConnection: webChatAdapter.botConnection
 }, document.getElementById('bot'));
 
 // Instantiate MemoryStorage for use with the ConversationState class.
@@ -33,16 +33,16 @@ webChatAdapter.processActivity(async (turnContext) => {
         // Read from state.
         let count = await countProperty.get(turnContext);
         count = count === undefined ? 1 : count;
-        await turnContext.sendActivity(`${count}: You said "${turnContext.activity.text}"`);
+        await turnContext.sendActivity(`${ count }: You said "${ turnContext.activity.text }"`);
         // Increment and set turn counter.
         await countProperty.set(turnContext, ++count);
     } else {
-        await turnContext.sendActivity(`[${turnContext.activity.type} event detected]`);
+        await turnContext.sendActivity(`[${ turnContext.activity.type } event detected]`);
     }
     await conversationState.saveChanges(turnContext);
 });
 
 // Prevent Flash of Unstyled Content (FOUC): https://en.wikipedia.org/wiki/Flash_of_unstyled_content
-document.addEventListener('DOMContentLoaded', function () {
-    requestAnimationFrame(() => document.body.style.visibility = 'visible');
+document.addEventListener('DOMContentLoaded', () => {
+    window.requestAnimationFrame(() => { document.body.style.visibility = 'visible'; });
 });
diff --git a/samples/javascript_es6/01.a.browser-echo/src/webChatAdapter.js b/samples/javascript_es6/01.a.browser-echo/src/webChatAdapter.js
@@ -32,8 +32,7 @@ export class WebChatAdapter extends BotAdapter {
                         id,
                         conversation: { id: 'bot' },
                         channelId: 'WebChat'
-                    })
-                    .then(() => id)
+                    }).then(() => id)
                 );
             }
         };

diff --git a/samples/javascript_es6/01.a.browser-echo/webpack.config.js b/samples/javascript_es6/01.a.browser-echo/webpack.config.js
@@ -10,20 +10,31 @@ module.exports = {
         contentBase: './dist',
         hot: true
     },
+    mode: 'development',
     module: {
-      rules: [
-          {
-              test: /\.css$/,
-              use: [ 'style-loader', 'css-loader' ]
-          }
-      ]
+        rules: [
+            {
+                test: /\.(jsx?)$/,
+                exclude: [/node_modules/],
+                use: {
+                    loader: 'babel-loader',
+                    'options': {
+                        'ignore': ['**/*.spec.ts']
+                    }
+                }
+            },
+            {
+                test: /\.css$/,
+                use: ['style-loader', 'css-loader']
+            }
+        ]
     },
     plugins: [
         new CleanWebpackPlugin(['dist']),
         new webpack.NamedModulesPlugin(),
         new webpack.HotModuleReplacementPlugin(),
         new CopyWebpackPlugin([
-            {from: path.resolve(__dirname, 'index.html'), to: ''},
+            { from: path.resolve(__dirname, 'index.html'), to: '' }
         ])
     ],
     output: {
@@ -35,4 +46,4 @@ module.exports = {
         net: 'empty',
         tls: 'empty'
     }
-};
+};
diff --git a/samples/javascript_nodejs/14.nlp-with-dispatch/nlp-dispatch.dispatch b/samples/javascript_nodejs/14.nlp-with-dispatch/nlp-dispatch.dispatch
@@ -0,0 +1,10 @@
+{
+  "authoringRegion": "westus",
+  "hierarchical": true,
+  "serviceIds": [],
+  "authoringKey": "49f60c2376d24e4ba0e15380ad85e70b",
+  "version": "Dispatch",
+  "region": "westus",
+  "type": "dispatch",
+  "name": "nlp-dispatch"
+}
diff --git a/samples/javascript_nodejs/14.nlp-with-dispatch/nlp-with-luis.bot b/samples/javascript_nodejs/14.nlp-with-dispatch/nlp-with-luis.bot
@@ -0,0 +1,63 @@
+{
+    "name": "nlp-with-luis",
+    "description": "",
+    "services": [
+        {
+            "type": "luis",
+            "appId": "647b316e-6818-4017-b49b-2e1ad8abaa77",
+            "authoringKey": "49f60c2376d24e4ba0e15380ad85e70b",
+            "id": "37",
+            "name": "Home Automation",
+            "region": "westus",
+            "subscriptionKey": "49f60c2376d24e4ba0e15380ad85e70b",
+            "version": "0.1"
+        },
+        {
+            "type": "luis",
+            "appId": "0c69b97c-340e-4935-ac11-aabf90603445",
+            "authoringKey": "49f60c2376d24e4ba0e15380ad85e70b",
+            "id": "161",
+            "name": "Weather",
+            "region": "westus",
+            "subscriptionKey": "49f60c2376d24e4ba0e15380ad85e70b",
+            "version": "0.1"
+        },
+        {
+            "type": "qna",
+            "endpointKey": "8303a6a2-5715-465d-a094-dbafc25072b3",
+            "hostname": "https://juwilabyqnamaker.azurewebsites.net/qnamaker",
+            "id": "99",
+            "kbId": "34210d20-3f10-4f86-ae60-df00e3dba364",
+            "name": "sample-qna",
+            "subscriptionKey": "63fc7124e8c144bdb4b70c36ce4dcbe1"
+        },
+        {
+            "type": "dispatch",
+            "authoringKey": "49f60c2376d24e4ba0e15380ad85e70b",
+            "authoringRegion": "westus",
+            "hierarchical": true,
+            "name": "nlp-dispatch",
+            "region": "westus",
+            "serviceIds": [],
+            "appId": "74889c9b-158e-4607-8dac-f7d138373b98",
+            "endpoint": "https://juwilabyqnamaker.azurewebsites.net",
+            "version": "Dispatch"
+        },
+        {
+            "type": "endpoint",
+            "endpoint": "https://westus.api.cognitive.microsoft.com/luis/v2.0/apps/0c69b97c-340e-4935-ac11-aabf90603445?subscription-key=49f60c2376d24e4ba0e15380ad85e70b&timezoneOffset=-360&q=",
+            "name": "NLP with luis",
+            "id": "65"
+        },
+        {
+            "type": "endpoint",
+            "endpoint": "http://localhost:3978",
+            "name": "local NLP with luis",
+            "id": "219"
+        }
+    ],
+    "padlock": "",
+    "version": "2.0",
+    "path": "/Users/microsoft/Documents/dev/BotBuilder-Samples/samples/javascript_nodejs/14.nlp-with-dispatch/nlp-with-luis.bot",
+    "overrides": null
+}