Reactive Analytics

• Reactive Analytics
  • Overview
  • Requirements
  • Getting started
    • Data connection
  • Access IEX Sandbox token
  • Generate schema and typings
    • Server schema
    • Client typings
  • Core technologies used
  • Useful developer add-ons
    • Visual Studio Code extensions from the marketplace
    • Google Chrome extensions

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

• NodeJS v10
• Typescript v3

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.

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

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

• Yarn workspaces - Multi-package manager to simplify the codebase in a single repository
• Apollo GraphQL - GraphQL framework to allow rapid and reliable development of client-server communication
• React - Interface framework
• Styled Components - Interface styling framework

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

• GraphQL Network - Chrome Devtool that provides a "network"-style tab for GraphQL requests to allow developers to debug more easily.
• Apollo Client Developer Tools - GraphQL debugging tools for Apollo Client in the Chrome developer console.
• React Developer Tools - Adds React debugging tools to the Chrome Developer Tools.

Deployment

Deployment is through Travis CI

Merging to master will build and deploy to dev.

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

env:
  global:
    ENV: uat
    SKIP_BUILD: true