TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update README.md #3

Merged
TobaOjo merged 1 commits from tobaojo-patch-1 into develop 2025-11-11 13:50:03 +00:00
Conversation 0 Commits 1 Files Changed 1 +66 -58
1 changed files with 66 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a8178269c2 - Show all commits

124
README.md
View File

@@ -1,69 +1,77 @@
# React + TypeScript + Vite # Mav Mobile Ui
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. This is a React-based web application built with Vite (react and typescript).
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration ## Getting started
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: ### Prerequisites
- Node.js (v18 or higher recommended)
- Yarn (v1.22+) (https://yarnpkg.com/)
```js ### Installation
export default tseslint.config([ ```bash
globalIgnores(['dist']), git clone https://mavportal.com/TobaOjo/Mav-Mobile-UI.git
{ cd Mav-Mobile-UI
files: ['**/*.{ts,tsx}'], yarn install
extends: [ ```
// Other configs... ### Running Locally
```bash
yarn dev
```
The app will be available at `http://localhost:5173`.
// Remove tseslint.configs.recommended and replace with this
...tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
...tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
...tseslint.configs.stylisticTypeChecked,
// Other configs... To run on locally on other devices
], ```bash
languageOptions: { yarn dev --host
parserOptions: { ```
project: ['./tsconfig.node.json', './tsconfig.app.json'], The app will be available at the exposed addresses to access e.g. http://192.168.0.123:5173/Mobile
tsconfigRootDir: import.meta.dirname,
}, ## Tech Stack
// other options... - **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://100.118.196.113:8080
``` ```
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: ## 🧪 Development
### Linting & Formatting
```js ```bash
// eslint.config.js yarn lint
import reactX from 'eslint-plugin-react-x' yarn format
import reactDom from 'eslint-plugin-react-dom'
export default tseslint.config([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
``` ```
### Testing
(Currently not implemented – consider adding Jest or Vitest)
## 🚢 Deployment
To build for production:
```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
```