react-real-time - Replaced Microsoft Flow by Azure Logic Apps (#58)

* Replaced Microsoft Flow with Azure Logic Apps

* Update README.md

samples/react-real-time/Deploy-Solution.ps1

@@ -40,6 +40,7 @@ Login-AzureRmAccount
 
 $GitPublishingUserName = "tempdeployuser" + [Guid]::NewGuid();
 $GitPublishingUserPassword = "socketio123!"
+$LogicAppName = "LogicApp" + [Guid]::NewGuid();
 $AzureSBNamespace = "ServiceBus" + [Guid]::NewGuid();
 $AzureWebAppName = "WebApp" + [Guid]::NewGuid()
 $AppServicePlanName = "ServicePlan" + [Guid]::NewGuid()
@@ -66,6 +67,7 @@ Try {
     # More information here: https://azure.microsoft.com/en-us/documentation/articles/resource-group-authoring-templates/#resources
 
     $TemplateParameters = @{
+        "LogicAppName" = $LogicAppName
         "ServiceBusNameSpace"=$AzureSBNamespace;
         "AppServicePlanName"= $AppServicePlanName;
         "SiteName"=$AzureWebAppName;

samples/react-real-time/README.md

@@ -1,8 +1,8 @@
-# Real Time News Feed using Microsoft Flow, Azure and socket.io #
+# Real Time News Feed using Azure Logic Apps, Node.js and socket.io #
 
 ## Summary
 
-This sample shows you how to implement real time web parts using the SPFx, Microsoft Flow and [socket.io](http://socket.io/).
+This sample shows you how to implement real time web parts using the SPFx, Azure Logic Apps, Node.js and [socket.io](http://socket.io/).
 
 <p align="center">
   <img width="900" src="./assets/animated-demo.gif"/>
@@ -17,11 +17,11 @@ Here is the solution overview:
 </p>
 
 1. The SPFx Web Part first connects to the Azure web application via socket.io and subscribes to events (the web application have to be in https and allow cross domain calls (CORS)).
-2. Microsoft Flow is used to catch new item creation events in the SharPoint list.
+2. An Azure logic app is used to catch new item creation events in the SharPoint list.
 3. When an item is added, the flow sends its id to an Azure service bus queue using JSON format.
-4. A Node JS Azure web application listens to the queue and check for new messages every 5 ms.
+4. A Node.js Azure web application listens to the queue and check for new messages every 5 ms.
 5. When a new message is available, the web application emits the data to all subscribers via socket.io.
-6. The SPFx Web Part notifies user there are new items available. Items are effectively retrieved via REST according to received ids when the user clicks on the notification.
+6. The SPFx Web Part notifies user there are new items available. Items are effectively retrieved using REST according to received ids when the user clicks on the notification.
 
 ## Applies to
 
@@ -52,6 +52,7 @@ react-real-time | Franck Cornu (MVP, [@franckcornu](https://twitter.com/FranckCo
 Version|Date|Comments
 -------|----|--------
 1.0|October 25, 2016 | Initial commit
+1.1|November 4, 2016 | Replaced Microsoft Flow by Azure Logic Apps
 
 ## Disclaimer
 **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
@@ -95,6 +96,7 @@ Version|Date|Comments
 
     $GitPublishingUserName = "tempdeployuser" + [Guid]::NewGuid();
     $GitPublishingUserPassword = "socketio123!"
+    $LogicAppName = "LogicApp" + [Guid]::NewGuid();
     $AzureSBNamespace = "ServiceBus" + [Guid]::NewGuid();
     $AzureWebAppName = "WebApp" + [Guid]::NewGuid()
     $AppServicePlanName = "ServicePlan" + [Guid]::NewGuid()
@@ -115,10 +117,10 @@ Version|Date|Comments
 
    You can let the `gulp serve` cmd running.
 
-6. Because there is no automated mechanism to provision new template in the Microsoft Flow application, you have to manually create the flow on the SharePoint list in your developer site.
-   Go the 'NewsList' and create a new flow from scratch and add the following steps:
+6. Because you have to configure your SharePoint connection with your own credentials, you need to create the worflow manually in the Azure logic app.
+ Go to your Azure portal, select the "*SPFxSocketIODemo*" resource group, and open the Logic App designer. From a blank template, add the following action.
 
-- **[Condition]** *"SharePoint - When a new item is created"*
+- **[Condition]** *"SharePoint - When a new item is created"*. Select 3 seconds interval.
 - **[Action]** *"Service Bus - Send Message"*
 
     <p align="center">

samples/react-real-time/azure-deploy.json

@@ -2,6 +2,10 @@
     "$schema": "https://schema.management.azure.com/schemas/2015-01-01/deploymentTemplate.json#",
     "contentVersion": "1.0.0.0",
     "parameters": {
+        "LogicAppName": {
+            "defaultValue": "",
+            "type": "string"
+        },
         "ServiceBusNameSpace": {
             "defaultValue": "",
             "type": "string"
@@ -147,6 +151,23 @@
             "dependsOn": [
                 "[resourceId('Microsoft.ServiceBus/namespaces', parameters('ServiceBusNameSpace'))]"
             ]
+        },
+        {
+            "type": "Microsoft.Logic/workflows",
+            "apiVersion": "2016-06-01",
+            "name": "[parameters('LogicAppName')]",
+            "location": "[parameters('Location')]",
+            "properties": {
+                "definition": {
+                "$schema": "https://schema.management.azure.com/providers/Microsoft.Logic/schemas/2016-06-01/workflowdefinition.json#",
+                "contentVersion": "1.0.0.0",
+                "parameters": {},
+                "triggers": {},
+                "actions": {},
+                "outputs": {}
+                },
+                "parameters": {}
+            }
             }
     ]
 }

samples/react-real-time/client/config/config.json

@@ -14,7 +14,7 @@
     "react": "node_modules/react/dist/react.min.js",
     "react-dom": "node_modules/react-dom/dist/react-dom.min.js",
     "react-dom/server": "node_modules/react-dom/dist/react-dom-server.min.js",
-    "socket.io-client": "https://SPFxSocketIOWebAppdde17113-805a-4806-b5e6-43dbb5f61b9f.azurewebsites.net/socket.io/socket.io.js"
+    "socket.io-client": "https://WebAppac61f1b1-ecd7-4bc0-ad7d-619b0df1f757.azurewebsites.net/socket.io/socket.io.js"
   },
   "localizedResources": {
     "realTimeNewsFeedStrings": "webparts/realTimeNewsFeed/loc/{locale}.js"

samples/react-real-time/client/src/webparts/realTimeNewsFeed/components/RealTimeNewsFeed.tsx

@@ -59,7 +59,7 @@ export default class RealTimeNewsFeed extends React.Component<IRealTimeNewsFeedP
   public componentDidMount(): void {
 
     // Connect to the server
-    const socket = io("https://SPFxSocketIOWebAppdde17113-805a-4806-b5e6-43dbb5f61b9f.azurewebsites.net");
+    const socket = io("https://WebAppac61f1b1-ecd7-4bc0-ad7d-619b0df1f757.azurewebsites.net");
 
     // Add the socket io listeners
     socket.on('item:added', (data) => {