Brainstorm is an example of using the Fluid Framework to build a collaborative line of business application. In this example each user can create their own sticky notes that is managed on a board. Ideas that have been "liked" appear in a list and are sorted based upon the number likes.
There are 3 branches available in this repo:
main- Fluid Framework application demoacs- Fluid Framework and Azure Communication Services chat demom365- Fluid Framework, Microsoft Graph Toolkit, Microsoft 365, Event Hub, Azure Functions, SignalR demo
Follow the steps below to run this in local mode (Azure local service):
Run npm install from the brainstorm folder root
Run npx @fluidframework/azure-local-service@latest to start the Azure local service for testing and development
Run npm run start to start the client
Navigate to http://localhost:3000 in a browser tab
📝 NOTE
Azure local service is a local, self-contained test service. Running npx @fluidframework/azure-local-service@latest from your terminal window will launch the Azure local server. The server will need to be started first in order to provide the ordering and storage requirement of the Fluid runtime.
To run this follow the steps below:
- Go to the Azure portal and search for
Fluid Relay. - Create a new Azure Fluid Relay resource and note the
Tenant Id,Primary key, andOrderer EndpointandStorage Endpointvalues. - Rename the
.env-templatefile in the root of the project to.env. - Replace the values in the
.envfile with the appropriate values from the Azure portal. - Open a terminal window at the root of the project.
- Run
npm installfrom the root - Run
export REACT_APP_FLUID_CLIENT=useAzurein the terminal to create an environment variable (if using PowerShell run$env:REACT_APP_FLUID_CLIENT='useAzure'). This will cause the app to use Fluid Relay service instead ofazure-local-servicefor the Fluid relay service. ) - Run
npm startto start the client - Navigate to
http://localhost:3000in a browser tab
-
Navigate to
http://localhost:3000You'll be taken to a url similar to 'http://localhost:3000/**#a9c16d13-43fa-413a-859c-514e5bcaba3c**' the path
#a9c16d13-43fa-413a-859c-514e5bcaba3cspecifies one brainstorm document. -
Create another chrome tab with
http://localhost:3000/**#a9c16d13-43fa-413a-859c-514e5bcaba3c**Now you can create notes, write text, change colors and more!