Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/CspmIT/mas-agua-front/llms.txt

Use this file to discover all available pages before exploring further.

Mas Agua can be deployed as a web application or as a native desktop application. Choose the installation method that best fits your needs.

​
Prerequisites

Before installing Mas Agua, ensure you have:
  • Node.js 18 or higher
  • npm or yarn package manager
  • InfluxDB instance (for data storage)
  • Backend API endpoint configured
Mas Agua requires a backend API server and InfluxDB database to function. Ensure these services are running and accessible before starting the application.

​
Web Application Installation

The web version runs in any modern browser and can be deployed using Docker or built manually.
1

Clone the repository

git clone <repository-url>
cd mas-agua
2

Configure environment variables

Create a .env file in the project root:
VITE_APP_NAME=Mas Agua
VITE_ENTORNO=production
SECRET=your-secret-key
Replace your-secret-key with a secure random string. Never commit real secrets to version control.
3

Build and run with Docker

docker build \
  --build-arg VITE_APP_NAME="Mas Agua" \
  --build-arg VITE_ENTORNO=production \
  --build-arg SECRET=your-secret-key \
  -t masagua-web .

docker run -d -p 80:80 masagua-web
The application will be available at http://localhost

​
Option 2: Manual Build

1

Install dependencies

npm install
2

Build the application

npm run build
This creates an optimized production build in the dist/ directory.
3

Deploy to web server

Copy the dist/ folder contents to your web server (Nginx, Apache, etc.).Example Nginx configuration:
server {
    listen 80;
    server_name _;
    root /usr/share/nginx/html;
    index index.html;

    # Static assets
    location ~ ^/(assets|.*\.js|.*\.css|.*\.woff2?|.*\.ttf|.*\.svg|.*\.ico)$ {
        try_files $uri =404;
        access_log off;
    }

    # SPA fallback
    location / {
        try_files $uri $uri/ /index.html;
    }
}

​
Desktop Application Installation

The desktop version provides a native application experience using Tauri.

​
System Requirements

​
Building from Source

1

Install Rust

Tauri requires Rust to be installed:
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
2

Install dependencies

npm install
3

Run in development mode

npm run tauri dev
This launches the desktop application in development mode with hot-reload enabled.
4

Build production installer

npm run tauri build
Installers will be created in src-tauri/target/release/bundle/

​
Desktop Features

The desktop version includes additional capabilities:
  • Auto-updater - Automatic application updates
  • System tray integration - Run in background with tray icon
  • Persistent storage - Local configuration storage using Tauri plugin-store
  • Process management - Better control over application lifecycle
The desktop application version is 1.0.5 (defined in src-tauri/Cargo.toml). The auto-updater checks for new versions automatically.

​
Development Mode

For development and testing: 
npm run dev
This starts the Vite development server on port 1420 with hot module replacement. Configuration details: 
// vite.config.js
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    port: 1420,
    strictPort: true,
  }
})

​
Verifying Installation

1

Check application loads

Open the application in your browser (web) or launch the desktop app.
2

Test backend connectivity

Navigate to the login page. If it loads without errors, the frontend is working correctly.
3

Verify data connection

After logging in, check if dashboards display data. This confirms InfluxDB connectivity through the backend API.

​
Troubleshooting

Another process is using the development port. Either:
  • Stop the other process
  • Change the port in vite.config.js
Ensure all build arguments are provided:
docker build \
  --build-arg VITE_APP_NAME="Mas Agua" \
  --build-arg VITE_ENTORNO=production \
  --build-arg SECRET=your-secret \
  -t masagua-web .
Install all required system dependencies:
sudo apt install libwebkit2gtk-4.0-dev build-essential curl wget \
  libssl-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-dev
This is typically a routing issue. Ensure your web server is configured to redirect all routes to index.html for the SPA to work correctly.

​
Next Steps

Quick Start Guide

Learn how to create your first dashboard and start monitoring your water systems

Build docs developers (and LLMs) love

Get started for freeTalk to us