Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Niurka77/tf-app/llms.txt

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

By the end of this guide you will have TF-App running in your browser on the Vite development server, be able to sign in with the demo credentials, and understand the two additional commands needed to push any change into the Android project. The entire local setup takes about five minutes and requires only Node.js (v18+) and a package manager.
1

Clone the repository

Download the source code from GitHub and enter the project directory.
git clone https://github.com/Niurka77/tf-app.git
cd tf-app
2

Install dependencies

Install both the Vite dev dependency and the Capacitor runtime packages declared in package.json.
npm install
This installs Vite (devDependencies) along with @capacitor/core, @capacitor/android, @capacitor/cli, and @capacitor/splash-screen (dependencies).
3

Start the development server

Launch the Vite dev server with hot module replacement enabled.
npm run dev
Vite starts on http://localhost:5173 by default. The terminal will print the exact local URL. The server watches all files under src/ and reloads the browser instantly on every save — no manual refresh needed.
4

Open the login view and sign in

Navigate to http://localhost:5173 in your browser. You will see the TF-App login screen with its branded green wave design.Use the following demo credentials to authenticate:
FieldValue
Usernameusuario
Passwordcontraseña
On success, a modal dialog confirms the login. On failure, a separate modal reports incorrect credentials. Both use the showMessage() utility defined in src/main.js, which replaces native alert() calls for better mobile compatibility.
These credentials are hardcoded in src/main.js for demonstration purposes only. Replace the credential check with a real API call before shipping to users. See the Authentication page for guidance.

​
Build for Production

When you are ready to produce deployable assets, run the Vite production build: 
npm run build
Vite compiles and bundles everything into the dist/ directory — HTML, JS modules, and CSS. This output is what Capacitor copies into the Android project when you run npx cap sync. The build also applies tree-shaking and minification automatically.
The dist/ folder is listed in .gitignore and is not tracked by Git. Always regenerate it with npm run build on any machine where you intend to run npx cap sync.

​
Preview the Production Build

Before syncing to Android, verify the production bundle behaves as expected in a browser: 
npm run preview
Vite serves the contents of dist/ on a local static server (typically http://localhost:4173). This is a faithful representation of what Android’s WebView will render — there is no live reloading here, so you must re-run npm run build if you make further code changes.

​
Sync and Open in Android

After a successful production build, push the output into the Android project: 
# Copy dist/ into the Android WebView assets and update native plugins
npx cap sync

# Open the android/ folder in Android Studio
npx cap open android
From Android Studio you can build an APK, run the app on an emulator, or deploy to a connected device via USB. Alternatively, run directly from the terminal if a device or emulator is already available: 
npx cap run android

​
Next Steps

Android Setup

Full walkthrough for configuring Android Studio, SDK requirements, and building a signed APK.

Capacitor Configuration

Explore all settings in capacitor.config.json — App ID, splash screen, and network options.

Build docs developers (and LLMs) love

Get started for freeTalk to us