Project Structure Differences with PWA Kit

PWA Kit organizes most app code under app/ with centralized route definitions and explicit runtime entry files. Storefront Next shifts to src/, file-based routes, and framework conventions around root and route modules. The outcome is a more convention-driven layout with clearer boundaries for routes, providers, middleware, and adapters.

AspectPWA KitStorefront Next
Source Directoryapp/src/
Page Componentsapp/pages/src/routes/
Configurationconfig/ (JS)config.server.ts file
Translationstranslations/ (JSON)src/locales/
Static Assetsapp/static/, app/assets/public/
Theme/Stylesapp/theme/ (Chakra)src/app.css (Tailwind)
Type DefinitionsN/A (JavaScript)types/
AspectPWA KitStorefront Next
Client Entryapp/main.jsx (explicit)entry.client.tsx (hidden, revealable)
Server Entryapp/ssr.js (Express)entry.server.tsx (hidden, revealable)
Root Layoutapp/components/_app/src/root.tsx
Routesapp/routes.jsx (array)src/routes.ts + src/routes/ (files)
Configconfig/default.jsconfig.server.ts

PWA Kit uses CommonJS modules:

Storefront Next uses TypeScript with defineConfig:

  1. Language: PWA Kit uses JavaScript. Storefront Next uses TypeScript throughout.

  2. Build Tool Integration: PWA Kit has separate config files for each tool. Storefront Next centralizes build config in vite.config.ts.

  3. Server Architecture: PWA Kit uses Express with explicit route handlers. Storefront Next uses React Router’s middleware pattern.

  4. Entry Point Pattern: PWA Kit has separate client/server entry files. Storefront Next consolidates into root.tsx with exports.

  5. Asset Handling: PWA Kit uses getAssetUrl() helper. Storefront Next uses Vite’s native import system.

  6. Testing: PWA Kit uses Jest; Storefront Next uses Vitest with integrated Storybook.

  7. Code Organization: Storefront Next introduces middlewares/, providers/, adapters/ directories for cleaner separation.

  1. Move source code from app/ to src/.

  2. Convert pages from app/pages/ to file-based routes in src/routes/.

  3. Migrate configuration from config/default.js to config.server.ts.

  4. Update translations from translations/*.json to src/locales/.

  5. Convert JavaScript to TypeScript-add type annotations throughout.

  6. Replace Express routes with middleware exports in root.tsx or resource routes.

  7. Update static asset imports to use Vite’s import system instead of getAssetUrl().

  8. Entry file customization: If needed, run npx react-router reveal to customize client/server entry points.