Salesforce Docs Portal

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.