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.

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.

public/
├── favicon.ico
├── robots.txt
└── images/
    ├── logo.svg
    └── 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.

import logoImage from "/images/logo.svg";

<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).

note: 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.

Adding an Asset

This example demonstrates adding a promotional banner image.

Step 1: Add the Asset to the Public Directory

public/
└── images/
    └── summer-sale.png

Step 2: Import and Use the Asset in Your Component

// src/components/promo-banner/index.tsx
import bannerImage from "/images/summer-sale.png";

export function PromoBanner() {
  return (
    <div className="relative w-full overflow-hidden rounded-lg">
      <img
        src={bannerImage}
        alt="Summer sale - up to 50% off"
        className="w-full h-auto"
        loading="lazy"
      />
    </div>
  );
}

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.

See Also

• Vite: Static Asset Handling
• Vite: The public Directory