Mav-Mobile-UI/README.md

# Mav Mobile UI

This is a React-based web application built with Vite (react and typescript).

## Getting started

### Prerequisites

- Node.js (v18 or higher recommended)
- Yarn (v1.22+) (https://yarnpkg.com/)

### Installation

```bash
git clone https://mavportal.com/TobaOjo/Mav-Mobile-UI.git
cd Mav-Mobile-UI
yarn install
```

### Running Locally

```bash
yarn dev
```

The app will be available at `http://localhost:5173`.

To run on locally on other devices

```bash
yarn dev --host
```

The app will be available at the exposed addresses to access e.g. http://1xx.xxx.x.xxx:<PORT>/Mobile

## Tech Stack

- **React** – UI library
- **Vite** – Build tool
- **Yarn** – Package manager

## Configuration

Create a `.env` file to access the Mav Mobile box in unit 5 for or for any environment-specific settings:

```env
VITE_AGX_BOX_URL=http://1xx.xxx.xxx.xxx:<PORT>
```

## Development

### Linting & Formatting

```bash
yarn lint
yarn format
```

### Testing

(Currently not implemented – consider adding Jest or Vitest)

## Deployment

To build for production:
Navigate to the Mav-Mobile-UI folder

```bash
cd Mav-Mobile-UI
```

**Delete** the local .env (Production will use its own domain)

run

```bash
yarn build
```

- Navigate to your Mav-Mobile-UI folder
- Select the Dist folder
- Compress to (ZIP)
- Log into box on Moba using Session > SSH and putting IP in Remote Host.
- Creds are mav:mav
- Drag and drop dist.zip into file explorer menu on left hand side (has to be named dist.zip exactly).
- Run command

```bash
sudo ./integrate-web-ui.sh
```

Run

```bash
sudo nano web-static/index.html
```

- add the following between the lines </body> & </html>

```js
<foot>
<script>
      if (window.location.pathname !== "/Mobile") {
          window.location.replace(window.location.origin + "/Mobile");
      }
</script>
</foot>
```

- Run

```bash
sudo reboot
```

It should come back up all working