cmt-navigator v1.0.0

CMT-NAVIGATOR

Cmt navigator is Server-Client application that wrapping the old flash cmt within an HTML page. The Server app (Play-Java) serves the Client HTML-JS app (JS-React-Redux) and provides REST-API for Client's requests.

Motivation

This Project's main purpose is to ignite the transition from the old-flash technology to a modern HTML-JS, while improving the look and feel of the Campaign Management Tools.

Prerequisites

• Java 8
• Node 8 (for the client)

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. (you can import to Intellij as sbt project).

• Clone the repo
• run npm install
• View the Eqtos README

Running all micro-services dependencies of cmt-navigator

All the services that cmt-navigator depends on are configured inside docker/docker-compose.dev.yml (Except for Studio, for which Eqtos is responsible). In order to export campaign event log you need to run campaign-log locally with the same port you put in the application.conf.

Prerequisites

• Docker engine and Docker-compose (should be bundled with the Mac Docker installation).
• AWS cli tool (download & run aws configure)
• The Eqtos Docker network (check with: docker network ls --filter name=eqtos_innovid-dev-nw)
• All the respective repos for the services cloned locally in the same folder where cmt-nav is (the containers require their env.var files to render their config)

Running Containers

cd docker
aws ecr get-login --no-include-email --region us-east-1 # some older aws cli versions don't support --no-include-email, so remove it if needed
docker-compose -f docker-compose.dev.yml up -d

None of the containers' ports are mapped, meaning cmt-navigator will only be able to connect to them when run inside a container in the Eqtos network. To add port mappings you can run the docker-compose command and add the mappings as env variables (look in the docker-compose file for details)

Teardown

To remove the containers simply run:

cd docker
docker-compose -f docker-compose.dev.yml down

Running with WDS

You can also run the app with the Webpack Dev Server

eqtos spin-up --local
npm i
npm run wds

You need to have localhost.innovid.com redirecting to 127.0.0.1 in your /etc/hosts

React UI Components Gallery

You can view the cmt-nav react components locally by running > npm run storybook

The storybook component are being visually tested (screenshots comparison) using applitools automatically.

To run it locally:

1. make sure you have APPLITOOLS_API_KEY exported in your env variables (you can find it in LastPass)
2. > npm run build-storybook
3. > npm run test:storybook

To run them in a docker container run (from root project dir): > docker build . -t test -f .storybook/Dockerfile > docker run -v /dev/shm:/dev/shm --shm-size 2g -e NPM_AUTH_TOKEN=[NPM_TOKEN] -e APPLITOOLS_API_KEY=[API_KEY] test

Storybook Github

Code Quality

• TSLint for Typescript code linting.
• Prettier for Typescript code formatting.
  • Intellij File Watcher setup (Optional)
  • Intellij AutoWatch plugin

• TSC Strict Checks

  • Enables incremental checks for tsc's strict errors.
  • If you want to see strict error checks while you develop (instead of meeting failures after pushing), follow the README from the repo

• You can manually run:

• npm run tslinter (for code quality check)
• npm run tsc-strict-checks (for tsc checks)

Tests

React tests: npm run test:watch

UI Tests

Client side interacts with a WireMock server only which stubs all client side requests

Juniper

To run Juniper tests locally: 1. Start Webpack Dev Server (npm run wds) 2. Go to juniper and run npm install 3. Run npm run test:dev

System Tests

Client side interacts with a Play Test server, WireMock stubs requests to external services.

Debugging

Debugging the application via the intellij:

1. Select Run -> Edit Configuration
2. Add new configuration (⌘N) -> select Remote
3. Run debug from intellij with the new configuration.

Issues

If you see the following warning "export 'rebuild' (imported as 'ReactTooltip') was not found in 'react-tooltip' after running 'npm run wds':

1. make sure you have the correct node version (node -v => 8.17) installed via nvm. (nvm install 8.17, nvm use 8.17)
2. which node => /Users/${user}/.nvm/versions/node/v8.17.0/bin/node
3. Delete node_modules, run 'npm install' and try again.
4. At the end you should see 'DONE Compiled successfully in 7428ms'.

Team City Project

• CMT - Navigator

Credits

The Innovid Team

License

Licensed to Innovid