--- title: Публичные ресурсы description: Поставляйте статические файлы — изображения, значки, шрифты — вместе с приложением через папку `public/`. icon: folder-open --- Папка `public/` в корне вашего приложения содержит статические файлы — изображения, значки, шрифты и любые другие ресурсы, необходимые вашему приложению во время выполнения. Эти файлы автоматически включаются в сборки, синхронизируются в режиме разработки и загружаются на сервер. Файлы, размещённые в `public/`, являются: * **Публично доступными** — после синхронизации с сервером ресурсы доступны по публичному URL. Для доступа к ним аутентификация не требуется. * **Доступными в компонентах фронтенда** — используйте URL ресурсов для отображения изображений, значков или любого медиа внутри ваших компонентов React. * **Доступными в логических функциях** — используйте URL ресурсов в письмах, ответах API или любой серверной логике. * \*\*Используется для метаданных на marketplace — поля `logo` и `galleryImages` в файле `defineApplication()` из этой папки (например, `public/logo.png`). Они отображаются в маркетплейсе при публикации вашего приложения. Внешние абсолютные URL-адреса игнорируются для этих полей — вместо этого объединяйте изображения в `public/`. Каждое изображение не должно превышать 10 МБ. * **Автосинхронизация в режиме разработки** — когда вы добавляете, обновляете или удаляете файл в `public/`, он автоматически синхронизируется с сервером. Перезапуск не требуется. * **Включены в сборки** — `yarn twenty dev:build` упаковывает все публичные ресурсы в выходной дистрибутив. ## Доступ к публичным ресурсам с помощью `getPublicAssetUrl` Используйте хелпер `getPublicAssetUrl` из `twenty-sdk`, чтобы получить полный URL файла в каталоге `public/` вашего приложения. Он работает как в **логических функциях**, так и в **компонентах фронтенда**. **В логической функции:** ```ts src/logic-functions/send-invoice.ts import { defineLogicFunction } from 'twenty-sdk/define'; import { getPublicAssetUrl } from 'twenty-sdk/utils'; const handler = async (): Promise => { const logoUrl = getPublicAssetUrl('logo.png'); const invoiceUrl = getPublicAssetUrl('templates/invoice.png'); // Fetch the file content (no auth required — public endpoint) const response = await fetch(invoiceUrl); const buffer = await response.arrayBuffer(); return { logoUrl, size: buffer.byteLength }; }; export default defineLogicFunction({ universalIdentifier: 'a1b2c3d4-...', name: 'send-invoice', description: 'Sends an invoice with the app logo', timeoutSeconds: 10, handler, }); ``` **В компоненте фронтенда:** ```tsx src/front-components/company-card.tsx import { defineFrontComponent } from 'twenty-sdk/define'; import { getPublicAssetUrl } from 'twenty-sdk/utils'; const CompanyCard = () => { const logoUrl = getPublicAssetUrl('logo.png'); return App logo; }; export default defineFrontComponent({ universalIdentifier: '...', name: 'company-card', component: CompanyCard, }); ``` Аргумент `path` задаётся относительно папки `public/` вашего приложения. И `getPublicAssetUrl('logo.png')`, и `getPublicAssetUrl('public/logo.png')` приводят к одному и тому же URL — префикс `public/`, если он есть, удаляется автоматически.