Build System Differences with PWA Kit

PWA Kit relies on Webpack, Babel, and Jest with multiple build concerns split across separate configs. PWA Kit supports TypeScript optionally through Babel while Storefront Next has TypeScript as a first-class citizen with strict mode enabled. Storefront Next standardizes on Vite, Vitest, and TypeScript-first configuration, which reduces config complexity and speeds up local iteration through faster startup and hot updates. Code splitting and bundle analysis also become more route- and chunk-oriented by default.

AspectPWA KitStorefront Next
BundlerWebpack 5Vite 7 (Rollup for production)
Dev ServerWebpack Dev ServerVite Dev Server
HMRwebpack-hot-middleware + React RefreshNative Vite HMR
Dev SpeedSlower (full bundle)Instant (native ES modules)
ConfigurationComplex, multi-targetSimpler, plugin-based
AspectPWA KitStorefront Next
Primary LanguageJavaScriptTypeScript
TypeScriptOptional (via Babel)Native
Type CheckingExternal (tsc)Integrated (pnpm typecheck)
Path AliasesBabel module resolverNative via tsconfig paths
AspectPWA KitStorefront Next
Test RunnerJestVitest
ConfigurationSeparate jest.config.jsIntegrated in vite.config.ts
Watch Modejest --watchvitest (default)
CoverageJest coverageVitest V8 coverage
Component DevN/AStorybook with a11y testing
AspectPWA KitStorefront Next
Mechanism@loadable/componentReact Router + native dynamic imports
Chunk StrategyVendor + route-basedRoute-based with locale chunks
ConfigurationManual in Webpack configAutomatic via React Router
AspectPWA KitStorefront Next
Toolbundlesize2vite-plugin-bundlesize
Granularity2 limits (main, vendor)Per-chunk limits
Visualizationwebpack-bundle-analyzerrollup-plugin-visualizer

  1. Development Speed: Vite’s native ES modules provide near-instant HMR compared to Webpack’s full bundle approach. This is especially noticeable in larger codebases.

  2. Configuration complexity: PWA Kit’s Webpack config handles 5 different build targets with complex plugin composition. Storefront Next’s Vite config is simpler with most complexity abstracted into plugins.

  3. TypeScript Integration: Storefront Next has TypeScript as a first-class citizen with strict mode enabled. PWA Kit supports TypeScript optionally through Babel.

  4. Testing Integration: Vitest shares the same configuration as Vite, eliminating the need for a separate test configuration. Jest requires more module mapping and transformation setup.

  5. Bundle Analysis: Both support bundle analysis, but Storefront Next has more granular per-chunk size limits for better bundle size control.

When converting your storefront from PWA Kit to Storefront Next, keep in mind these considerations.

  1. Configuration Files:

    • Remove babel.config.js (not needed)
    • Remove jest.config.js (use vite.config.ts test section)
    • Create vite.config.ts and react-router.config.ts
    • Create tsconfig.json for TypeScript

  2. Dependencies:

    • Remove Webpack-related packages
    • Remove Babel packages
    • Remove Jest packages
    • Add Vite, Vitest, TypeScript packages

  3. Scripts:

    • Replace pwa-kit-dev commands with sfnext and react-router commands
    • Update test commands from Jest to Vitest

  4. Code Changes:

    • Convert JavaScript files to TypeScript (.js → .ts, .jsx → .tsx)
    • Replace @loadable/component with native dynamic imports
    • Update import paths to use TypeScript aliases (@/)

  5. Environment Variables:

    • Vite uses PUBLIC_ or VITE_ prefix (not exposed otherwise)
    • Update .env files to use new prefix convention