|
1 | | -# Express Vue SSR (TypeScript) |
| 1 | +<div align="center"> |
2 | 2 |
|
3 | | -A full-featured Vue.js Server-Side Rendering (SSR) application built with TypeScript, Express.js, and Vite. |
| 3 | +# Zenith |
4 | 4 |
|
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. |
6 | 6 |
|
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)** |
16 | 8 |
|
17 | | -## Tech Stack |
| 9 | +</div> |
18 | 10 |
|
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. |
0 commit comments