Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/AngelAmoSanchez/TFG-RaspberryPi-BLE/llms.txt

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

The frontend is a Vite + React application. You can run it on your laptop in under a minute, or deploy it to Vercel with zero extra configuration because a vercel.json is already included in the repository.

​
Prerequisites

  • Node.js 18+ — check with node -v
  • npm — bundled with Node.js; check with npm -v
  • A running instance of the BLE backend (local or deployed) so VITE_API_URL has somewhere to point

​
Local development

1

Clone the repository

If you haven’t already, clone the project and change into the frontend directory:
git clone https://github.com/AngelAmoSanchez/TFG-RaspberryPi-BLE.git
cd TFG-RaspberryPi-BLE/frontend-web
2

Install dependencies

npm install
This installs React 18, Vite 5, Recharts, Axios, Lucide React, Tailwind CSS, and all dev dependencies listed in package.json.
3

Configure environment variables

Copy the example file and edit it:
cp .env.example .env
Open .env and set the URL of your running backend:
# .env — local development
VITE_API_URL=http://localhost:8000
The WebSocket URL is derived automatically from VITE_WS_URL (or falls back to ws://localhost:8000 if the variable is absent). For local use you typically only need VITE_API_URL.
All variables must start with VITE_ to be exposed to the browser by Vite. Never store secrets in these files — they are bundled into the client-side build.
4

Start the dev server

npm run dev
Vite starts a hot-reloading server at http://localhost:5173. The terminal confirms the address and port.

​
Production build

1

Set production environment variables

Update your .env (or set the variables in your CI/CD environment) to point at the deployed backend:
# .env — production
VITE_API_URL=https://your-backend.fly.dev
VITE_WS_URL=wss://your-backend.fly.dev
2

Build the static bundle

npm run build
Vite compiles everything into the dist/ directory. The vercel-build script in package.json runs the same command — Vercel calls it automatically during deployment.
3

Preview the build locally (optional)

npm run preview
Serves the dist/ output at http://localhost:4173 so you can verify the production bundle before deploying.

​
Deploy to Vercel

The repository ships with a vercel.json that handles SPA routing and backend proxying: 
{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": { "distDir": "dist" }
    }
  ],
  "routes": [
    { "src": "/api/(.*)", "dest": "https://your-backend.railway.app/api/$1" },
    { "handle": "filesystem" },
    { "src": "/(.*)", "dest": "/index.html" }
  ],
  "env": {
    "VITE_API_URL": "https://your-backend.railway.app",
    "VITE_WS_URL": "wss://your-backend.railway.app"
  }
}
1

Import the project in Vercel

Go to vercel.com/new, import your GitHub repository, and set the Root Directory to frontend-web.
2

Set environment variables

In the Vercel project settings under Environment Variables, add:
VariableExample value
VITE_API_URLhttps://your-backend.fly.dev
VITE_WS_URLwss://your-backend.fly.dev
These override the values in vercel.json for each deployment environment (Production, Preview, Development).
3

Deploy

Click Deploy. Vercel runs npm run vercel-build (which calls vite build) and serves the dist/ output as a static site.Subsequent pushes to your default branch trigger automatic redeployments.
The /api/(.*) route in vercel.json proxies API calls through Vercel’s edge network, which can help with latency. Update the dest URL to match your actual backend host before deploying.

​
CORS configuration

The backend must explicitly allow your frontend origin. If you deploy the frontend to https://my-dashboard.vercel.app, add that exact URL to the backend’s CORS allowed origins list. A mismatch causes all API and WebSocket requests to be blocked by the browser.
For local development, the backend typically allows http://localhost:5173 by default. Check your backend’s CORS settings if you change the Vite port or deploy to a custom domain.

​
Available scripts

ScriptCommandDescription
Dev servernpm run devStarts Vite at localhost:5173 with HMR
Production buildnpm run buildOutputs static files to dist/
Preview buildnpm run previewServes dist/ at localhost:4173
Run testsnpm testRuns Vitest test suite once
Lintnpm run lintESLint across all .js and .jsx files

Build docs developers (and LLMs) love

Get started for freeTalk to us