• 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

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.

• NodeJS v10
• Typescript v3

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.

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.

• 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

• 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

• 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

• 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

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.

• 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

• 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 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