# Deployment Differences with PWA Kit

PWA Kit uses Webpack with a single-command deployment that can auto-build. Storefront Next uses Vite with React Router 7, requiring separate build and push steps but providing more granular control over bundle sizes. Both deploy to the same Managed Runtime infrastructure, but Storefront Next offers more sophisticated bundle analysis and chunk splitting strategies for better performance optimization.

## Key Differences

| Aspect        | PWA Kit                 | Storefront Next      |
| ------------- | ----------------------- | -------------------- |
| Build Tool    | Webpack                 | Vite + React Router  |
| Build Command | `pwa-kit-dev build`     | `react-router build` |
| Push Command  | `pwa-kit-dev push`      | `sfnext push`        |
| Analysis Tool | Webpack Bundle Analyzer | Rollup Visualizer    |
| Config Format | JavaScript              | TypeScript           |

## Build Output

PWA Kit:

```
build/
├── main.js          (max 84 kB)
├── vendor.js        (max 335 kB)
├── ssr.js
└── static/
```

Storefront Next:

```
build/
├── client/
│   └── assets/
│       ├── -root.*.js           (max 110 kB)
│       ├── locales-en-US.*.js   (auto-split)
│       └── (component).*.js     (max 50 kB each)
├── server/
│   └── *.js                     (max 5 MB total)
└── static/
```

## Bundle Size Strategy

PWA Kit:

```json
// Two main bundles with global limits
"bundlesize": [
    {"path": "build/main.js", "maxSize": "84 kB"},
    {"path": "build/vendor.js", "maxSize": "335 kB"}
]
```

Storefront Next:

```json
// Granular per-chunk limits
"bundlesize": {
    "client": [
        {"name": "commerce-sdk-*", "limit": "454 kB"},
        {"name": "-root.*", "limit": "110 kB"},
        {"name": "**/*", "limit": "50 kB"}  // Default
    ]
}
```

## Deployment Process

PWA Kit:

```bash
npm run build        # Build first
npm run push         # Then deploy
# OR
pwa-kit-dev push     # Auto-builds if needed
```

Storefront Next:

```bash
pnpm build           # Build first
pnpm push            # Deploy built bundle
# Separate steps required
```

## Key Similarities

1. MRT Target: Both deploy to Managed Runtime.
2. Credentials: Same `~/.mobify` file format.
3. Node.js Version: Both use Node.js 22.x.
4. SSR Parameters: Same configuration structure.
5. Proxy Config: Same proxy path patterns.

## Storefront Conversion Considerations

1. Build Process

   - Replace `npm run build` with `pnpm build`.
   - Update CI/CD scripts for new commands.

2. Bundle Size Monitoring

   - Convert bundlesize config to new format.
   - Add granular chunk limits.

3. Deployment Scripts

   - Update from `pwa-kit-dev push` to `sfnext push`.
   - Ensure build runs before push.

4. Configuration Files
   - Migrate SSR config to `config.server.ts`.
   - Update environment variable format.