Deploying Sable on GitLab Pages

Sable is a new Matrix client based on Cinny, and offering some enhancements. It is currently offered as a client on the Matrix service. This page describes how to deploy it on GitLab pages. A demo repository is also available.

Tutorial

Preparations

It is recommended to first create a mirror of the repository somewhere on the instance. For instance, PurpleLabs GitLab has the Backups group for that. Once the repository is mirrored, you can fork it under either your own user, or a proper group. The point of using a fork is that once the CI/CD is in place, you will just have to hit “Update fork” to update the app and deploy it.

Setting up the builds

You will need to create a few files in the root of the repository:

~ cp config.json server-config.json
~ touch .gitlab-ci.yml

Once those two files created, you can edit config.json and change the following:

• Set the enabled property of hashRouter to true as it will avoid 404s when reloading the client.

Within .gitlab-ci.yml, add:

stages:
  - build
  - deploy
 
build:
  stage: build
  image: node:lts-alpine
  tags:
    - x86
  cache:
    - key: npm-$CI_COMMIT_REF_NAME
      paths:
        - node_modules
  before_script:
    - apk update
    - apk add wget
    - wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.shrc" SHELL="$(which sh)" sh -
    - npm install --global corepack@latest
    - corepack enable pnpm
    - pnpm i
  script:
    - pnpm run build
    - mv config-server.json dist/config.json
  artifacts:
    paths:
      - dist/
 
deploy:
  stage: deploy
  image: alpine
  needs: ["build"]
  pages:
    publish: dist
  before_script:
    - apk add brotli
  script:
    - echo "Compressing for web"
    - find dist -type f -regex '.*\.\(htm\|html\|xml\|txt\|text\|js\|css\|svg\)$' -exec gzip -f -k {} \;
    - find dist -type f -regex '.*\.\(htm\|html\|xml\|txt\|text\|js\|css\|svg\)$' -exec brotli -f -k {} \;
    - echo "Deploying to Pages"
  artifacts:
    paths:
    - dist/
  rules:
    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH

The deployment happens in two stages:

1. Building the app itself
2. Publishing the static built version

The second part also includes two additional steps to compress the static files with brotli and gzip to make the client easier to load. The workflow will only publish to GitLab pages if the branch pushed to is the default branch for the repository.