Skip to main content

Veřejné prostředky (složka public/)

Složka public/ v kořenu vaší aplikace obsahuje statické soubory — obrázky, ikony, písma a další prostředky, které vaše aplikace potřebuje za běhu. Tyto soubory jsou automaticky zahrnuty do buildů, synchronizovány během vývojového režimu a nahrávány na server. Soubory umístěné v public/ jsou:
  • Veřejně přístupné — po synchronizaci na server jsou prostředky dostupné na veřejné URL. K přístupu k nim není potřeba žádná autentizace.
  • Dostupné ve frontendových komponentách — použijte URL prostředků k zobrazení obrázků, ikon či jiných médií uvnitř komponent Reactu.
  • Dostupné v logických funkcích — odkazujte na URL prostředků v e-mailech, odpovědích API či jiné serverové logice.
  • Používány pro metadata Marketplace — pole logoUrl a screenshots v defineApplication() odkazují na soubory z této složky (např. public/logo.png). Tyto se zobrazují v Marketplace, když je vaše aplikace zveřejněna.
  • Automaticky synchronizované ve vývojovém režimu — když v public/ přidáte, aktualizujete nebo smažete soubor, je automaticky synchronizován na server. Není potřeba restartovat.
  • Zahrnuté do buildůyarn twenty build zabalí všechny veřejné prostředky do distribučního výstupu.

Přístup k veřejným prostředkům pomocí getPublicAssetUrl

K získání plné URL souboru ve vaší složce public/ použijte pomocnou funkci getPublicAssetUrl z twenty-sdk. Funguje jak v logických funkcích, tak ve frontendových komponentách. V logické funkci:
src/logic-functions/send-invoice.ts
Ve frontendové komponentě:
src/front-components/company-card.tsx
Argument path je relativní ke složce public/ vaší aplikace. Jak getPublicAssetUrl('logo.png'), tak getPublicAssetUrl('public/logo.png') se vyhodnotí na stejnou URL — předpona public/ je, je-li přítomna, automaticky odstraněna.

Používání balíčků npm

Ve své aplikaci můžete nainstalovat a používat libovolný balíček npm. Logické funkce i frontendové komponenty se bundlují pomocí esbuild, který vloží všechny závislosti přímo do výstupu — za běhu nejsou potřeba žádné node_modules.

Instalace balíčku

Poté jej importujte ve svém kódu:
src/logic-functions/fetch-data.ts
Stejně to funguje i pro frontendové komponenty:
src/front-components/chart.tsx

Jak funguje bundlování

Krok sestavení používá esbuild k vytvoření jediného samostatného souboru pro každou logickou funkci a každou frontendovou komponentu. Všechny importované balíčky jsou vloženy přímo do bundlu. Logické funkce běží v prostředí Node.js. Vestavěné moduly Node (fs, path, crypto, http atd.) jsou k dispozici a není je třeba instalovat. Frontendové komponenty běží ve Web Workeru. Vestavěné moduly Node nejsou k dispozici — pouze prohlížečová API a balíčky npm, které fungují v prohlížečovém prostředí. V obou prostředích jsou jako předpřipravené moduly k dispozici twenty-client-sdk/core a twenty-client-sdk/metadata — nejsou součástí bundlu, ale server je za běhu načítá.

Testování vaší aplikace

SDK poskytuje programová rozhraní, která vám umožní z testovacího kódu aplikaci sestavit, nasadit, nainstalovat a odinstalovat. V kombinaci s Vitest a typovanými klienty API můžete psát integrační testy, které ověří, že vaše aplikace funguje end-to-end proti reálnému serveru Twenty.

Nastavení

Vygenerovaná aplikace již obsahuje Vitest. Pokud to nastavujete ručně, nainstalujte závislosti:
Vytvořte vitest.config.ts v kořeni vaší aplikace:
vitest.config.ts
Vytvořte soubor nastavení, který před spuštěním testů ověří dostupnost serveru:
src/__tests__/setup-test.ts

Programová rozhraní SDK

Subcesta twenty-sdk/cli exportuje funkce, které můžete volat přímo z testovacího kódu: Každá funkce vrací objekt výsledku se success: boolean a buď data, nebo error.

Psání integračního testu

Zde je kompletní příklad, který aplikaci sestaví, nasadí a nainstaluje a poté ověří, že se objeví v pracovním prostoru:
src/__tests__/app-install.integration-test.ts

Spuštění testů

Ujistěte se, že běží váš lokální server Twenty, a poté:
Nebo v režimu watch během vývoje:

Kontrola typů

Kontrolu typů můžete spustit i na vaší aplikaci bez spuštění testů:
Spustí se tsc --noEmit a nahlásí se případné chyby typů.

Referenční dokumentace CLI

Kromě dev, build, add a typecheck poskytuje CLI příkazy pro spouštění funkcí, zobrazení logů a správu instalací aplikací.

Spouštění funkcí (yarn twenty exec)

Spusťte logickou funkci ručně bez vyvolání přes HTTP, cron nebo databázovou událost:

Zobrazení logů funkcí (yarn twenty logs)

Streamujte výstupní logy běhu logických funkcí vaší aplikace:
To je jiné než yarn twenty server logs, které zobrazují logy kontejneru Docker. yarn twenty logs zobrazuje logy spuštění funkcí vaší aplikace ze serveru Twenty.

Odinstalace aplikace (yarn twenty uninstall)

Odeberte svou aplikaci z aktivního pracovního prostoru:

Správa vzdálených serverů

Remote je server Twenty, ke kterému se vaše aplikace připojuje. Během nastavení jej generátor kostry automaticky vytvoří. Můžete kdykoli přidat další vzdálené servery nebo mezi nimi přepínat.
Vaše přihlašovací údaje jsou uloženy v ~/.twenty/config.json.

CI s GitHub Actions

Generátor kostry vytvoří připravený k použití workflow GitHub Actions v .github/workflows/ci.yml. Automaticky spouští integrační testy při každém pushi do main a u pull requestů. Workflow:
  1. Načte váš kód (checkout).
  2. Spustí dočasný server Twenty pomocí akce twentyhq/twenty/.github/actions/spawn-twenty-docker-image
  3. Nainstaluje závislosti pomocí yarn install --immutable
  4. Spustí yarn test s proměnnými TWENTY_API_URL a TWENTY_API_KEY vloženými z výstupů akce
.github/workflows/ci.yml
Není potřeba konfigurovat žádné secrets — akce spawn-twenty-docker-image spustí dočasný server Twenty přímo v runneru a vypíše podrobnosti připojení. Secret GITHUB_TOKEN je poskytován GitHubem automaticky. Chcete-li připnout konkrétní verzi Twenty místo latest, změňte proměnnou prostředí TWENTY_VERSION na začátku workflow.