frontend-hamroun 1.2.24 → 1.2.26

package/templates/ssr-template/package.json

@@ -1,14 +1,16 @@
 {
-  "name": "fullstack-ssr-app",
-  "private": true,
+  "name": "ssr-app",
   "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "node server.js",
-    "start": "node server.js"
+    "start": "node server.js",
+    "build": "echo 'No build step required for this template'"
   },
   "dependencies": {
+    "dotenv": "^16.0.3",
     "express": "^4.18.2",
-    "frontend-hamroun": "latest"
+    "frontend-hamroun": "latest",
+    "node-fetch": "^3.3.1"
   }
 }

package/templates/ssr-template/readme.md

@@ -1,14 +1,6 @@
-# Frontend Hamroun Full-Stack SSR Template
+# Frontend Hamroun SSR Template
 
-This template demonstrates a comprehensive server-side rendering (SSR) application using the Frontend Hamroun framework, complete with authentication, protected routes, and API endpoints.
-
-## Features
-
-- **Server-Side Rendering**: Pages rendered on the server for optimal SEO and performance
-- **Authentication**: JWT-based authentication system with login/logout functionality
-- **Role-Based Authorization**: Different content for regular users and admins
-- **Protected API Routes**: Secured endpoints that require authentication
-- **Database Integration**: Optional connection to MongoDB, MySQL, or PostgreSQL
+This is a comprehensive server-side rendering (SSR) example using Frontend Hamroun.
 
 ## Getting Started
 
@@ -22,42 +14,125 @@ This template demonstrates a comprehensive server-side rendering (SSR) applicati
    npm start
    ```
 
-3. Open your browser at `http://localhost:3000`
+3. Open your browser at http://localhost:3000
+
+## Core Features
+
+This template demonstrates:
+
+### Server-Side Rendering
+- Pre-rendering of components on the server
+- Hydration of server-rendered content on the client
+- Data fetching during server rendering
+- AI-powered meta tag generation
+
+### API Integration
+- RESTful API endpoints
+- Dynamic API routing
+- API middleware for validation and security
+- File-based API structure
+
+### Database Integration
+- MongoDB, MySQL, and PostgreSQL support
+- ORM-like query interface
+- Connection pooling
+- Transaction support
+
+### Authentication & Authorization
+- JWT-based authentication
+- Role-based access control
+- Password hashing and validation
+- Token refresh mechanism
+
+### Performance Optimization
+- Caching strategies
+- Response compression
+- Static asset optimization
+- Efficient metadata handling
+
+## Implementation Examples
+
+### Creating Components
+
+Use the `jsx` or `createElement` function from 'frontend-hamroun':
+
+```jsx
+import { jsx } from 'frontend-hamroun';
+
+export default function MyComponent(props) {
+  return jsx('div', { className: "container" }, [
+    jsx('h1', {}, "Hello World"),
+    jsx('p', {}, `Props value: ${props.value}`)
+  ]);
+}
+```
+
+### Creating API Routes
+
+Create files in the `api` directory following this pattern:
+
+```typescript
+// api/users/index.ts
+import { Request, Response } from 'express';
+
+export const get = (req: Request, res: Response) => {
+  res.json({ users: [...] });
+};
+
+export const post = (req: Request, res: Response) => {
+  // Create user
+  res.status(201).json({ success: true });
+};
+```
+
+### Database Usage
+
+```typescript
+import { Server } from 'frontend-hamroun/server';
 
-## Authentication
+const server = new Server({
+  db: {
+    url: process.env.DATABASE_URL,
+    type: 'mongodb' // or 'mysql', 'postgres'
+  }
+});
 
-This template includes a mock authentication system with two users:
+// Get typed database instance
+const db = server.getDatabase();
+const users = await db.query('SELECT * FROM users'); // For SQL
+const docs = await db.getMongoDb().collection('users').find().toArray(); // For MongoDB
+```
 
-- **Admin User**:
-  - Username: `admin`
-  - Password: `admin123`
-  - Roles: `['admin']`
+### Authentication
 
-- **Regular User**:
-  - Username: `user`
-  - Password: `user123`
-  - Roles: `['user']`
+```typescript
+import { AuthService } from 'frontend-hamroun/server';
 
-In a production application, you would replace this with a real user database.
+const auth = new AuthService({
+  secret: process.env.JWT_SECRET,
+  expiresIn: '24h'
+});
 
-## Available Routes
+// Protect routes
+app.get('/api/protected', auth.requireAuth(), (req, res) => {
+  res.json({ message: "Authenticated!" });
+});
 
-- **/** - Home page with SSR
-- **/api/auth/login** (POST) - Login endpoint
-- **/api/protected** (GET) - Protected data (requires authentication)
-- **/api/admin** (GET) - Admin-only data (requires admin role)
+// Create user & login
+const hashedPassword = await auth.hashPassword(password);
+const token = auth.generateToken(user);
+```
 
-## Environmental Variables
+### Advanced Middleware
 
-- **PORT** - Server port (default: 3000)
-- **JWT_SECRET** - Secret key for JWT tokens (default: 'your-development-secret-key')
-- **DATABASE_URL** - Database connection string (if using database)
+```typescript
+import { rateLimit, requestLogger, errorHandler } from 'frontend-hamroun/server';
 
-## Further Development
+app.use(requestLogger);
+app.use('/api', rateLimit({ windowMs: 15 * 60 * 1000, max: 100 }));
+app.use(errorHandler);
+```
 
-To extend this template:
+## Next Steps
 
-1. Add more pages in the renderToString function or by creating separate components
-2. Connect to a real database by uncommenting the database configuration
-3. Add more API routes with different authentication requirements
-4. Enhance the client-side JavaScript with more interactivity
+Explore the full API documentation for more advanced features and customization options.