frontend-hamroun 1.2.22 → 1.2.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +69 -73
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +69 -73
- package/dist/index.mjs.map +1 -1
- package/dist/server-renderer.d.ts +5 -1
- package/package.json +18 -3
- package/templates/ssr-template/package-lock.json +3544 -0
- package/templates/ssr-template/package.json +3 -16
- package/templates/ssr-template/public/index.html +29 -8
- package/templates/ssr-template/readme.md +63 -0
- package/templates/ssr-template/server.js +577 -0
- package/templates/ssr-template/server.ts +111 -34
- package/templates/ssr-template/src/client.ts +29 -0
- package/templates/ssr-template/vite.config.js +9 -12
|
@@ -1,27 +1,14 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "ssr-app",
|
|
2
|
+
"name": "fullstack-ssr-app",
|
|
3
3
|
"private": true,
|
|
4
4
|
"version": "0.1.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
7
|
-
"dev
|
|
8
|
-
"
|
|
9
|
-
"dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
|
|
10
|
-
"build:client": "vite build",
|
|
11
|
-
"build:server": "tsc --project tsconfig.server.json",
|
|
12
|
-
"build": "npm run build:client && npm run build:server",
|
|
13
|
-
"start": "node dist/server/server.js"
|
|
7
|
+
"dev": "node server.js",
|
|
8
|
+
"start": "node server.js"
|
|
14
9
|
},
|
|
15
10
|
"dependencies": {
|
|
16
11
|
"express": "^4.18.2",
|
|
17
12
|
"frontend-hamroun": "latest"
|
|
18
|
-
},
|
|
19
|
-
"devDependencies": {
|
|
20
|
-
"@types/express": "^4.17.17",
|
|
21
|
-
"@types/node": "^18.16.19",
|
|
22
|
-
"concurrently": "^8.2.1",
|
|
23
|
-
"ts-node": "^10.9.1",
|
|
24
|
-
"typescript": "^5.2.2",
|
|
25
|
-
"vite": "^4.4.9"
|
|
26
13
|
}
|
|
27
14
|
}
|
|
@@ -3,23 +3,44 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
6
|
+
<title>Static Fallback</title>
|
|
7
7
|
<!-- Import Tailwind-like styles for quick styling -->
|
|
8
8
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.7.4/dist/full.css" rel="stylesheet" type="text/css" />
|
|
9
9
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
10
10
|
<!-- Client-side script for hydration -->
|
|
11
11
|
<script type="module" src="/src/client.tsx"></script>
|
|
12
|
+
<style>
|
|
13
|
+
body {
|
|
14
|
+
font-family: sans-serif;
|
|
15
|
+
max-width: 800px;
|
|
16
|
+
margin: 0 auto;
|
|
17
|
+
padding: 2rem;
|
|
18
|
+
line-height: 1.6;
|
|
19
|
+
}
|
|
20
|
+
.warning {
|
|
21
|
+
background-color: #fff3cd;
|
|
22
|
+
border: 1px solid #ffecb5;
|
|
23
|
+
color: #856404;
|
|
24
|
+
padding: 1rem;
|
|
25
|
+
border-radius: 4px;
|
|
26
|
+
margin-bottom: 1rem;
|
|
27
|
+
}
|
|
28
|
+
code {
|
|
29
|
+
background-color: #f5f5f5;
|
|
30
|
+
padding: 0.2rem 0.4rem;
|
|
31
|
+
border-radius: 3px;
|
|
32
|
+
}
|
|
33
|
+
</style>
|
|
12
34
|
</head>
|
|
13
35
|
<body>
|
|
14
36
|
<!-- App will be rendered here by SSR -->
|
|
15
37
|
<div id="app">
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
</div>
|
|
38
|
+
<div class="warning">
|
|
39
|
+
<h2>STATIC INDEX.HTML FILE</h2>
|
|
40
|
+
<p>You should NOT be seeing this page if the server is running correctly.</p>
|
|
41
|
+
<p>This is a static file that should only be used as a fallback when the server is not running.</p>
|
|
42
|
+
<p>If you're seeing this while running <code>npm run dev</code>, there's likely an issue with the Express route handling.</p>
|
|
43
|
+
<p>Try clearing your browser cache and refreshing the page.</p>
|
|
23
44
|
</div>
|
|
24
45
|
</div>
|
|
25
46
|
</body>
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# Frontend Hamroun Full-Stack SSR Template
|
|
2
|
+
|
|
3
|
+
This template demonstrates a comprehensive server-side rendering (SSR) application using the Frontend Hamroun framework, complete with authentication, protected routes, and API endpoints.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Server-Side Rendering**: Pages rendered on the server for optimal SEO and performance
|
|
8
|
+
- **Authentication**: JWT-based authentication system with login/logout functionality
|
|
9
|
+
- **Role-Based Authorization**: Different content for regular users and admins
|
|
10
|
+
- **Protected API Routes**: Secured endpoints that require authentication
|
|
11
|
+
- **Database Integration**: Optional connection to MongoDB, MySQL, or PostgreSQL
|
|
12
|
+
|
|
13
|
+
## Getting Started
|
|
14
|
+
|
|
15
|
+
1. Install dependencies:
|
|
16
|
+
```
|
|
17
|
+
npm install
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
2. Start the server:
|
|
21
|
+
```
|
|
22
|
+
npm start
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
3. Open your browser at `http://localhost:3000`
|
|
26
|
+
|
|
27
|
+
## Authentication
|
|
28
|
+
|
|
29
|
+
This template includes a mock authentication system with two users:
|
|
30
|
+
|
|
31
|
+
- **Admin User**:
|
|
32
|
+
- Username: `admin`
|
|
33
|
+
- Password: `admin123`
|
|
34
|
+
- Roles: `['admin']`
|
|
35
|
+
|
|
36
|
+
- **Regular User**:
|
|
37
|
+
- Username: `user`
|
|
38
|
+
- Password: `user123`
|
|
39
|
+
- Roles: `['user']`
|
|
40
|
+
|
|
41
|
+
In a production application, you would replace this with a real user database.
|
|
42
|
+
|
|
43
|
+
## Available Routes
|
|
44
|
+
|
|
45
|
+
- **/** - Home page with SSR
|
|
46
|
+
- **/api/auth/login** (POST) - Login endpoint
|
|
47
|
+
- **/api/protected** (GET) - Protected data (requires authentication)
|
|
48
|
+
- **/api/admin** (GET) - Admin-only data (requires admin role)
|
|
49
|
+
|
|
50
|
+
## Environmental Variables
|
|
51
|
+
|
|
52
|
+
- **PORT** - Server port (default: 3000)
|
|
53
|
+
- **JWT_SECRET** - Secret key for JWT tokens (default: 'your-development-secret-key')
|
|
54
|
+
- **DATABASE_URL** - Database connection string (if using database)
|
|
55
|
+
|
|
56
|
+
## Further Development
|
|
57
|
+
|
|
58
|
+
To extend this template:
|
|
59
|
+
|
|
60
|
+
1. Add more pages in the renderToString function or by creating separate components
|
|
61
|
+
2. Connect to a real database by uncommenting the database configuration
|
|
62
|
+
3. Add more API routes with different authentication requirements
|
|
63
|
+
4. Enhance the client-side JavaScript with more interactivity
|