---
schema_version: "1"
id: c983b6483dde11d09d14a727cae89615bdfe58fb134829c5085fdb8002c2d5ba
title: Project Structure 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-project-structure.md
canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-pwa-project-structure.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 90500d05a6aace621ef1458ac0152dae2c699bc1acdd0db5898b9130cab7746e
products:
  - Composable Storefront
  - Salesforce APIs
---
# 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.

## Directory Structure

| Aspect           | PWA Kit                      | Storefront Next          |
| ---------------- | ---------------------------- | ------------------------ |
| Source Directory | `app/`                       | `src/`                   |
| Page Components  | `app/pages/`                 | `src/routes/`            |
| Configuration    | `config/` (JS)               | `config.server.ts` file  |
| Translations     | `translations/` (JSON)       | `src/locales/`           |
| Static Assets    | `app/static/`, `app/assets/` | `public/`                |
| Theme/Styles     | `app/theme/` (Chakra)        | `src/app.css` (Tailwind) |
| Type Definitions | N/A (JavaScript)             | `types/`                 |

## Entry Points

| Aspect       | PWA Kit                   | Storefront Next                         |
| ------------ | ------------------------- | --------------------------------------- |
| Client Entry | `app/main.jsx` (explicit) | `entry.client.tsx` (hidden, revealable) |
| Server Entry | `app/ssr.js` (Express)    | `entry.server.tsx` (hidden, revealable) |
| Root Layout  | `app/components/_app/`    | `src/root.tsx`                          |
| Routes       | `app/routes.jsx` (array)  | `src/routes.ts` + `src/routes/` (files) |
| Config       | `config/default.js`       | `config.server.ts`                      |

## Configuration Approach

PWA Kit uses CommonJS modules:

```javascript
// config/default.js
module.exports = {
  app: {
    url: { site: "path", locale: "path" },
    commerceAPI: { clientId: "...", organizationId: "..." },
  },
};
```

Storefront Next uses TypeScript with `defineConfig`:

```typescript
// config.server.ts
import { defineConfig } from "@salesforce/storefront-next-dev";

export default defineConfig({
  app: {
    commerce: {
      api: { clientId: "...", organizationId: "..." },
    },
  },
});
```

## Key Differences

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.

## Storefront Conversion Considerations

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.

## References

- [React Router entry.client.tsx](https://reactrouter.com/api/framework-conventions/entry.client.tsx)
- [React Router entry.server.tsx](https://reactrouter.com/api/framework-conventions/entry.server.tsx)
- [React Router root.tsx](https://reactrouter.com/api/framework-conventions/root.tsx)