# Installation / Setup There are a number of environment variables you can set when standing up this project. You can copy `.env-example` to `.env` and tweak it as you see fit. There are a number of components in this project. Each will run in a different execution context (Node, client browser, recording viewer app, chrome extension, etc) This project uses Lerna to manage dependencies between projects. Running `npm run initialize` will install root level dev dependencies and use Lerna to hoist shared library dependencies. ## Docker Setup There is a development and a "production" build for docker-compose. The development build is recommended if you would like to contribute to this project. It exposes all relevant ports for each service used in this project (including logically private ports) The production build is recommended if you would like to interact with this app the way you would in a production setting. It only exposes a single public-facing port (based on `.env`) and uses a traditional docker-compose setup ### Development Build There is a docker-compose setup that makes this project easy to run in development. For the quickest development cycle, it will mount the root of this project in a "builder" container. The builder container will build the project in this shared volume and the other runner containers will watch for changes to their built files and restart processes when files change. There are some consequences of developing this way: - Saving source files will restart the relevant dependent services (backend API server for example) - Built files will show up on your filesystem - You will need to npm run initialize on your own machine - This is to make the docker images as quick as possible to build. - You should connect to the webpack-dev-server to develop on the recordings frontend. This approach should hopefully yield the fastest change / test feedback cycle. There is a convenience script for starting docker here: `sh ./scripts/start-docker-dev.sh` ### Production Build To run this entire docker-compose application including the Nginx reverse proxy, you will need SSL certs. You can put existing certs (key and cert file) in `./secret/certs` or can run `sh ./scripts/create-certs-if-needed.sh` to create self-signed certificates. If you do this, your browser will complain about your certificate not being valid. That should be fine for local testing. If you do not choose to have your `STATIC_PORT` environment variable be `443` (default HTTPS), you will need to specifically enter `https://localhost:` There is a convenience script for starting docker here: `sh ./scripts/start-docker.sh` ## Local Setup This project has 5 separate components that will each run in a different runtime. For ease of development, I recommend using the development Docker image. If you would prefer to develop locally (or only work on a single component) you can use the following instructions ### Recording Viewer (Frontend) This is a standard React app. It builds with webpack and can run in the webpack dev server. You can run the frontend with `npm run start:viewer`. ### Recording API Server (Backend) This project uses an express backend. You can build and run with `npm run start:api` ### Decorator Server (Backend) This project uses an express backend. You can build and run with `npm run start:decorator` ### Recording Client The recording client can be built with `npm run build:recorder`. If you want to test integrations, you should `npm link` the recorder package to the integration you want to use. You can run `npm run build:recorder -- --watch` to incrementally build the recorder while testing the integration ### Chrome Extension You can run the recording code on most sites (barring some known issues with "unfriendly" CSPs). To build this code, you can run `npm run build:extension`. Since this is purely a DX tool for this project, I do not plan on adding this to the chrome store. Instead, I would recommend installing it as an unpacked extension. If only want to use the extension and not build it, you can install the pre-built version with `npm install -D @xsrt/extension`