The public directory
How publicDir holds shared logos, photos, fonts and UI test captures, how the dev server serves and watches it, and how to reference it so render resolves.
publicDir names a folder of files that many templates share: logos, background photos, fonts, device frames and app screenshots captured by UI tests.
{
"version": 1,
"name": "My App",
"publicDir": "public",
"collections": []
}The path is relative to the project directory. open-assets init sets it to public and creates the folder.
How the dev server uses it
When publicDir exists, open-assets dev:
- Serves it at the site root.
public/logo.svgis reachable athttp://localhost:3200/logo.svg. - Watches it. Saving or replacing a file reloads the preview, just like editing a template.
Requests are resolved in order: publicDir first, then any --static-dir folders, then the project directory. So /public/logo.svg and /logo.svg both work in the dev server, and a file in publicDir with the same path as a project file wins.
How render uses it
render does not run a server. Chromium opens each template straight from disk with a file:// URL, so references resolve like files on disk, relative to the template's folder. publicDir has no special meaning there.
That makes relative paths the only kind that works everywhere:
<!-- Works in dev and render -->
<link rel="stylesheet" href="../../public/styles.css" />
<img src="../../public/screenshots/01-home.png" /><!-- Works in dev, breaks in render: resolves to file:///logo.png -->
<img src="/logo.png" />Every example project follows this pattern: templates in assets/screenshots/ reference ../../public/....
Relative references also feed the lockfile. Replace public/screenshots/01-home.png and the templates that link it directly re-render on the next run. Root-relative references are not tracked.
What to put in it
- Brand files:
icon.svg, logos, wordmarks. - Photography and backgrounds (the Skimmer example keeps them in
public/screenshots-bg/). - App screenshots from UI tests, one folder per locale:
public/screenshots/en/01-home.png. See UI test screenshots. - Web fonts loaded with
@font-face. See Fonts.
Compiled CSS usually goes in dist/ instead, which is not served specially but works the same way through relative paths.
Extra static folders
To serve more folders in the dev server (for example a design system package elsewhere in a monorepo):
npx open-assets dev --static-dir ../shared ../brandThese are served and watched like publicDir. They are a dev server feature only: templates still need relative paths for render.
Related
Last updated on
The lockfile
How assets.lock makes renders incremental: what is checksummed, which changes trigger a re-render, what does not, when to use --force and why to commit it.
Localization
Render localized App Store screenshots in every language from one set of HTML templates, with string placeholders, fallbacks, number formatting and RTL text.