ITiergarten monorepo

This is a setup for a basic javascript backend/frontend project. It can be used as a playground for quickly building simple applications.

Stack

• General: pnpm, typescript, eslint
• Frontend: vue 3, UnoCSS, i18n, pinia, vite, pwa/workbox, vueuse, dayjs, rollup oss license plugin
• Backend: rollup, koajs, winston, grant, ajv, koa-jwt, ws
• Testing: jest, jest-json-schema, @shelf/jest-mongodb, nock, supertest
• Recommended IDE Setup: vscode, volar, i18nally, vscode-eslint, search-node-modules

Install

git clone https://github.com/ameinhardt/itiergarten.git
cd itiergarten
npx pnpm install

Downloads the sourcecode, installs main and packages dependencies and runs a build after

Development

pnpm dev

Spawns backend and frontend pnpm run dev. Make sure to have propper settings in place (.env.development, vite.config.ts proxy) to proxy vite's api calls to the backend.

In order to commit / push, assure that husky is aware of npx: https://typicode.github.io/husky/#/?id=command-not-found

Build

pnpm run build

Runs parallel builds in all relevant packages

Run

pnpm run start

Starts the backend with the last build of the frontend

Update dependencies

Use pnpm to update recursive dependencies to the latest version interactively:

pnpm up -iLr

IDE Visual Studio Code

Visual Studio Code is recommended as IDE. The .vscode directory contains useful settings, launch configurations and tasks for this monorepo. Additional configurations could be stored in a customized <...>.code-workspace file, for example:

{
"settings": {
  "terminal.integrated.env.windows": {
    "NODE_EXTRA_CA_CERTS": "C:\\...\\CA-DE_pem.cer",
    "http_proxy": "http://localhost:3128",
    "https_proxy": "http://localhost:3128",
    "no_proxy": "https://artifactory.example.com",
    "volar.lowPowerMode": true
  },
  "eslint.nodePath": "C:\\...\\itiergarten\\node_modules"
  }
}

Git hooks

For maintaining a clean repository, this project uses husky git hooks together with lint-staged to check code quality. It assures that

• added code is following the lint guidelines on commit
• runs unit tests before push

If these steps fail, the git action will not complete.

healthcheck

If the environment variable HEALTHPORT is set, a simple http server bound to localhost is created on this port. Upon request of any path, it checks the most important vital signs (e.g. own server or database reachable).
The main cli.js accepts the commandline argument -c / --check, which requests the server and exits with code 0, if all checks are ok, otherwise it exits with code 1.
These two features facilitate creating a (docker-) healthcheck. See also docker-compose.yml.

Docker

To build your custom image on windows, e.g. with a local proxy, use:

docker build --rm --build-arg HTTP_PROXY=http://host.docker.internal:3128 --build-arg HTTPS_PROXY=http://host.docker.internal:3128/ --build-arg http_proxy=http://host.docker.internal:3128/ --build-arg https_proxy=http://host.docker.internal:3128/ -t itiergarten/server:latest .

docker-compose

It is also possible to use the provided docker-compose.yml with environment variables.
I.e. for a complete build:

export HTTP_PROXY=http://localhost:3128/
export HTTPS_PROXY=http://localhost:3128/
npx pnpm --ignore-scripts install
npm run build
export HTTP_PROXY=http://host.docker.internal:3128/
export HTTPS_PROXY=http://host.docker.internal:3128/
docker-compose build --parallel
docker-compose push
docker-compose up

HTTPS / certificates

If you want to use tls, e.g. for validating https access, you can set NODE_EXTRA_CA_CERTS environment variable. In docker environment, a volume can be mounted with potential certificates. See backend for related environment variables HTTPS_KEY, HTTPS_CERT and HTTPS_HSTS

To do

backend

• create tests for websockets

Frontend

• integrate cypress for frontend testing
  • vite integration
  • component testing example
• colors