This is a sample application to show how the Chat Web SDK can be used to build a single threaded chat experience. The client-side application is a React based user interface which uses Redux for handling complex state while leveraging Microsoft Fluent UI. Powering this front-end is a C# web application powered by ASP.NET Core to connect this application with Azure Communication Services.
Additional documentation for this sample can be found on Microsoft Docs.
- Create an Azure account with an active subscription. For details, see Create an account for free.
- Node.js (12.18.4 and above)
- Visual Studio (2017 and above)
- .NET Core 3.1 (Make sure to install version that corresponds with your visual studio instance, 32 vs 64 bit)
- Create an Azure Communication Services resource. For details, see Create an Azure Communication Resource. You'll need to record your resource connection string for this quickstart.
- ./Chat/ClientApp: frontend client
- ./Chat/ClientApp/src
- ./Chat/ClientApp/src/Components : React components to help build the client app chat experience
- ./Chat/ClientApp/src/Containers : Connects the redux functionality to the React components
- ./Chat/ClientApp/src/Core : Containers a redux wrapper around the Chat SDK
- ./Chat/ClientApp/src/index.js : Entry point for the client app
- ./Chat/ClientApp/src
- ./Chat/Controllers : Server app core logic for client app to get a token to use with the Azure Communication Services Web Chat SDK
- ./Chat/Program.cs : Server app program logic
- ./Chat/Startup.cs: Server app startup logic
- Open an instance of PowerShell, Windows Terminal, Command Prompt or equivalent and navigate to the directory that you'd like to clone the sample to.
git clone https://github.com/Azure-Samples/communication-services-web-chat-hero.git
- Get the
Connection String
from the Azure portal. For more information on connection strings, see Create an Azure Communication Resources - Once you get the
Connection String
, Add the connection string to the Chat/appsettings.json file found under the Chat folder. Input your connection string in the variable:ResourceConnectionString
.
- Go to the Chat folder and open the
Chat.csproj
solution in Visual Studio - Run the project. The browser will open at localhost:5000.
-
Solution doesn't build, it throws errors during NPM installation/build
Clean/rebuild the C# solution
- Right click the
Chat
project and select Publish - Create a new publish profile and select your app name, Azure subscription, resource group and etc.
- Before publish, add your connection string with
Edit App Service Settings
, and fill inResourceConnectionString
as key and connection string (copy from appsettings.json) as value
- Azure Communication Chat SDK - To learn more about the chat web sdk
- Redux - Client-side state management
- FluentUI - Microsoft powered UI library
- React - Library for building user interfaces
- ASP.NET Core - Framework for building web applications