# Development Workflow Differences with PWA Kit

PWA Kit uses a traditional Webpack-based development server with configuration spread across multiple files. Storefront Next leverages Vite for faster development with native ESM, instant HMR, and type-safe configuration. The shift to Vite provides a more modern developer experience with faster feedback loops and better tooling integration.

## Key Differences

| Aspect        | PWA Kit             | Storefront Next              |
| ------------- | ------------------- | ---------------------------- |
| Dev Server    | Webpack Dev Server  | Vite Dev Server              |
| CLI Tool      | `pwa-kit-dev start` | `sfnext dev`                 |
| HMR           | Webpack HMR         | Vite native HMR              |
| Config Format | JavaScript          | TypeScript                   |
| Env Vars      | Standard .env       | Typed with `PUBLIC__` prefix |
| Testing       | Jest                | Vitest                       |
| Type Safety   | Optional            | Required                     |

## Key Similarities

1. Port conventions: Both can run on any port.
2. API proxy pattern: Both use `/mobify/proxy/` path.
3. Environment variables: Both support .env files.
4. Node.js debugging: Both support `--inspect` flag.
5. Express-based: Both use Express for SSR.

## Storefront Conversion Considerations

1. Port Change

   - Update any hardcoded port references from 3000 to 5173.
   - Or configure Vite to use port 3000.

2. Environment Variables

   - Convert standard env vars to `PUBLIC__` prefix format.
   - Update .env files with new naming convention.

3. Config Migration

   - Convert `config/default.js` to `config.server.ts`.
   - Add TypeScript types for configuration.

4. Testing Migration
   - Convert Jest tests to Vitest.
   - Update test configuration files.