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

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:

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

Storefront Next:

// 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:

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

Storefront Next:

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.