Skip to content

Commit fa172ee

Browse files
committed
feat: update readme
1 parent 18ce907 commit fa172ee

4 files changed

Lines changed: 5 additions & 218 deletions

File tree

README.md

Lines changed: 5 additions & 218 deletions
Original file line numberDiff line numberDiff line change
@@ -1,223 +1,10 @@
1-
# Express Vue SSR (TypeScript)
1+
<div align="center">
22

3-
A full-featured Vue.js Server-Side Rendering (SSR) application built with TypeScript, Express.js, and Vite.
3+
# Zenith
44

5-
## Features
5+
A versatile JavaScript CMS that allows extensions via modules, that can be used to build a wide variety of applications like blogs, e-commerce, SaaS, and more.
66

7-
- 🚀 Vue 3 with Server-Side Rendering
8-
- ⚡ Vite for fast development and building
9-
- 🛠️ Express.js backend with modular architecture
10-
- 📝 Structured logging with Winston
11-
- ⏰ Scheduled tasks with node-schedule
12-
- 🔄 Auto-reload development server
13-
- 📁 Organized project structure with routes, commands, and services
14-
- 🎯 Production-ready configuration
15-
- 🔷 Full TypeScript support with type safety
7+
📖 **[Documentation](https://zenith-docs.sidekick-coder.com)**
168

17-
## Tech Stack
9+
</div>
1810

19-
- **Vue 3.5.17** - Progressive JavaScript framework
20-
- **Express 5.1.0** - Fast, unopinionated web framework
21-
- **Vite 7.0.3** - Next generation frontend tooling
22-
- **TypeScript** - Type-safe JavaScript
23-
- **Winston** - Structured logging
24-
- **Node Schedule** - Cron-like job scheduler
25-
- **Commander.js** - CLI framework
26-
27-
## Project Structure
28-
29-
```
30-
├── client/ # Vue.js frontend
31-
│ ├── App.vue # Main Vue component
32-
│ ├── entry-client.ts # Client-side entry point
33-
│ ├── entry-server.ts # Server-side entry point
34-
│ ├── index.html # HTML template
35-
│ ├── main.ts # Vue application setup
36-
│ ├── style.css # Global styles
37-
│ ├── vite-env.d.ts # Vite environment types
38-
│ ├── components/ # Vue components
39-
│ │ └── HelloWorld.vue
40-
│ ├── assets/ # Static assets
41-
│ │ └── vue.svg
42-
│ └── public/ # Public assets
43-
│ └── vite.svg
44-
├── commands/ # CLI commands
45-
│ ├── hello.ts # Sample command
46-
│ └── serve.ts # Development server command
47-
├── routes/ # Express routes
48-
│ └── users.ts # Sample route
49-
├── routines/ # Scheduled tasks
50-
│ └── sample.ts # Sample routine
51-
├── services/ # Application services
52-
│ └── vite.ts # Vite SSR service
53-
├── utils/ # Utility functions
54-
│ ├── importAll.ts # Dynamic module loader
55-
│ └── paths.ts # Path utilities
56-
├── bin/ # Binary files
57-
│ └── cli.js # CLI binary
58-
├── logs/ # Application logs
59-
│ ├── app.log
60-
│ └── error.log
61-
├── index.ts # Main server file
62-
├── logger.ts # Logging configuration
63-
├── package.json # Dependencies and scripts
64-
├── tsconfig.json # TypeScript configuration
65-
├── tsconfig.app.json # App-specific TypeScript config
66-
├── tsconfig.node.json # Node-specific TypeScript config
67-
└── vite.config.ts # Vite configuration
68-
```
69-
70-
## Getting Started
71-
72-
### Prerequisites
73-
- Node.js 18+
74-
- npm or yarn
75-
76-
### Installation
77-
78-
1. Install dependencies:
79-
```bash
80-
npm install
81-
```
82-
83-
2. Start development server:
84-
```bash
85-
npm run dev
86-
```
87-
88-
The application will start with hot-reload enabled, watching for changes in your source files.
89-
90-
### Production Build
91-
92-
1. Build the application:
93-
```bash
94-
npm run build
95-
```
96-
97-
2. Run server:
98-
```bash
99-
node index.ts
100-
```
101-
102-
## Available Scripts
103-
104-
- `npm run dev` - Start development server with auto-reload
105-
- `npm run build` - Build vite assets for production
106-
107-
## CLI Commands
108-
109-
The template includes a custom CLI tool called `art`:
110-
111-
```bash
112-
# Start development server with watch mode
113-
node art serve -w
114-
115-
# View available commands
116-
node art --help
117-
118-
# Run a sample hello command
119-
node art hello
120-
```
121-
122-
### Creating Custom Commands
123-
124-
Add new commands in the `commands/` directory:
125-
126-
```typescript
127-
// commands/migrate.ts
128-
import { program } from 'commander'
129-
130-
program.command('migrate')
131-
.description('Run database migrations')
132-
.action(() => {
133-
console.log('Running migrations...')
134-
})
135-
```
136-
137-
## Server-Side Rendering
138-
139-
This template implements full Vue 3 SSR with:
140-
141-
- **Server-side rendering** for initial page load
142-
- **Client-side hydration** for interactive functionality
143-
- **SEO-friendly** HTML output
144-
- **Fast page transitions** after hydration
145-
146-
### How it works
147-
148-
1. **Server renders** the Vue app to HTML string
149-
2. **Client receives** the pre-rendered HTML
150-
3. **Vue hydrates** the static HTML into a dynamic app
151-
4. **Subsequent navigation** is handled client-side
152-
153-
## Modular Architecture
154-
155-
### Routes
156-
Express routes are automatically loaded from the `routes/` directory. Each route file should export a `router`:
157-
158-
```typescript
159-
// routes/api.ts
160-
import { Router } from 'express'
161-
162-
export const router = Router()
163-
164-
router.get('/api/health', (req, res) => {
165-
res.json({ status: 'ok' })
166-
})
167-
```
168-
169-
### Scheduled Tasks
170-
Create background jobs in the `routines/` directory. Each routine should export a default object with `name`, `cron`, and `execute` properties:
171-
172-
```typescript
173-
// routines/cleanup.ts
174-
export default {
175-
name: 'Daily Cleanup',
176-
cron: '0 0 * * *', // Run every day at midnight
177-
execute: async () => {
178-
logger.info('Running daily cleanup at: ' + new Date().toISOString());
179-
// Your cleanup logic here
180-
}
181-
}
182-
```
183-
184-
## TypeScript Configuration
185-
186-
The project includes three TypeScript configuration files:
187-
188-
- **`tsconfig.json`** - Base TypeScript configuration
189-
- **`tsconfig.app.json`** - Configuration for application code
190-
- **`tsconfig.node.json`** - Configuration for Node.js specific code
191-
192-
TypeScript files are executed directly by Node.js without compilation - only Vite assets are built for production.
193-
194-
## Development Features
195-
196-
- **Hot Module Replacement (HMR)** with Vite
197-
- **Auto-restart** on server file changes
198-
- **Structured logging** for debugging
199-
- **File watching** with intelligent ignore patterns
200-
- **Error handling** with proper stack traces
201-
- **Full TypeScript support** with type checking
202-
203-
## Production Features
204-
205-
- **Optimized build process** with Vite
206-
- **Proper error handling** and logging
207-
- **Environment-based configuration**
208-
- **Performance optimizations**
209-
- **Static asset handling**
210-
- **Type safety** throughout the application
211-
212-
## Logging
213-
214-
The application uses Winston for structured logging:
215-
216-
- **Development**: Console output with colors
217-
- **Production**: File-based logging in `logs/` directory
218-
- **Log levels**: error, warn, info, debug
219-
- **Automatic log rotation** (configurable)
220-
221-
## License
222-
223-
This template is provided as-is for development and learning purposes.
114 KB
Loading

docs/assets/thumbnail.png

96.9 KB
Loading

docs/assets/user-list.png

80.3 KB
Loading

0 commit comments

Comments
 (0)