---
schema_version: "1"
id: c916c9aab824dea85ac97e59a5bf8e30f533e89072fbf414ea988497a9455e33
title: Static Assets
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/sfnext/guides/sfnext-static-assets.md
canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-static-assets.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 59b9d4bb720a7d02ffd844dc3c7fa70c176238c9d3e0e2636b6dd4148beb2d0a
products:
  - Composable Storefront
  - Salesforce APIs
---
# 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.

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

```tsx
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

```tsx
// 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](https://vite.dev/guide/assets)
- [_Vite:_ The public Directory](https://vite.dev/guide/assets#the-public-directory)