Standard Specifications#

Esmx is a modern SSR framework that adopts standardized project structures and path resolution mechanisms to ensure consistency and maintainability across development and production environments.

Project Structure Standards#

Standard Directory Structure#

1root
2│─ dist                  # Build output directory
3│  ├─ package.json       # Compiled package configuration
4│  ├─ server             # Server-side build output
5│  │  └─ manifest.json   # Build manifest output for generating importmap
6│  ├─ node               # Node server program build output
7│  ├─ client             # Client-side build output
8│  │  ├─ versions        # Version storage directory
9│  │  │  └─ latest.tgz   # Archived dist directory for package distribution
10│  │  └─ manifest.json   # Build manifest output for generating importmap
11│  └─ src                # Files generated by tsc
12├─ src
13│  ├─ entry.server.ts    # Server application entry
14│  ├─ entry.client.ts    # Client application entry
15│  └─ entry.node.ts      # Node server application entry
16├─ tsconfig.json         # TypeScript configuration
17└─ package.json          # Package configuration

Entry File Specifications#

entry.client.ts#

The client entry file is responsible for:

• Application Initialization: Configuring basic client application settings
• Routing Management: Handling client-side routing and navigation
• State Management: Implementing client-side state storage and updates
• Interaction Handling: Managing user events and UI interactions

entry.server.ts#

The server entry file is responsible for:

• Server-Side Rendering: Executing SSR rendering processes
• HTML Generation: Building initial page structures
• Data Prefetching: Handling server-side data fetching
• State Injection: Transferring server state to the client
• SEO Optimization: Ensuring search engine optimization

entry.node.ts#

The Node.js server entry file is responsible for:

• Server Configuration: Setting HTTP server parameters
• Routing Handling: Managing server-side routing rules
• Middleware Integration: Configuring server middleware
• Environment Management: Handling environment variables and configurations
• Request/Response: Processing HTTP requests and responses

Configuration File Standards#

package.json#

1{
2    "name": "your-app-name",
3    "type": "module",
4    "scripts": {
5        "dev": "esmx dev",
6        "build": "npm run build:dts && npm run build:ssr",
7        "build:ssr": "esmx build",
8        "build:dts": "tsc --declaration --emitDeclarationOnly --outDir dist/src",
9        "preview": "esmx preview",
10        "start": "NODE_ENV=production node dist/index.mjs"
11    }
12}

tsconfig.json#

1{
2    "compilerOptions": {
3        "isolatedModules": true,
4        "allowJs": false,
5        "experimentalDecorators": true,
6        "resolveJsonModule": true,
7        "types": [
8            "@types/node"
9        ],
10        "target": "ESNext",
11        "module": "ESNext",
12        "importHelpers": false,
13        "declaration": true,
14        "sourceMap": true,
15        "strict": true,
16        "noImplicitAny": false,
17        "noImplicitReturns": false,
18        "noFallthroughCasesInSwitch": true,
19        "noUnusedLocals": false,
20        "noUnusedParameters": false,
21        "moduleResolution": "node",
22        "esModuleInterop": true,
23        "skipLibCheck": true,
24        "allowSyntheticDefaultImports": true,
25        "forceConsistentCasingInFileNames": true,
26        "noEmit": true
27    },
28    "include": [
29        "src",
30        "**.ts"
31    ],
32    "exclude": [
33        "dist"
34    ]
35}