# 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