Skip to content

AdaptiveConsulting/ReactiveAnalytics

Repository files navigation

Reactive Analytics

TravisCI

Overview

Reactive Analytics is a monorepo that demonstrate how NodeJS, Apollo GraphQL, React, and Typescript can be used to develop robust data-driven web apps.

Both the server-side and client-side code use strong types which are used to generate the GraphQL schema. This allows developers to detect data and schema errors at design-time and compile-time.

Requirements

Getting started

After downloading or cloning repos open a terminal to the root folder and run yarn install to install dependencies.

    [ReactiveAnalytics] $ yarn install

Once the dependencies are install start the client and server using the start command.

    [ReactiveAnalytics] $ yarn start

This will open up a browser window to http://localhost:3005 for the client interface, and a GraphQL server on port 4000.

Data connection

By default the server will connect to the IEX trading system to retrieve realtime market information.

To connect to IEX during development, copy server/.env.example to server/.env and set the value of IEXCLOUD_PUBLIC_KEY to a valid IEX sandbox token.

OpenFin

To run ReactiveAnalytics in OpenFin (only supported on Windows), from the root directory, after running yarn start per above, in a separate terminal:

    ReactiveAnalytics> yarn openfin

Alternatively, if running the ReactiveTrader OpenFin Launcher, after running yarn start per above, click the ReactiveAnalytics icon in the Launcher.

Within the OpenFin window, you can right-click to reload and access devtools.

To kill all running OpenFin processes:

    ReactiveAnalytics> yarn openfin:kill

Access IEX Sandbox token

  • If you haven't already done so, create a free personal IEX account at https://iexcloud.io/cloud-login#/register/
  • Login to your IEX console https://iexcloud.io/console/
  • Make sure the Sandbox testing Toggle on the bottom left hand side of the screen is set to on
  • Navigate to the API Tokens tab on the top left handside of the screen
  • Copy the Publishable Token

Note, rate limiting with a free IEX account token can cause failed API calls

Generate schema and typings

Server schema

  • Ensure the backend is running locally and on port 4000
  • Run npm run generate-server-schema from root
  • A graphql-schema.json file will be generated in the server folder

Client typings

  • Run npm run generate-client-typings from root
  • The relevant typings will be generated in their respective folders
  • Global typings are stored in global-types

Core technologies used

  • React - Interface framework
  • Styled Components - Interface styling framework
  • Apollo GraphQL - GraphQL framework to allow rapid and reliable development of client-server communication

Useful developer add-ons

When working with the Reactive Analytics repo, there are many add-ons that make development and debugging painless. When using Visual Studio Code and Google Chrome as a developer environment consider trying out some of the following tools.

Visual Studio Code extensions from the marketplace

  • Apollo GraphQL - Rich editor support for GraphQL client and server development that seamlessly integrates with the Apollo platform
  • Debugger for Chrome - Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.
  • ESLint - Integrates ESLint JavaScript into VS Code.
  • JSON to TS - Convert JSON object to typescript interfaces
  • markdownlint - Markdown linting and style checking for Visual Studio Code
  • vscode-styled-components - Syntax highlighting for styled-components

Google Chrome extensions

Deployment

Deployment is through Travis CI

Merging to master will build and deploy to dev: https://dev-reactive-analytics.adaptivecluster.com/

Manually trigger a build with custom config to deploy to uat/prod.

env:
  global:
    ENV: uat
    SKIP_BUILD: true