# Build

O build de assets, o modo watch, sua própria toolchain e arquivos estáticos.

O build de assets transforma os estilos, scripts e textos da interface do projeto nos arquivos que o navegador carrega. PHP e templates não precisam de build: uma mudança num template ou numa biblioteca vale na próxima requisição.

## Comandos

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

| Etapa | Lê | Grava |
|---|---|---|
| Tailwind | as classes em todo `.tpl` de `core/` e `ext/` | `css/tw/out.css` |
| CSS | `css/index.css`, a saída do Tailwind e `ext/theme.css` | `ext/static/app.css` |
| JavaScript | `js/index.jsx` e o que ele importa, incluindo o Alpine | `ext/static/app.js` |
| Textos | os arquivos `.po` do core e de `ext/data/.i18n/` | as traduções combinadas |

`ext/static/app.version` muda a cada build, para que os navegadores busquem os arquivos novos. `ext/static/app.core` registra o commit do core a partir do qual os assets foram gerados; o painel avisa quando o core mudou as entradas do build desde então.

Rode um build depois de uma atualização do core, e depois de mudar estilos, scripts, classes do Tailwind ou arquivos de texto. Faça commit dos arquivos gerados junto com a mudança, ou gere-os na sua pipeline de deploy.

## Sua própria toolchain

O build padrão cobre a stack padrão. Uma rota que usa React, Vue, Svelte ou outro conjunto de ferramentas faz o build com as ferramentas desse conjunto. Mantenha o código-fonte e o `package.json` dele numa pasta própria dentro de `ext/`, e grave a saída em `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]' } },
  },
};
```

Os arquivos em `ext/static/` são servidos a partir da raiz do site, então esse build fica em `/planner/main.js`. Nomes de arquivo fixos mantêm simples o template da rota. Mude a versão no endereço depois de cada build, como em `main.js?v=3`, para que os navegadores busquem os arquivos novos. Veja [Stack de frontend](/pt/docs/guides/frontend/).

## Arquivos estáticos

Tudo em `ext/static/` é servido como está, e um arquivo ali substitui o arquivo de mesmo nome em `core/static/`. É assim que um projeto define seu próprio favicon, manifesto de web app e ícones.