Example Patterns Sheet

Join the Closed Beta

The Beacon SDK is currently in closed Beta. Please complete the form to sign up for the closed beta.

Join to get access to the Beacon SDK, the community sheet repo for Beacon sheet, the community sheet developers in discord, and the new sheet developer Roll20 permissions.

Prerequisites

To set this sheet up properly, make sure that you have the following:

  • Vue framework & Routing
  • Multiple Data Stores
  • Complex Roll Templates
  • Rich Sheet Actions
  • TypeScript
  • Vite
  • SCSS
  • Ability to run Unit & End-to-End Tests

To download the community quick start sheet, refer to these repositories:

Figure 1: Advanced sheet

This sheet uses the same steps listed in the . Immediately after implementing those three steps, you’ll add the following step:

  • Run a CI check: This will run several checks to ensure your code is as optimal as possible, including formatting, linting, type checking, unit tests, and end-to-end tests.
npm run ci-check

You can think of this command as a sanity check you can leverage when pushing a big release for your sheet!

Useful Commands

The following set of commands can come in handy when working with this sheet:

  • For Hot reloading and building CSS files, use the following command:
npm run watch-scss
  • For linting, use the following command:
npm run lint
  • For formatting with Prettier, use the following command:
npm run format
  • For type checking with TypeScript, use the following command:
npm run type-check
  • For running unit tests with Vitest, use the following command:
npm run test:unit
  • To open up and develop local end-to-end tests with Cypress, use the following command:
npm run test:e2e:open:local
  • For running local end-to-end tests with Cypress, use the following command:
npm run test:e2e:local
  • To run CDN-hosted end-to-end tests with Cypress, use the following command:
npm run test:e2e