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.

What Are Static Assets?

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

The public Directory

Files in the public directory are served directly at the site root without processing. Vite copies these files as-is to the build output.

1public/
2├── favicon.ico
3├── robots.txt
4└── images/
5    ├── logo.svg
6    └── hero.png

Use the public directory for assets that must retain their exact filename without a content hash.

Using Assets

Import assets by using an import statement to get the correct path.

1import logoImage from "/images/logo.svg";
2
3<img src={logoImage} alt="Logo" />;

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.

Note

Adding an Asset

This example demonstrates adding a promotional banner image.

Step 1: Add the Asset to the Public Directory

1public/
2└── images/
3    └── summer-sale.png

Step 2: Import and Use the Asset in Your Component

1// src/components/promo-banner/index.tsx
2import bannerImage from "/images/summer-sale.png";
3
4export function PromoBanner() {
5  return (
6    <div className="relative w-full overflow-hidden rounded-lg">
7      <img
8        src={bannerImage}
9        alt="Summer sale - up to 50% off"
10        className="w-full h-auto"
11        loading="lazy"
12      />
13    </div>
14  );
15}

Static File Serving in Production

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.