15.2 The storefront's place

Shopfront/
├── Shopfront.Core/
├── Shopfront.Hub/
├── Shopfront.Worker/
├── machines/
├── tests/
└── web/
    ├── package.json
    ├── tsconfig.json
    ├── vite.config.ts
    ├── index.html
    └── src/
        ├── graphql/        the documents the page writes
        ├── trax/           what trax client generates; committed, never edited
        ├── connection.ts
        ├── main.tsx
        ├── App.tsx
        ├── Catalogue.tsx
        ├── OrderProgress.tsx
        └── MyOrders.tsx

{
  "name": "shopfront-web",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build"
  },
  "dependencies": {
    "@traxsharp/state-machine": "1.67.0",
    "graphql": "^16.10.0",
    "graphql-ws": "^6.0.0",
    "react": "^19.3.0",
    "react-dom": "^19.3.0"
  },
  "devDependencies": {
    "@types/react": "^19.3.0",
    "@types/react-dom": "^19.3.0",
    "@vitejs/plugin-react": "^6.1.2",
    "typescript": "~5.9.3",
    "vite": "^8.3.3"
  }
}

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "verbatimModuleSyntax": true,
    "resolveJsonModule": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
 
// The hub allows requests from http://localhost:5173 only, so the dev server never moves to another port.
export default defineConfig({
  plugins: [react()],
  server: { port: 5173, strictPort: true },
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Shopfront</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

node_modules
dist