Quick Start

In this Quick Start you will be getting a dice roller Fluid application up and running first on your computer’s localhost, then deploy it to an Azure Fluid Relay instance to collaborate with others.

Set up your development environment

To get started you need the following installed.

We also recommend that you install the following:

Getting started

Open a new command window and navigate to the folder you where you want to install the project, and then clone the FluidHelloWorld repo with the following commands. The cloning process will create a subfolder named FluidHelloWorld with the project files in it.

git clone https://github.com/microsoft/FluidHelloWorld.git

Note

If you don’t have Git installed you can click here to download a zip of the FluidHelloWorld repo. Once the file downloads, extract the contents of the .zip file and run the following steps.

Navigate to the newly created folder and install required dependencies.

cd FluidHelloWorld
npm install

Start both the client and a local server.

npm start

A new browser tab will open to http://localhost:8080 and you will see the dice roller appear! To see collaboration in action copy the full URL in the browser, including the ID, into a new window or even a different browser. This opens a second client for your dice roller application. With both windows open, click the Roll button in either and note that the state of the dice changes in both clients.

Running against the Azure Fluid Relay service

To run against the Azure Fluid Relay service, you’ll make a code change to app.ts. The app is configured to use a local in-memory service called Tinylicious, which runs on port 7070 by default.

To use an Azure Fluid Relay instance instead, replace the configuration values with your Azure Fluid Relay tenant ID, orderer, and storage URLs that were provided as part of the onboarding process. Then pass that configuration object into the FrsClient constructor:

// This configures the FrsClient to use a remote Azure Fluid Service instance.
const config: FrsConnectionConfig = {
    tenantId: "myFrsTenantId",
    // IMPORTANT: this token provider is suitable for testing ONLY. It is NOT secure.
    tokenProvider: new InsecureTokenProvider("myFrsTenantKey", { id: "UserId", name: "Test User" }),
    orderer: "https://myFrsOrdererUrl",
    storage: "https://myFrsStorageUrl",
}

const client = new FrsClient(config);

TokenProvider

The Azure Fluid Relay onboarding process provides you with a secret key for your tenant. You can use InsecureTokenProvider to generate and sign auth tokens such that the Azure Fluid Relay service service will accept it. To ensure that the secret doesn’t get exposed, this should be replaced with another implementation of ITokenProvider that fetches the token from a secure, developer-provided backend service prior to releasing to production.

Build and run the client only

Now that you’ve updated the FrsClient configuration, now run just the client to test it. You no longer need to run a local service, because you’re using the remote Azure Fluid Relay service instance!

npm run start:client

🥳Congratulations🎉 You have successfully taken the first step towards unlocking the world of Fluid collaboration.