Frontends for chat application

Both Web and Mobile frontends are integrated within the same codebase to maintain consistency. They communicate with a server via websockets.

Web

Web client uses React.js.

Setup backend IP address

By default web frontend connects to the backend server on cloud. In order to do local development, you need to run local backend server from 'twin' repo (in a different Github organization).
Follow an example in web/.env.example and create a new file web/.env with environment variable
WEB_API_URL=http://localhost:5080
This file is in .gitignore and should not be checked in.

Run web application

To start working with the web application, navigate to its root folder twin_front/web
cd web
Install dependencies
npm install
Run the shared directory watcher
npm run watch-shared
Start the web application
npm start
If an application webpage does not open up, open a new browser tab manually and enter http://localhost:5080

Websocket entry point

Web frontend communicates with the backend via Websockets. The entry point is in this file:
web/src/common/ws_api/ws_api.js

Mobile

Mobile client uses React Native.

Setup backend IP address

By default mobile frontend connects to the backend server on cloud. In order to do local development, you need to run local backend server from 'twin' repo (in a different Github organization).
Follow an example in mobile/.env.example and create a new file mobile/.env with environment variables
IOS_API_URL=http://<your machine IP address>:5080
ANDROID_API_URL=http://<your machine IP address>:5080
To run on a remote backend, you may use this URL: https://back.twin4ever.com/ This file is in .gitignore and should not be checked in.

Run Android and iOS mobile applications

To start working with mobile applications, follow README in mobile folder:
mobile/README.md

Websocket entry point

Mobile frontends communicate with the backend via Websockets. The entry point is in this file: mobile/src/core/services/ws/ws_api.ts

Backend

Backend is located in repo 'twin' in a separate Github organization, and works for both Web and Mobile clients. It's written in Python.

Websocket entry point

src/api/app.py

Development Workflow

In order to speed up the development process, we do not have any dev or staging environment. Dev work is done like this:

1. Create a new branch from the master for each Milestone or a new feature. The branch is created in a folder with your name.
2. Proceed with the dev work on this branch.
3. Upon completion, merge any latest changes from the master into your branch, to ensure there will be no merge conflicts.
4. Test your work, including a testing of a real device for the mobile.
5. Raise a PR for parasol4791.
6. Merge PR to the master after a review.

IMPORTANT: Code Auto-formatting

When you work with the codebase, please, make sure any auto-formatting is turned off, and you ONLY submit code changes you've made directly.
Massive auto-formatting obscures what was done, and causes merge conflicts.