---
schema_version: "1"
id: 06ff4730ba20b327ed6261c0c5a6ec2556cd3d06306ec5feeabca12cb5ff6697
title: Static Assets Differences with PWA Kit
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/sfnext/guides/sfnext-pwa-static-assets.md
canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-pwa-static-assets.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 3a3289a4ff268b5a7741570308dfb5fad1ed41c4c02bcc279ce0904cc27fd847
products:
  - Composable Storefront
  - Salesforce APIs
---
# Static Assets Differences with PWA Kit

PWA Kit uses a traditional Webpack-based approach with SVG sprites and utility functions for responsive images. Storefront Next leverages Vite's native asset handling with a modern component-based approach for responsive images and tree-shaken icon imports. The shift simplifies asset management while providing more powerful responsive image capabilities through the DynamicImage component.

## Key Differences

| Aspect            | PWA Kit                 | Storefront Next                   |
| ----------------- | ----------------------- | --------------------------------- |
| Build Tool        | Webpack                 | Vite                              |
| Static Directory  | `app/static/`           | `public/`                         |
| Asset URLs        | `getAssetUrl()` helper  | Direct `/` paths                  |
| Icon System       | SVG sprite sheet        | Tree-shaken React icons           |
| Image Component   | Custom with SSR preload | `<picture>` with React 19 preload |
| Responsive Images | Utility functions       | DynamicImage component            |
| Font Strategy     | Chakra UI defaults      | Tailwind CSS defaults             |
| CSP Headers       | Explicit in ssr.js      | Framework-handled                 |

## Image Import Patterns

PWA Kit:

```javascript
import { getAssetUrl } from "@salesforce/pwa-kit-react-sdk/ssr/universal/utils";

const src = getAssetUrl("static/img/hero.png");
// Result: /mobify/bundle/development/static/img/hero.png?v=abc123
```

Storefront Next:

```typescript
import heroImage from "/images/hero.png";
// or
const src = "/images/hero.png";
```

## Icon Usage

PWA Kit:

```javascript
// Import registers to sprite
import "@salesforce/retail-react-app/app/assets/svg/search.svg";

// Use via sprite reference
<Icon>
  <use xlinkHref="#search" />
</Icon>;
```

Storefront Next:

```typescript
import { Search } from "lucide-react";

<Search className="h-5 w-5" />;
```

## Responsive Image Handling

PWA Kit:

```javascript
// Manual utility function usage
const {srcSet, sizes} = getResponsivePictureAttributes({
    src: imageUrl,
    breakpoints: [320, 640, 1024]
})

<picture>
    <source srcSet={srcSet} sizes={sizes} />
    <img src={imageUrl} alt={alt} />
</picture>
```

Storefront Next:

```typescript
// Component handles complexity
<DynamicImage
  src={imageUrl}
  alt={alt}
  widths={{ base: "100vw", md: "50vw", lg: "33vw" }}
  priority="high"
/>
```

## Key Similarities

1. Lazy loading default: Both default to `loading="lazy"`.
2. B2C Commerce images: Both use Dynamic Imaging Service (`?sw={width}`).
3. System fonts: Neither bundles custom web fonts.
4. SSR awareness: Both handle preloading for above-fold images.
5. Aspect ratio handling: Both manage layout stability.

## Storefront Conversion Considerations

- Asset Path Changes

  - Replace `getAssetUrl()` with direct `/` paths.
  - Move files from `app/static/` to `public/`.

- SVG Icons

  - Replace sprite imports with `lucide-react` icons.
  - Or create individual SVG component imports.

- Image Component

  - Replace custom Image with DynamicImage.
  - Update width props to new format.

- Responsive Images
  - Convert utility function usage to DynamicImage props.
  - Breakpoint format changes from array to object.