|
2 | 2 |
|
3 | 3 | A step by step tutorial to build a chat room with real-time online counting using Azure Functions, Event Grid, App Service Authentication, and SignalR Service. |
4 | 4 |
|
| 5 | +- [Prerequisites](#prerequisites) |
| 6 | +- [Initialize the function app](#initialize-function-app) |
| 7 | +- [Deploy and run function app on Azure](#deploy-to-azure) |
| 8 | +- [Enable authentication on Azure](#enable-authentication) |
| 9 | +- [Build and run the sample locally](#build-locally) |
| 10 | + |
| 11 | +<a name="prerequisites"></a> |
5 | 12 | ## Prerequisites |
6 | 13 |
|
7 | 14 | The following software is required to build this tutorial. |
8 | 15 |
|
9 | | -* [Git](https://git-scm.com/downloads) |
10 | 16 | * [Node.js](https://nodejs.org/en/download/) (Version 10.x) |
11 | 17 | * [.NET SDK](https://www.microsoft.com/net/download) (Version 2.x, required for Functions extensions) |
12 | 18 | * [Azure Functions Core Tools](https://github.com/Azure/azure-functions-core-tools) (Version 2) |
13 | | -* [Visual Studio Code](https://code.visualstudio.com/) (VS Code) with the following extensions |
14 | | -* [Azure Functions](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions) - work with Azure Functions in VS Code |
15 | | -* [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) - serve web pages locally for testing (Local running) |
16 | | -* [ngrok](https://ngrok.com/) - Public URLs for exposing your local Event Grid trigger (Local running) |
17 | 19 |
|
18 | 20 | ### Create an Azure SignalR Service instance |
19 | 21 |
|
@@ -41,15 +43,22 @@ An Azure Storage account is required by a function app using Event Grid trigger. |
41 | 43 | az storage account create -n <storage-account-name> -g <resource-group-name> -l <location> --sku Standard_LRS --kind StorageV2 |
42 | 44 | ``` |
43 | 45 |
|
| 46 | +<a name="initialize-function-app"></a> |
44 | 47 | ## Initialize the function app |
45 | 48 |
|
46 | | -### Configure application settings |
| 49 | +- Git clone the project and open the folder with VS Code |
| 50 | + |
| 51 | + ```bash |
| 52 | + git clone git@github.com:aspnet/AzureSignalR-samples.git |
| 53 | +
|
| 54 | + cd AzureSignalR-samples/samples/EventGridIntegration/javascript |
| 55 | + ``` |
47 | 56 |
|
48 | | -When running and debugging the Azure Functions runtime locally, application settings are read from **local.settings.json**. Update this file with the connection string of the SignalR Service instance that you created earlier. |
| 57 | +### Configure application settings |
49 | 58 |
|
50 | | -1. In the root folder of project, create a file named **local.settings.json** and open it. |
| 59 | +When running and debugging the Azure Functions runtime locally, application settings are read from **local.settings.json**. Also, you can upload there settings to remote when you try to deploy Function App to Azure. Update this file with the connection string of the SignalR Service instance that you created earlier. |
51 | 60 |
|
52 | | -1. Replace the file's contents with the following. |
| 61 | +1. Open the file **local.settings.json** and update the settings. |
53 | 62 |
|
54 | 63 | ```json |
55 | 64 | { |
@@ -85,10 +94,13 @@ When running and debugging the Azure Functions runtime locally, application sett |
85 | 94 |
|
86 | 95 | 1. Open the terminal and run `func extensions install` to install all the dependencies. |
87 | 96 |
|
| 97 | +<a name="deploy-to-azure"></a> |
88 | 98 | ## Deploy and run function app on Azure |
89 | 99 |
|
90 | 100 | ### Deploy function app to Azure |
91 | 101 |
|
| 102 | +1. In the VS Code, install the [Azure Functions Extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions). |
| 103 | + |
92 | 104 | 1. Open the VS Code command palette (`Ctrl-Shift-P`, macOS: `Cmd-Shift-P`) and select **Azure Functions: Deploy to Function App**. |
93 | 105 |
|
94 | 106 | 1. When prompted, provide the following information. |
@@ -188,6 +200,7 @@ Although there is a CORS setting in **local.settings.json**, it is not propagate |
188 | 200 |
|
189 | 201 |  |
190 | 202 |
|
| 203 | +<a name="enable-authentication"></a> |
191 | 204 | ## Enable authentication on Azure |
192 | 205 |
|
193 | 206 | ### Enable App Service Authentication |
@@ -240,8 +253,14 @@ App Service Authentication supports authentication with Azure Active Directory, |
240 | 253 |
|
241 | 254 |  |
242 | 255 |
|
| 256 | +<a name="build-locally"></a> |
243 | 257 | ## Build and run the sample locally |
244 | 258 |
|
| 259 | +### Prerequisites |
| 260 | +
|
| 261 | +* [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) - serve web pages locally for testing |
| 262 | +* [ngrok](https://ngrok.com/) - Public URLs for exposing your local Event Grid trigger |
| 263 | +
|
245 | 264 | ### Create an ngrok endpoint |
246 | 265 |
|
247 | 266 | When running Event Grid trigger locally, you need a tool to proxy events to your local endpoint like [ngrok](https://ngrok.com/). For more details about running Event Grid trigger locally, go to the [document](https://docs.microsoft.com/en-us/azure/azure-functions/functions-debug-event-grid-trigger-local) |
|
0 commit comments