external-views

@fluid-example/app-integration-external-views

Dice Roller is a basic example that has a die and a button. Clicking the button re-rolls the die and persists the value in the root SharedDirectory. The Fluid Container is defined in container/, the data object is defined in dataObject/.

This implementation demonstrates plugging that Container into a standalone application, rather than using the webpack-fluid-loader environment that most of our packages use. This implementation relies on Tinylicious, so there are a few extra steps to get started. We bring our own view that we will bind to the data in the container.

Getting Started

You can run this example using the following steps:

1. Run npm install and npm run build:fast -- --nolint from the FluidFramework root directory.
   • For an even faster build, you can add the package name to the build command, like this: npm run build:fast -- --nolint @fluid-example/app-integration-external-views
2. In a separate terminal, start a Tinylicious server by following the instructions in Tinylicious.
3. Run npm run start from this directory (examples/hosts/app-integration/external-views) and open http://localhost:8080 in a web browser to see the app running.

Testing

    npm run test:jest

For in browser testing update ./jest-puppeteer.config.js to:

  launch: {
    dumpio: true, // output browser console to cmd line
    slowMo: 500,
    headless: false,
  },

Data model

Dice Roller uses the following distributed data structures:

• SharedDirectory - root