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:

1build/
2├── main.js          (max 84 kB)
3├── vendor.js        (max 335 kB)
4├── ssr.js
5└── static/

Storefront Next:

1build/
2├── client/
3│   └── assets/
4│       ├── -root.*.js           (max 110 kB)
5│       ├── locales-en-US.*.js   (auto-split)
6│       └── (component).*.js     (max 50 kB each)
7├── server/
8│   └── *.js                     (max 5 MB total)
9└── static/

Bundle Size Strategy

PWA Kit:

1// Two main bundles with global limits
2"bundlesize": [
3    {"path": "build/main.js", "maxSize": "84 kB"},
4    {"path": "build/vendor.js", "maxSize": "335 kB"}
5]

Storefront Next:

1// Granular per-chunk limits
2"bundlesize": {
3    "client": [
4        {"name": "commerce-sdk-*", "limit": "454 kB"},
5        {"name": "-root.*", "limit": "110 kB"},
6        {"name": "**/*", "limit": "50 kB"}  // Default
7    ]
8}

Deployment Process

PWA Kit:

1npm run build        # Build first
2npm run push         # Then deploy
3# OR
4pwa-kit-dev push     # Auto-builds if needed

Storefront Next:

1pnpm build           # Build first
2pnpm push            # Deploy built bundle
3# Separate steps required

Key Similarities

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

Storefront Conversion Considerations

Build Process
- Replace npm run build with pnpm build.
- Update CI/CD scripts for new commands.
Bundle Size Monitoring
- Convert bundlesize config to new format.
- Add granular chunk limits.
Deployment Scripts
- Update from pwa-kit-dev push to sfnext push.
- Ensure build runs before push.
Configuration Files
- Migrate SSR config to config.server.ts.
- Update environment variable format.