# Kite: a Vue SSR front end, a React admin and an Express GraphQL server

> Kite is a multi-privilege blog and content management system split across three repositories, with Vue and vue-server-renderer for the public site, React and Redux for the admin, and an Express server exposing GraphQL over MySQL. The project is a learning exercise built from scratch and the README is candid about its rough edges.

**maoxiaoquan/kite** — :palm_tree: Kite 前台页面是vue ssr服务端渲染、后台页面是react spa、服务层nodejs express、mysql编写的一套多权限文章、动态管理系统 

- Repository: https://github.com/maoxiaoquan/kite
- Stars: 633 · Forks: 107
- Language: JavaScript
- License: MIT
- Published: 2026-10-21 · Updated: 2026-10-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/maoxiaoquan-kite

## Three repositories, and only one is needed to run it

The project is deliberately split, and the split tells you what each piece is for.

The kite repository is the main package, used for production and requiring no secondary development, and it carries express, graphql, socket.io and typescript. The kite-client repository is the public site, built with vue, vuex and vue-ssr, and it is only needed if you intend to work on the front end. The kite-admin repository is the admin area, built with react and redux, and it is only needed if you intend to work on the back office.

That structure is a good decision for a reference project, because the deployable server is separable from the two clients. The front end is a Vue application rendered on the server, and the admin is a React single page application, and neither has to be built to serve the API.

The feature split mirrors the two audiences. The public side is a multi-user article publishing system where people can register an account, publish articles, follow other users, like articles and comment. The admin side handles article publishing and review, comment moderation, administrator permission management and system configuration, with the front-end and back-end user and administrator roles kept separate. The init screen is described as an initialisation of the whole publishing system, covering the initial administrator role and MySQL itself.

The README is honest that this is a from-scratch build. The stated purpose is that the project touches react, vue, node, webpack, graphql and express, covering most of the front-end technical stack, and that by learning the project you come into contact with the whole ecosystem, including a hand-written SSR scaffold.

## The server scripts are the whole install story

There is no elaborate setup guide, so the npm scripts in package.json carry most of the operational detail.

```json
  "scripts": {
    "init": "node  ./cli/init.js ",
    "build": "tsc",
    "dev": "nodemon ./server/build/index.js",
    "server": "cross-env NODE_ENV=production pm2 start pm2.json",
    "test-mysql": "node db/mysqldb/test.js",
    "kite-update": "node update"
  },
```

Six of those scripts map onto the lifecycle described in the README. The init script runs the cli/init.js file, which is the interactive initialisation that sets up the database and the first administrator. The start script is the local development mode: it sets NODE_ENV=development and runs nodemon watching the TypeScript sources under server/src, executing ts-node on server/src/index.ts. The build script is plain tsc, so the server is compiled TypeScript. The server script is the production path, launching pm2 with the pm2.json process file, and pm2.json sits in the repository root. There is also a test-mysql script pointing at db/mysqldb/test.js for checking the database connection, and kite-update points at the update directory, which is the upgrade program.

Two details in the README are worth flagging before you start. The only supported database is MySQL, and for local development the suggestion is to install phpstudy, which bundles a MySQL server with a management panel. And the cli email address must be filled in completely, otherwise the public site cannot send registration emails, which means the init step is not skippable.

The port layout is also fixed by the documentation: the client home page and the admin page are both reached on port 8086, with the admin under the /admin path, while the initialisation walkthrough runs on port 8085.

## A 2020 release, and a demo account published in the README

The version history is the clearest signal about where this project stands.

The update record shown in the README is version 0.9.1, dated 2020.5.15, and its first entry is that the admin was rebuilt with React hooks, React Router v6 and TypeScript, which halved the file size. The rest of that release replaced the image display approach on the client pages, adjusted the UI, added some level display places and fixed some bugs. That release required running the upgrade command npm run kite-update.

The current package.json version is 1.0.1, so the manifest has moved past the 0.9.1 record shown in the README, and the full version history is kept in a separate document at docs/VERSION.md. There are no GitHub releases, so there is no tag to pin.

The last push to the repository was on 2026-06-24. The repository is not archived, and the topics list still names webpack3, react16, redux, react-hooks and react-router-v6, which places the stack firmly in the 2018 to 2020 generation of tooling.

Then there is the demo account. The README publishes the credentials for the back-office demo site as account kitetest with password q123456, and notes that the resources are large so it may take a while to load. Two things follow from that. The demo is genuinely useful for evaluating the admin interface before you set anything up, and the credential being public means you should change it in any instance you deploy yourself.

The licence situation is also slightly inconsistent. The README states MIT, and the repository has a LICENSE file, but the package.json license field reads ISC. That is a discrepancy worth resolving before you publish a fork.

## The server side is Express with Apollo GraphQL over Sequelize

Looking at the dependency list tells you the shape of the back end.

The GraphQL layer is apollo-server-express at 2.9.12 with graphql at 14.5.8, and the HTTP framework is express at 4.17.0 with body-parser, cookie-parser and express-rate-limit at 5.1.1 for throttling. Security headers come from helmet at 3.21.3, and there is an xss package at 1.0.6 and trim-html for sanitising HTML.

Persistence is MySQL through the mysql and mysql2 drivers, with sequelize at 5.3.0 as the ORM, and the mysql client versions are 2.15.0 and 1.5.3. Both are listed, which usually means one is a leftover or a transitive requirement.

Realtime is socket.io at 2.3.0, and markdown rendering is handled by marked at 0.3.19 with highlight.js for code blocks. Mail goes through nodemailer with the smtp transport. Object storage is a first-class concern rather than an afterthought, with ali-oss, cos-nodejs-sdk-v5 and qiniu all present, so uploads can go to Alibaba Cloud OSS, Tencent COS or Qiniu.

The remaining dependencies are utility layers: axios, cheerio for parsing HTML on the server, busboy for streaming uploads, multer as a multipart handler, date-fns and moment for dates, inquirer for the interactive cli, yargs for argument parsing, jsonwebtoken for tokens, lowdb for a lightweight JSON store, shortid and uuid for identifiers, underscore, shelljs for shelling out, and vue-server-renderer and vue-client-only for the SSR side.

The database directory in the repository root holds both the MySQL setup and a lowdb file, and the README separately warns to back up the MySQL database, the /db/lowdb/db.js file and the /static/update folder before running an upgrade, since the upgrade program judges what to do based on the state it finds.

## The author describes the project as unfinished, and the code reflects it

It would be dishonest to present Kite as a polished CMS, because the author says otherwise in the README itself.

The description says the project was written intermittently, that the main body is basically finished, and that what remains is optimisation and bug fixing, with the logic and code to be looked at if you can read it and skipped if you cannot, since it is also a personal learning process. A separate line notes that the cli part of the code is written rather messily and will be continued to be improved later, and that the front-end preview still has problems, requires waiting for the compile to finish before opening, and errors otherwise.

Those caveats map onto the structure of the repository. There is a cli/ directory with the init program, a config/ directory, a db/ directory holding the MySQL and lowdb parts, a server/ directory, a views/ directory for the server-rendered templates, a static/ directory, an update/ directory for the upgrade program, and docs/ holding the version history and screenshots.

One thing that deserves credit is the development convention section, which is unusually specific for a personal project. Page-level and component-level folders use PascalCase or camelCase for readability, other folders such as src, admin, client and utils use camelCase, anything touching the database uses underscores, files named index.js, index.vue, index.jsx, index.css and index.scss are lowercase, vuex actions start with an uppercase letter and use underscores such as ARTICLE_COMMENT, and the admin and server folders lean on underscores because they interact with MySQL directly and the stored fields are mostly underscored.

That last rule is the one that will help you most when reading the code. The naming in the server and admin directories maps onto database columns, so an underscored variable name in server/src is usually a field name rather than a style choice.

## Conclusion

Kite suits a developer who wants to read one repository that touches Vue server-side rendering, a React admin, Express, GraphQL, MySQL and socket.io at the same time, since the whole point of the project is to cover a wide slice of the front-end ecosystem. It does not suit you as a CMS to put in production, because the version history stops in 2020, the admin credentials are published in the README, and the author describes the project as being written on and off with optimisation and bug fixing as the remaining work. Before you run it, change the demo account credentials, read the section on the cli part being messy, and note that the server package.json declares the licence as ISC while the repository licence is MIT.

## FAQ

### How do I initialise the Kite CMS?

Run npm run init, which executes the cli/init.js program, then open localhost:8085 in the browser and follow the steps. The README notes that MySQL is the only supported database and that the cli email address must be completed, otherwise the public site cannot send registration emails.

### What are the three parts of the Kite project?

The kite repository is the main package holding the express, graphql, socket.io and typescript server, used in production as is. The kite-client repository is the public site built with vue, vuex and vue-ssr, and kite-admin is the back office built with react and redux. The two clients are only needed for secondary development.

### Which technologies does the Kite server use?

Express with apollo-server-express and graphql, MySQL through sequelize with the mysql and mysql2 drivers, socket.io for realtime, marked and highlight.js for markdown and code highlighting, nodemailer for mail, helmet and xss for security, and pm2 for the production process.

### How do I upgrade an existing Kite installation?

Back up the MySQL database, the /db/lowdb/db.js file and the /static/update folder, then run npm run kite-update, which executes the update program and judges what to do based on the state it finds. The official branch is always synchronised with the latest version.

## Sources

- [Issues](https://github.com/maoxiaoquan/kite/issues)
- [License: MIT](https://github.com/maoxiaoquan/kite/blob/master/LICENSE)
- [maoxiaoquan/kite on GitHub](https://github.com/maoxiaoquan/kite)
- [README](https://github.com/maoxiaoquan/kite/blob/master/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/maoxiaoquan-kite