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.

AspectPWA KitStorefront Next
Dev ServerWebpack Dev ServerVite Dev Server
CLI Toolpwa-kit-dev startsfnext dev
HMRWebpack HMRVite native HMR
Config FormatJavaScriptTypeScript
Env VarsStandard .envTyped with PUBLIC__ prefix
TestingJestVitest
Type SafetyOptionalRequired
  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.

  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.