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

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.
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.
TypeScript Integration: Storefront Next has TypeScript as a first-class citizen with strict mode enabled. PWA Kit supports TypeScript optionally through Babel.
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.
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.

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
Dependencies:
- Remove Webpack-related packages
- Remove Babel packages
- Remove Jest packages
- Add Vite, Vitest, TypeScript packages
Scripts:
- Replace pwa-kit-dev commands with sfnext and react-router commands
- Update test commands from Jest to Vitest
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 (@/)
Environment Variables:
- Vite uses PUBLIC_ or VITE_ prefix (not exposed otherwise)
- Update .env files to use new prefix convention