CoLink Client

The CoLink Client is a React application that the user interacts with to send gRPC requests to the CoLink Rust backend.

Design Overview

The CoLink client receives input from the user and makes HTTP/1.1 calls (i.e. POST requests) to send gRPC requests to the CoLink backend.

For local testing (i.e. hosting the server locally), we utilize an Envoy proxy to serve as a translation layer between the CoLink Client and the CoLink server. This is necessary due to CORS browser restrictions.

The colink-frontend-dev repository handles the React CoLink Client and the Envoy Proxy configurations.

Setup (Manual)

Node.js and npm

Node.js and npm can be installed here. After installation, run npm install in the root directory to download all required node packages (protoc, TypeScript, etc).

Envoy

Envoy can be installed from here.

Development

Note: this setup (and other elements of the README) assumes that your root directory is setup like such:

/CoLearn-Dev
    /colink-frontend-dev
        ...
    /colink-sdk-a-js-dev
        ...
    /colink-server-dev
        ...

Proto Configuration

The CoLink client uses Typescript/Javascript versions of the proto configuration to create/receive gRPC requests. As such, these must be configured before running the service.

Typescript/Javascript definitions of protocol buffers are located in /proto_js generated by the proto_gen.sh script file.

Instructions to update /proto definitions:

• Execute ./scripts/proto_gen.sh in the colink-frontend-dev folder

NOTE: Please use a libprotoc version of 3.20.* or lower, 3.21+ is currently broken

Running the Application Locally (Setup Script)

This is a 2 step process:

• Start the DDS server core:
  • For local testing, execute the following command (in /colink-server-dev): cargo run -- --address "127.0.0.1" --port 8080 --mq-amqp amqp://guest:guest@localhost:5672 --mq-api http://guest:guest@localhost:15672/api
    • This hosts the CoLink Server at http://localhost:8080
• Execute ./start_frontend.sh
  • This will install any necessary packages, start the envoy proxy (necessary for local testing) and start the frontend UI
    • The provided envoy proxy receives requests at http://localhost:8000 and redirects them to the CoLink Server at http://localhost:8080

The frontend UI is hosted at http://localhost:3000

In Application

• Configure the client hostname and host_token manually in the debug panel
  • If testing locally, specify the envoy proxy as the hostname (in the above setup, http://localhost:8000)
• User Login component allows an individual to create a JWT with their own ECDSA private key or by generating a new private key. Generated credentials are displayed after creation.

Deploy Github Pages

• To deploy the frontend application to Github pages, run npm run deploy

General Layout

node_modules

Stores node modules used in frontend code

proto

Typescript/Javascript equivalents of proto configurations

src

Contains React components + support files for the frontend application (index, App, Login, AdminToken)

docker-compose.yaml

TBD or removed, potentially wrap all imports in Docker container to avoid extra installation of packages.

envoy.yaml

Envoy proxy that allows the client application to communicate with the DDS server. The proxy server listens on port 8000 for requests sent by the user and redirects those requests to the DDS server.

index.html

Entry point for the application.

*.json, webpack.config.js

Configuration files that support installation + development.