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.

AspectPWA KitStorefront Next
Build ToolWebpackVite + React Router
Build Commandpwa-kit-dev buildreact-router build
Push Commandpwa-kit-dev pushsfnext push
Analysis ToolWebpack Bundle AnalyzerRollup Visualizer
Config FormatJavaScriptTypeScript

PWA Kit:

Storefront Next:

PWA Kit:

Storefront Next:

PWA Kit:

Storefront Next:

  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.

  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.