SMILE Dashboard

Run locally

This section describes how to run the dashboard backend and frontend locally without docker.

Pre-requisites

Make sure you have installed the following:

• Node.js: 16.10.0
• Yarn: 1.22.22

Tip: We recommend that you use nvm: Node Version Manager and yvm: Yarn Version Manager to switch between versions more easily.

Windows Tip: If you are developing on Windows, we recommend that you use Ubuntu / Windows Subsystem for Linux.

Pre-build Steps

If starting from a fresh build, pull dependencies by running yarn from the project root directory.

If running into build issues, try purging existing contents from all /node_modules directories in project.

rm -rf ./node_modules frontend/node_modules graphql-server/node_modules

Dashboard Backend

The backend for the dashboard is under ./graphql-server.

Set up your ./graphql-server/src/env/application.properties.EXAMPLE with all of the application properties needed for running the dashboard backend.

Add the following variable to your environment:

export NODE_TLS_REJECT_UNAUTHORIZED=0
export SMILE_CONFIG_HOME=[path to the dashboard configuration directory]
export SMILE_DATA_HOME=[path to the dashboard data directory]

# Skip if you skipped the Oracle Instant Client step
export LD_LIBRARY_PATH=[path to the Oracle Instant Client directory]

# Skip if you're not deploying the dashboard backend with Docker
export NODE_OPTIONS="--max-old-space-size=8192"

Build and launch the node app from the project root directory with:

yarn build:backend
yarn dev:backend

If successful, the graphql client should be available at https://localhost:4000/graphql.

Dashboard App

Copy ./frontend/.env.example to ./frontend/.env and fill in any missing values if available.

Update these URLs to the secure versions (HTTPS) if certificates are available:

REACT_APP_REACT_SERVER_ORIGIN=http://localhost:3006
REACT_APP_EXPRESS_SERVER_ORIGIN=http://localhost:4000

To run the frontend:

yarn dev:frontend

Example pages:

• https://localhost:3006/

Tip: This page should open automatically through your default web browser. If not then please navigate to the web app manually.

Building the Docker Images

To build the frontend docker image:

docker build -f Dockerfile . -t [org]/smile-dashboard:[build version]

To build the backend docker image:

docker build -f graphql-server/Dockerfile . -t [org]/graphql-client:[build version]

Running with docker-compose

Running the dashboard backend and frontend with docker-compose.

Requirements:

• ${SMILE_CONFIG_HOME}: path to the dashboard configuration directory
• ${SMILE_CONFIG_HOME}/resources/smile-dashboard: path to application.properties and SSL cert files for the dashboard backend
• ${SMILE_CONFIG_HOME}/nats: path to NATS config, must contain rootCA.pem

See ./server/env/application.properties.EXAMPLE for all of the application properties needed for running the dashboard.

Example docker-compose file contents:

version: '3'

networks:
  default:
    name: smile-network
    external: true

services:
  graphql-client:
    container_name: graphql-client
    image: cmometadb/graphql-client:[build version]
    restart: unless-stopped
    environment:
      - SMILE_CONFIG_HOME=${SMILE_CONFIG_HOME}
      - NODE_TLS_REJECT_UNAUTHORIZED=${NODE_TLS_REJECT_UNAUTHORIZED}
      - LD_LIBRARY_PATH=${LD_LIBRARY_PATH}
      - REACT_APP_REACT_SERVER_ORIGIN=${REACT_APP_REACT_SERVER_ORIGIN}
      - REACT_APP_EXPRESS_SERVER_ORIGIN=${REACT_APP_EXPRESS_SERVER_ORIGIN}
      - SMILE_DATA_HOME=${SMILE_DATA_HOME}
      - NODE_OPTIONS="--max-old-space-size=8192"
    volumes:
      - type: bind
        source: ${SMILE_CONFIG_HOME}/resources/smile-dashboard
        target: /server/graphql-server/dist/env
      - type: bind
        source: ${SMILE_CONFIG_HOME}/nats
        target: /server/nats
      - type: bind
        source: ${SMILE_DATA_HOME}/logs/smile-dashboard
        target: ${SMILE_DATA_HOME}/logs/smile-dashboard
      - type: bind
        source: ${LD_LIBRARY_PATH}
        target: ${LD_LIBRARY_PATH}
    external_links:
      - nats-jetstream
    links:
      - neo4j
    depends_on:
      neo4j:
        condition: service_healthy
      keycloak:
        condition: service_started
    ports:
      - 4000:4000
    healthcheck:
      test: ["CMD-SHELL", "wget --no-check-certificate --no-verbose --spider https://localhost:4000 || exit 1"]
      interval: 30s
      timeout: 10s
      retries: 5

  smile-dashboard:
    container_name: smile-dashboard
    image: cmometadb/smile-dashboard:[build version]
    restart: unless-stopped
    environment:
      - SMILE_CONFIG_HOME=${SMILE_CONFIG_HOME}
      - REACT_APP_EXPRESS_SERVER_ORIGIN=${REACT_APP_EXPRESS_SERVER_ORIGIN}
      - REACT_APP_REACT_SERVER_ORIGIN=${REACT_APP_REACT_SERVER_ORIGIN}
    volumes:
      - type: bind
        source: ${SMILE_CONFIG_HOME}/resources/smile-dashboard
        target: ${SMILE_CONFIG_HOME}/resources/smile-dashboard
    links:
      - graphql-client
    ports:
      - 3006:3006
    depends_on:
      graphql-client:
        condition: service_healthy

Command:

docker-compose up -d

Making changes to the schema

Pre-build steps:

Confirm your application.properties is up to date and points to the desired NATS and Neo4j servers.

Steps:

1. Make changes to the schema type definitions in typeDefs.ts
2. Changes to any of the schemas should also result in equivalent changes to their corresponding types defined in operations.graphql
3. Build the backend yarn build:backend
4. Launch the backend yarn dev:backend
5. Run codegen in another window yarn run codegen