gbuildercom/messaging-client repository overview

⁠Messaging Client

Messaging client is react typescript application for displaying and sending messages. This projects contains two main parts:

• Package folder contains the actual messaging UI, which can be used in different frontend projects as a NPM package.
• Standalone folder is react app which is used for local development of messaging (package), mobile clients and cypress tests.

Documentation in Notion⁠.

Deploymnet guide: https://www.notion.so/flashy-builder-3d/How-to-prepare-messaging-client-for-development-and-how-to-deploy-it-67ef4f073af4452cb4ff34cdb4359c78⁠

---

⁠Local developement

IMPORTANT: Use node v24 (lts/krypton - https://nodejs.org/en/blog/release/v24.0.0⁠)

npm run codegen apparently just works with node v24 (lts/krypton). Before you run codegen make sure to

• have messaging-service up and running with all sources mocked

• mutations and queries created in src/graphql/mutations/ & src/graphql/queries/. Only then will the codegen generate all required functions and types.

• Clone and run messaging service⁠ with all the mock environment variables set to true:

  • USE_MOCKED_MESSAGINGDATASOURCE=true
  • USE_MOCKED_USERDATASOURCE=true
  • USE_MOCKED_DBAPIDATASOURCE=true
  • USE_MOCKED_AZUREDATASOURCE=true

• Copy the .env.example file as .env.

• You can run npm run clean before the next step in order to get a full clean install.

• npm install - Installs packages in: root, package and standalone folders.

• npm run link-package - Link package to standalone. You need to execute this command after every npm install or npm run codegen (NOTE: this will ask your computers admin password)

• npm start

• visit http://localhost:3010/messages⁠ to see standalone containing package.

REMEMBER: to execute npm run codegen after schema update and after that npm run link-package before start.

You need to fill the following values in session storage to get authorized. This is an example of the values you must add if you are using messaging-service in your local:

---

⁠Coding guidelines

Following checks are made before commit:

• npm run check-format - Checks the formatting against Prettier rules.
• npm run check-lint - Checks eslint rules.
• npm run test - Executes the unit tests.

---

⁠Creating package

• pump up version in /package/package.json.

⁠Creating and testing package locally

• npm run pack - Package will be created to /package folder, which can then be installed in CoreClient for example.
• NOTE: after this you have to run npm run link-package, before running npm start again.

⁠Publishing with pipeline

• Make sure master branch is up to date and tested.
• Create new release in Github⁠ from master.
• Wait until Tekton pipelinen⁠ finishes.
• You should now see published version here⁠.

⁠Publishing from your local machine

• Login to npm registry, if not already logged in. Guide for that here⁠.
• npm run publish - Runs tests and publish package to npm registry.
• You should now see published version here⁠.

---

⁠Testing

⁠Unit tests

• cd package
• npm run test - This will run tests and watch changed files.
• npm run test:ci - This will run tests once and show test coverage.

⁠E2E tests

E2E are created with Cypress and can be run with npm run test:e2e command.