Development Environment Setup

This guide describes how to set up and run the QA Display locally for development purposes. For deployment and integration with the QA Data API and the SDP system, see Running the QA Display and Integration with QA Data API and SDP System.

Prerequisites

Node.js: Version 20 or higher (Node.js)
Yarn: Version 1.22.x (yarn)
Dependencies: Listed in package.json

Environment Configuration

The QA Display supports configuration via environment variables. Common variables include:

REACT_APP_USE_LOCAL_DATA: Set to true to use mock data for development, or false to connect to a live backend.
Backend API endpoint variables: Configure the connection to the QA Data API as needed for your environment.

To use mock data, create a file named .env in the root of the project and add:

REACT_APP_USE_LOCAL_DATA=true

The ``.env`` file is not committed to the repository and set to be ignored by Git.

Local Development Workflow

Install Dependencies:
```
yarn install --frozen-lockfile
```
Configure Data Source (Optional): - By default, the app connects to a live backend. To use mock data, set REACT_APP_USE_LOCAL_DATA=true as above.
Run the Development Server:
```
yarn dev
```
The app will open in your browser at localhost.
Stopping the Environment: - Press ctrl-c in the terminal to stop the server.

Connecting to a Live QA Data API

To connect to a live data source, ensure REACT_APP_USE_LOCAL_DATA is set to false or remove the .env file. The application will use the backend configured in your environment variables. For more details, see the QA API documentation.

Containerized Deployment

A Dockerfile is provided for containerized deployments. To build and run the container:

docker build -t sdp-qa-display .
docker run -p 3333:3333 sdp-qa-display

This will expose the application on port 3333.