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

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

Storefront Conversion Considerations

Port Change
- Update any hardcoded port references from 3000 to 5173.
- Or configure Vite to use port 3000.
Environment Variables
- Convert standard env vars to PUBLIC__ prefix format.
- Update .env files with new naming convention.
Config Migration
- Convert config/default.js to config.server.ts.
- Add TypeScript types for configuration.
Testing Migration
- Convert Jest tests to Vitest.
- Update test configuration files.