Changes made to polish the Glitch experience

.gitignore

@@ -42,3 +42,5 @@ jspm_packages
 build/
 _package/
 src/locale/locale.ts
+manifest/createdManifest/manifest.json
+manifest/createdManifest/createdManifest.zip

README.md

@@ -1,3 +1,33 @@
+# Fastest way to see this project in action
+
+* Remix and get the project running on Glitch by simply clicking (keep this tab open):<br>
+[![Remix on Glitch](https://cdn.glitch.com/2703baf2-b643-4da7-ab91-7ee2a2d00b5b%2Fremix-button.svg)](https://glitch.com/edit/#!/remix/incredible-court?GLITCH_NO_LINT=true&BASE_URI='https%3A%2F%2F'%22%24PROJECT_DOMAIN%22'.glitch.me'&MICROSOFT_APP_ID=NeedToSetThis&MICROSOFT_APP_PASSWORD=NeedToSetThis)
+
+* Wait a few moments for the project to start running. You can see the building of the project if you click the "Logs" button. You know it is running when you see something similar to this at the end of the logs:<br><br>
+Server running successfully<br>
+Endpoint to register in Bot Framework:<br>
+https://incredible-court.glitch.me/api/messages
+
+* Using the endpoint given in the logs (see step above), register a new bot (or update an existing bot) using the full endpoint as the bot's "Messaging endpoint".<br>
+**NOTE**: When you create your bot you will create an App ID and App password - make sure you keep these for later.<br>
+Bot registration is here: https://dev.botframework.com/bots
+
+* Once you have saved your bot and gotten the confirmation that it is created, navigate back to your Glitch project. In the project, open the ".env" file. There, copy/paste your App ID and App password from the step above in the environment variables replacing "NeedToSetThis".<br><br>
+e.g.<br>
+MICROSOFT\_APP\_ID=88888888-1111-2222-3333-999999999999<br>
+MICROSOFT\_APP\_PASSWORD=abc123abc123abc123abc12
+
+* With Glitch, file saves happen automatically, and the project is rebuilt seconds after the file is saved. Once you get the confirmation from the logs that your server is running again, press the "Show Live" button at the top.
+
+* This should open a page with information about your project, verification icons with green vs. red indicators, and a button to Create/Download a manifest file for the project.
+
+* Click to Create/Download the manifest taking note of the download location. Once complete, sideload the manifest to a team as described here: https://msdn.microsoft.com/en-us/microsoft-teams/sideload
+
+* Congratulations!!! You have just created and sideloaded your first Microsoft Teams app! Try adding a configurable tab, at-mentioning your bot's name, or viewing your static tabs.<br><br>
+NOTE: Most of the sample app's functionality will now work. The only limitations are the authentication examples because your app is not registered with AAD or Visual Studio Team Services.
+
+
+
 # Overview
 
 This project is meant to help a Teams developer in two ways.  First, it is meant to show many examples of how an app can integrate into Teams.  Second, it is meant to give a set of patterns, templates, and tools that can be used as a starting point for creating a larger, scalable, more enterprise level bot to work within Teams.  Although this project focuses on creating a robust bot, it does include simples examples of tabs as well as examples of how a bot can give links into these tabs.

gulpfile.js

@@ -70,14 +70,16 @@ gulp.task('locale:generate', function() {
  * Lint all TypeScript files.
  */
 gulp.task('ts:lint', ['locale:generate'], function () {
-    return gulp
-        .src(filesToLint)
-        .pipe(tslint({
-            formatter: 'verbose'
-        }))
-        .pipe(tslint.report({
-            summarizeFailureOutput: true
-        }));
+    if (!process.env.GLITCH_NO_LINT) {
+        return gulp
+            .src(filesToLint)
+            .pipe(tslint({
+                formatter: 'verbose'
+            }))
+            .pipe(tslint.report({
+                summarizeFailureOutput: true
+            }));
+    }
 });
 
 /**

src/app.ts

@@ -63,7 +63,7 @@ app.get("/tab-auth/silent-start", (req, res) => { res.render("tab-auth/silent-st
 app.get("/tab-auth/silent-end", (req, res) => { res.render("tab-auth/silent-end"); });
 
 app.get("/", ManifestCreatorStart.getRequestHandler());
-app.get("/createManifest", ManifestCreatorEnd.getRequestHandler());
+app.get("/createdManifest", ManifestCreatorEnd.getRequestHandler());
 
 // Create Teams connector for the bot
 let connector = new teams.TeamsChatConnector({
@@ -124,11 +124,19 @@ app.use(function(err: any, req: Request, res: Response, next: Function): void {
     });
 });
 
-let endpoint = config.get("app.baseUri") || "unknown";
+let baseUri = config.get("app.baseUri");
+let validBaseUri = !(/^https:\/\/localhost|^http:\/\/localhost|^localhost/i.test(baseUri));
 
 http.createServer(app).listen(app.get("port"), function (): void {
+    console.log(""); // for blank line for readability
     console.log("Express server listening on port " + app.get("port"));
-    console.log("Public bot messaging endpoint: " + endpoint + "/api/messages");
+    console.log(""); // for blank line for readability
+    console.log("Server running successfully");
+    // only return message to register in Bot Framework if it is set to something other than your locally running instance
+    if (validBaseUri) {
+        console.log("Endpoint to register in Bot Framework:");
+        console.log(baseUri + "/api/messages");
+    }
 });
 
 module.exports = app;

src/pages/ManifestCreatorStart.ts

@@ -6,12 +6,18 @@ export class ManifestCreatorStart {
     public static getRequestHandler(): express.RequestHandler {
         return async function (req: any, res: any, next: any): Promise<void> {
             let baseUri = config.get("app.baseUri");
+            // a valid base uri cannot simply be your locally running instance
+            let validBaseUri = baseUri && !(/^https:\/\/localhost|^http:\/\/localhost|^localhost/i.test(baseUri));
             let appId = config.get("bot.botId");
+            // this is to check against the default value I put in the env variable for the Glitch deployment
+            let validAppId = appId && appId !== "NeedToSet";
 
             res.render("manifest-creator/manifestCreatorStart", {
                 baseUri: baseUri,
+                validBaseUri: validBaseUri,
                 appId: appId,
-                buttonEnabled: baseUri && appId,
+                validAppId: validAppId,
+                createManifestEnabled: validBaseUri && validAppId,
             });
         };
     }

src/views/manifest-creator/manifestCreatorStart.hbs

@@ -25,41 +25,53 @@
         <h1>Manifest Creator</h1>
 
         <div style="padding: 50px 0px 0px 0px">
-        {{#if baseUri}}
+        {{#if validBaseUri}}
             <div style="height:20px; width:20px; background-color:green; float:left;"></div>
-            <p style="float:left; margin:0px 0px 0px 10px;">Base URI to use: {{baseUri}}</p>
+            <p style="float:left; margin:0px 0px 0px 10px;">Endpoint to register in Bot Framework: {{baseUri}}/api/messages</p>
         {{else}}
             <div style="height:20px; width:20px; background-color:red; float:left;"></div>
-            <p style="float:left; margin:0px 0px 0px 10px;">Base URI to use: unknown - set environment variable BASE_URI</p>
+            <p style="float:left; margin:0px 0px 0px 10px;">Endpoint to register in Bot Framework: unknown - set environment variable BASE_URI</p>
         {{/if}}
         </div>
 
         <br>
 
         <div style="padding: 5px 0px 0px 0px">
-        {{#if appId}}
+        {{#if validBaseUri}}
             <div style="height:20px; width:20px; background-color:green; float:left;"></div>
-            <p style="float:left; margin:0px 0px 0px 10px;">App ID to use: {{appId}}</p>
+            <p style="float:left; margin:0px 0px 0px 10px;">Base URI to use in manifest: {{baseUri}}</p>
         {{else}}
             <div style="height:20px; width:20px; background-color:red; float:left;"></div>
-            <p style="float:left; margin:0px 0px 0px 10px;">App ID to use: unknown - set environment variable MICROSOFT_APP_ID</p>
+            <p style="float:left; margin:0px 0px 0px 10px;">Base URI to use in manifest: unknown - set environment variable BASE_URI</p>
+        {{/if}}
+        </div>
+
+        <br>
+
+        <div style="padding: 5px 0px 0px 0px">
+        {{#if validAppId}}
+            <div style="height:20px; width:20px; background-color:green; float:left;"></div>
+            <p style="float:left; margin:0px 0px 0px 10px;">App ID to use in manifest: {{appId}}</p>
+        {{else}}
+            <div style="height:20px; width:20px; background-color:red; float:left;"></div>
+            <p style="float:left; margin:0px 0px 0px 10px;">App ID to use in manifest: unknown - set environment variable MICROSOFT_APP_ID</p>
         {{/if}}
         </div>
 
         <br>
         <br>
 
-        {{#if buttonEnabled}}
-            <button type="button" onclick="createManifest()">Download Manifest</button>
+        {{#if createManifestEnabled}}
+            <button type="button" onclick="createManifest()">Create/Download Manifest</button>
         {{else}}
-            <button type="button" disabled>Download Manifest</button>
+            <button type="button" disabled>Create/Download Manifest</button>
             <br>
             <p>Note: In order to create a manifest, all requirements above must be met with environment variables.</p>
         {{/if}}
 
         <script type="text/javascript">
             function createManifest() {
-                window.location = window.location.protocol + '//' + window.location.host + '/createManifest'
+                window.location = window.location.protocol + '//' + window.location.host + '/createdManifest'
             } 
         </script>
     </body>

watch.json

@@ -16,5 +16,5 @@
             "\\.ts"
         ]
     },
-    "throttle": 5000
+    "throttle": 2000
 }