Project configuration

dot.json tells Dash who your dot is and what it may use. dot.ts lists the pages and sets what applies to all of them.

dot.json

{
  "id": "dot-k6Em1Aap25VZ8oWg7ajhxHX3JqF",
  "$schema": "https://unpkg.com/@monimesl/dot-runtime/dot.schema.json",
  "package": "sl.boenergy.meter",
  "name": "Meter Top-up",
  "version": "1.0.0",
  "permissions": { "camera": "Scan the meter number on your bill" },
  "network": { "hosts": ["api.boenergy.sl"] },
  "dash": { "minApiVersion": "1.0" }
}

The dot.json reference lists every field and its limits.

Which Dash opens your dot

dash.minApiVersion is the oldest Dash API version your dot works with. If you leave it out, Dash assumes 1.0. If someone's Dash is older than this version, it asks them to update. When you use a newer call, raise this number, or keep it and check this.dash.supports(...) first. Versions has the details.

dot.ts

export default defineDot({
  pages: ['index', 'confirm', 'receipt'],
  theme: {
    colors: { primary: { light: '#0168CC', dark: '#6CB4FF' } },
    shape: 'soft',
  },
  configs: { navigationBar: { title: 'Bo Energy' } },
  hooks: {
    onError(error) {
      console.error(error);
    },
  },
});

pages lists every page, and the dot opens on the first one. theme sets the dot's colors and corner shape, as Theming explains. configs sets what Dash's bars show on every page, here a title in place of the dot's name. hooks.onError gets the errors your pages don't catch (see Errors).

You don't import definePage, defineDot or env. They're available in every file.

Pages

Each page is a folder under pages/, and its path is the page's id. pages/cart/checkout/ is the page cart/checkout. Inside are view.dml for what it shows, state.ts for the data it starts with and controller.ts for how that data changes.

monime dot create page cart/checkout

That makes the folder and adds the page to dot.ts. If you mistype a page id in this.navigation, your editor flags it.

Images

Put images in statics/ and use them as statics/<path>:

<Image src="statics/logo.png" alt="Logo" width="40" height="40" />

Use PNG, JPEG, GIF, WebP or SVG files of 1 MB or less. An SVG can only hold shapes, which is what your own icons use. The build tells you if an image is missing or isn't what its extension says.

Public settings

Your API's address and other settings go in .env. Read them as env.NAME:

API_URL=https://api.boenergy.sl

const response = await this.dash.network.http.request({ url: `${env.API_URL}/meters`, as: 'json' });

monime dot dev also reads .env.development, and monime dot build also reads .env.production. Values in those files win over .env. Names use capitals, digits and underscores.