## Conductor UI

The UI is a standard `create-react-app` React Single Page Application (SPA). To get started, with Node 14 and `yarn` installed, first run `yarn install` from within the `/ui` directory to retrieve package dependencies.

For more information regarding CRA configuration and usage, see the official [doc site](https://create-react-app.dev/).

> ### For upgrading users
>
> The UI is designed to operate directly with the Conductor Server API. A Node `express` backend is no longer required.

### Development Server

To run the UI on the bundled development server, run `yarn run start`. Navigate your browser to `http://localhost:5000`.

To enable errors inspector module export env var: `REACT_APP_ENABLE_ERRORS_INSPECTOR=true`, then run `yarn start`.

#### Reverse Proxy Configuration

By default, the development server proxies requests to `http://localhost:8080/api`.

To use a different Conductor Server, set the `WF_SERVER` environment variable:

```
export WF_SERVER=http://localhost:8081
yarn run start
```

For additional customization (e.g., path rewriting), edit `setupProxy.js`. Note that this file is only used by the development server.

### Hosting for Production

There is no need to "build" the project unless you require compiled assets to host on a production web server. In this case, the project can be built with the command `yarn build`. The assets will be produced to `/build`.

Your hosting environment should make the Conductor Server API available on the same domain. This avoids complexities regarding cross-origin data fetching. The default path prefix is `/api`. If a different prefix is desired, `plugins/fetch.js` can be modified to customize the API fetch behavior.

See `docker/serverAndUI` for an `nginx` based example.

#### Different host path

The static UI would work when rendered from any host route.
The default is '/'. You can customize this by setting the 'homepage' field in package.json
Refer

- https://docs.npmjs.com/cli/v9/configuring-npm/package-json#homepage
- https://create-react-app.dev/docs/deployment/#building-for-relative-paths

### Customization Hooks

For ease of maintenance, a number of touch points for customization have been removed to `/plugins`.

- `AppBarModules.jsx`
- `AppLogo.jsx`
- `env.js`
- `fetch.js`

### Authentication

We recommend that authentication & authorization be de-coupled from the UI and handled at the web server/access gateway.

#### Examples (WIP)

- Basic Auth (username/password) with `nginx`
- Commercial IAM Vendor
- Node `express` server with `passport.js`