Dev & Build

All the codes of GAGU are in the same repository, which consists of three parts:

gagu
|- gagu-back-end
|- gagu-front-end
|- gagu-website

Only the yarn.lock file is uploaded in the project, so using yarn instead of npm to install dependencies can ensure that our running results in the development environment are consistent.

Constitution

Front-end

In order to minimize the size of the package, after the project became independent, the originally used UI component library BlueprintJS was gradually removed and replaced with SemiUI which can be loaded on demand.

Windows wallpapers and MIUI V5 icons were also removed, and the monochrome icons were replaced from Carbon Design System to RemixIcon. Almost all icons are used from RemixIcon, even the icons of internal Apps are selected from it and edited in Figma.

The whole still uses the combination of React + TailwindCSS, and the built size is very small.

# dev
$ cd gagu-front-end
$ yarn
$ yarn start

Back-end

After comparing several common frameworks during model selection, the reason for finally choosing NestJS is very simple, because it adopts the module syntax of ES6 and has good support for TS.

In addition, considering that the front-end and back-end codes will be placed in the same repository, when switching contexts, a unified code style can more or less reduce switching costs.

# dev
$ cd gagu-back-end
$ yarn
$ yarn start:dev

Website

Have a try with Astro, first time using it.

# dev
$ cd gagu-website
$ yarn
$ yarn start

Build NPM package

1. Update following version info:

• version field in ./package.json
• GAGU_VERSION in ./gagu-back-end/src/utils/constant.util.ts
• version field in ./gagu-website/.env

2. Sync production dependencies in ./gagu-back-end/package.json to ./package.json

3. Run build script npm run build:npm, refer to ./build-npm.sh

4. Dry run publish, update package size info, publish to NPM

Build Binary Version

1. The binary version needs to complete the previous built step above

2. Install the dependencies in ./package.json, yes, this is a bit redundant, this is caused by the original decision to put the three parts in the same repository, fortunately, it is not a big problem

3. Execute npm run build:pkg in the gagu directory, you need to install Vercel/pkg globally in advance npm i -g pkg

4. The built content will appear in ./pkg

Thanks

References

1. SVG compression: SVG在线压缩合并工具
2. useClickAway: useClickAway.ts
3. Audio spectrum effects: 做一个酷酷的音乐频谱
4. Call IINA: Chrome_Open_In_IINA
5. JSON format: json-format
6. Read 100+ files: readEntries
7. Infrared code format: 「一块钢板的重生」——7年前的小米4还能干什么
8. MI TV infrared code: 哪位大佬有小米电视的红外遥控码

Dependencies

There are also many dependencies used throughout the project:

@craco/craco  axios  chalk  express-zip  github-markdown-css  gm  lodash  luxon  md5  minimist  music-metadata  node-disk-info  piexifjs  qrcode.react  react-hot-toast  react-i18next  react-markdown  react-photo-view  react-rnd  recoil  rehype-raw  remark-gfm  thumbsupply 

My workload would be enormous without them and I am very grateful to them.