# Project configuration (/docs/products/dash-dots/developers/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

```json title="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" }
}
```

| Field                | What it is                                                                                                                                                 |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `package`            | Required. A domain you own, written backwards in lowercase. It can't change after you publish                                                              |
| `name`               | Required. The name people see, in 30 characters or fewer                                                                                                   |
| `version`            | Required. The release number. See [Number your releases](/docs/products/dash-dots/developers/publish-and-release#number-your-releases)                     |
| `id`                 | The dot's Monime ID. [`monime dot register`](/docs/products/dash-dots/developers/publish-and-release#register-the-dot) fills it in                         |
| `permissions`        | What the dot may ask the person for, each with a reason. See [Permissions](/docs/products/dash-dots/developers/security#permissions)                       |
| `network.hosts`      | The hosts the dot may call. Leave it out and the dot can't make requests. See [Network and storage](/docs/products/dash-dots/developers/network-and-files) |
| `dash.minApiVersion` | The Dash API version the dot needs                                                                                                                         |

The [dot.json reference](/docs/products/dash-dots/reference/dot-json) lists every field and its limits.

> **Warning:** If you kept the suggested `com.example…` package when you created the dot, change it to a domain you own before you [register the dot](/docs/products/dash-dots/developers/publish-and-release#register-the-dot).

### 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](/docs/products/dash-dots/reference/dash-api/versions) has the details.

## dot.ts

```ts title="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](/docs/products/dash-dots/developers/theming) explains. `configs` sets what [Dash's bars](/docs/products/dash-dots/developers/navigation#dashs-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](/docs/products/dash-dots/developers/pages-and-state#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.

```bash
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>`:

```xml
<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](/docs/products/dash-dots/developers/theming#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`:

```bash title=".env"
API_URL=https://api.boenergy.sl
```

```ts title="pages/index/controller.ts"
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.

> **Warning:** Anyone who has the dot can read `.env`, so [keep secrets off the phone](/docs/products/dash-dots/developers/security#keep-secrets-off-the-phone).