---
schema_version: "1"
id: 4bf6f61bff547e8b4e3b4f8bf3acc770dd8758b4321b488e11d73a7b196193e1
title: Development Workflow Differences with PWA Kit
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/sfnext/guides/sfnext-pwa-dev-workflow.md
canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-pwa-dev-workflow.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: e88430922e8e549b6a97d83df3d2f35f8bc5c1976f599114a4e238d9e31f2e09
products:
  - Composable Storefront
  - Salesforce APIs
---
# 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.