# React UI

## Introduction

This is the main user interface for the application. The application is a React application served via Quarkus
Quinoa.

## TLDR

```
mvn quarkus:dev
```

## Building and running the application

Builds are served using a Quarkus server. This server serves the compiled React application and an `env.js` file.
This `env.js` file is generated at startup, and adds a `window.APP_CONFIG` property that the React application can read
from.

### Configuration

#### Runtime configuration using Quarkus config

The application can be configured using Quarkus configuration, which is passed from the back end to the front end using
javascript generated by `EnvResource.java`. Currently, the `env.js` will expose just the `API_BASE_URL`
and `CALCULATE_API_BASE_URL` properties. Because we're using Quinoa, we can use any of the normal Quarkus configuration
mechanisms to set it; for example, it can be set using a `API_BASE_URL` environment variable, or an `api.base.url`
property in the `application.properties`. This will control the base URL to connect to the [fights](../rest-fights)
service. The default if unset is http://localhost:8082.

#### Build-time configuration using environment variables

Environment variables can be injected into the build using the [ngx-env](https://github.com/chihab/ngx-env) plugin.
Remember, these are pulled in at build time and are inserted as string literals in the resulting JS files.

Variables must start with the `NG_APP` prefix, e.g `NG_APP_MY_URL=http://localhost:1234`.

## Running the Application

## Local Development

First you need to start up all of the downstream services ([Heroes Service](../rest-heroes)
, [Villains Service](../rest-villains), and [Fights Service](../rest-fights)). -
The [Event Statistics Service](../event-statistics) is optional.

Then use the following command:

```shell
quarkus dev
```

This starts the React hot reloading server at http://localhost:3000, and the Quarkus server to supply the `env.js`
file. The Quarkus server will proxy requests to the React development server.

You can then access the application on http://localhost:8080.

If you need something other than the default, you can set the `API_BASE_URL` environment variable with the
appropriate [Fights Service](../rest-fights) hostname and port.
> By default, the [`rest-fights`](../rest-fights) service runs on port `8082`, so setting `export API_BASE_URL=http://localhost:8082` will do.

You can also set the environment variable `CALCULATE_API_BASE_URL=true` to have it compute the base URL. Only use this
option if the UI url is in the form of `ui-super-heroes.somewhere.com`. In this instance,
setting `CALCULATE_API_BASE_URL=true` will replace `ui-super-heroes` in the URL with `rest-fights`.

## Build for Production

For production, build your code with the following options:

```
quarkus build
java -jar target/quarkus-app/quarkus-run.jar
```

#### Container images

There is also a container image available that you can use instead:

 ```bash
docker run -p 8080:8080 -e API_BASE_URL=http://localhost:8082 quay.io/quarkus-super-heroes/ui-super-heroes:latest
```

## Running Locally via Docker Compose

Pre-built images for this application can be found
at [`quay.io/quarkus-super-heroes/ui-super-heroes`](https://quay.io/repository/quarkus-super-heroes/ui-super-heroes?tab=tags)
.

The application can be started outside of docker compose simply
with `docker run -p 8080:8080 quay.io/quarkus-super-heroes/ui-super-heroes:latest`.

If you want to use docker compose, from the `quarkus-super-heroes/ui-super-heroes` directory run:

```bash
docker-compose -f deploy/docker-compose/app.yml up
```

If you want to stand up the entire system, [follow these instructions](../README.md#running-locally-via-docker-compose).

Once started the application will be exposed at `http://localhost:8080`.

## Deploying to Kubernetes

Pre-built images for this application can be found
at [`quay.io/quarkus-super-heroes/ui-super-heroes`](https://quay.io/repository/quarkus-super-heroes/ui-super-heroes?tab=tags)
.

Deployment descriptors for this image are provided in the [`deploy/k8s`](deploy/k8s) directory. There is one
for [OpenShift](https://www.openshift.com) ([`app-openshift.yml`](deploy/k8s/app-openshift.yml))
, [Minikube](https://minikube.sigs.k8s.io) ([`app-minikube.yml`](deploy/k8s/app-minikube.yml)),
and [Kubernetes](https://www.kubernetes.io) ([`app-kubernetes.yml`](deploy/k8s/app-kubernetes.yml)).

These are only the descriptors for this application and not the entire system. If you want to deploy the entire
system, [follow these instructions](../README.md#deploying-to-kubernetes).

### Routing

There are 2 environment variables that can be set on this application to control how the React UI communicates with
the [`rest-fights`](../rest-fights) application:

| Env Var                  | Default Value                                        | Description                                                                                                                                                                                                                                                                                                      |
|--------------------------|------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `API_BASE_URL`           | `http://localhost:8082`                              | The base URL for the [`rest-fights`](../rest-fights) application. Set this to a fully qualified URL (i.e. http://www.example.com or http://somehost.com:someport) to define the URL for the [`rest-fights`](../rest-fights) application.                                                                        |
| `CALCULATE_API_BASE_URL` | `false` on Minikube/Kubernetes. `true` on OpenShift. | If `true`, look at the URL in the browser and replace the `ui-super-heroes` host name with

# Under the covers with React

Although you don't need to know React to run this component, the following commands may be helpful for making changes.

## Running unit tests

Run `npm test` to execute the unit tests via Jest.
