Static Assets
Learn how to add and use static files like images, fonts, and other resources in your Storefront Next app.
Storefront Next uses Vite to serve static files from the public directory.
Static assets are files that your app serves directly without server-side processing. This table shows the common asset types.
| Asset Type | Examples | Common Use |
|---|---|---|
| Images | .png, .jpg, .svg, .webp, .gif | Product images, logos, icons |
| Fonts | .woff, .woff2, .ttf, .otf | Custom typography |
| Media | .mp4, .webm, .mp3 | Videos, audio files |
| Documents | .pdf, .json | Downloadable content, static data |
Files in the public directory are served directly at the site root without processing. Vite copies these files as-is to the build output.
Use the public directory for assets that must retain their exact filename without a content hash.
Import assets by using an import statement to get the correct path.
When you import an asset, Vite returns the resolved URL. In development, this is a simple path like /images/logo.svg. In production on Managed Runtime (MRT), the path includes the bundle identifier (for example, /mobify/bundle/362/client/images/logo.svg).
Don’t use raw paths like src="/images/logo.svg" directly in your code. These paths work in development but fail in production because the server requires the full bundle path.
This example demonstrates adding a promotional banner image.
In production on Managed Runtime (MRT), static assets are served from a bundle-specific path (for example, /mobify/bundle/362/client/). When you import an asset, Vite automatically resolves to the correct bundle path. The server sets optimized caching headers so browsers cache assets efficiently.