Salesforce Docs Portal

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.

Build Tool

Aspect PWA Kit Storefront Next
Bundler Webpack 5 Vite 7 (Rollup for production)
Dev Server Webpack Dev Server Vite Dev Server
HMR webpack-hot-middleware + React Refresh Native Vite HMR
Dev Speed Slower (full bundle) Instant (native ES modules)
Configuration Complex, multi-target Simpler, plugin-based

Language Support

Aspect PWA Kit Storefront Next
Primary Language JavaScript TypeScript
TypeScript Optional (via Babel) Native
Type Checking External (tsc) Integrated (pnpm typecheck)
Path Aliases Babel module resolver Native via tsconfig paths

Testing

Aspect PWA Kit Storefront Next
Test Runner Jest Vitest
Configuration Separate jest.config.js Integrated in vite.config.ts
Watch Mode jest --watch vitest (default)
Coverage Jest coverage Vitest V8 coverage
Component Dev N/A Storybook with a11y testing

Code Splitting

Aspect PWA Kit Storefront Next
Mechanism @loadable/component React Router + native dynamic imports
Chunk Strategy Vendor + route-based Route-based with locale chunks
Configuration Manual in Webpack config Automatic via React Router

Bundle Size Monitoring

Aspect PWA Kit Storefront Next
Tool bundlesize2 vite-plugin-bundlesize
Granularity 2 limits (main, vendor) Per-chunk limits
Visualization webpack-bundle-analyzer rollup-plugin-visualizer

Key Differences

  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.

Storefront Conversion Considerations

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