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

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

Running Locally

yarn dev

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

To run on locally on other devices

yarn dev --host

The app will be available at the exposed addresses to access e.g. http://1xx.xxx.x.xxx:/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:

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

Development

Linting & Formatting

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

cd Mav-Mobile-UI

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

run

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

sudo ./integrate-web-ui.sh

Run

sudo nano web-static/index.html

• add the following between the lines & </html>

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

• Run

sudo reboot

It should come back up all working