# Build

De asset-build, watch-modus, je eigen toolchain en statische bestanden.

De asset-build zet de styles, scripts en interfaceteksten van het project om in de bestanden die de browser laadt. PHP en templates hebben geen build nodig: een wijziging aan een template of library is bij het volgende request live.

## Commando's

```bash
./nimbly build      # everything: Tailwind, CSS, JavaScript and texts
./nimbly watch      # build once, then rebuild on every change
```

| Stap | Leest | Schrijft |
|---|---|---|
| Tailwind | de classes in elke `.tpl` van `core/` en `ext/` | `css/tw/out.css` |
| CSS | `css/index.css`, de uitvoer van Tailwind en `ext/theme.css` | `ext/static/app.css` |
| JavaScript | `js/index.jsx` en wat het importeert, inclusief Alpine | `ext/static/app.js` |
| Teksten | de `.po`-bestanden van core en `ext/data/.i18n/` | de samengevoegde vertalingen |

`ext/static/app.version` verandert bij elke build, zodat browsers de nieuwe bestanden ophalen. `ext/static/app.core` legt vast vanaf welke core-commit de assets zijn gebouwd; het dashboard waarschuwt als core sindsdien build-invoer heeft veranderd.

Draai een build na een core-update, en nadat je styles, scripts, Tailwind-classes of tekstbestanden hebt aangepast. Commit de gebouwde bestanden met de wijziging, of bouw ze in je deploypipeline.

## Je eigen toolchain

De standaardbuild dekt de standaardstack. Een route die React, Vue, Svelte of een andere toolset gebruikt, bouwt met de eigen tools van die toolset. Houd de broncode en `package.json` ervan in een eigen map binnen `ext/`, en schrijf de uitvoer naar `ext/static/`:

```js
// ext/planner/vite.config.js
export default {
  build: {
    outDir: '../static/planner',
    emptyOutDir: true,
    rollupOptions: { input: 'src/main.jsx', output: { entryFileNames: 'main.js', assetFileNames: '[name][extname]' } },
  },
};
```

Bestanden in `ext/static/` worden vanaf de root van de site geleverd, dus deze build staat op `/planner/main.js`. Vaste bestandsnamen houden de template van de route eenvoudig. Verander na elke build de versie in het adres, zoals `main.js?v=3`, zodat browsers de nieuwe bestanden ophalen. Zie [Frontendstack](/nl/docs/guides/frontend/).

## Statische bestanden

Alles in `ext/static/` wordt geleverd zoals het is, en een bestand daar vervangt het bestand met dezelfde naam in `core/static/`. Zo stelt een project zijn eigen favicon, web-app-manifest en iconen in.