Cómo correr la app — Frontend (Flutter) + Backend (Node.js)

Este archivo describe, paso a paso, cómo ejecutar localmente (y algunos tips para producción) una aplicación cuyo frontend está desarrollado en Flutter y el backend en Node.js/JavaScript (usando Express como ejemplo). Incluye prerequisitos, comandos útiles, configuración de CORS, variables de entorno y soluciones a problemas comunes.

---

📦 Requisitos previos

• Git instalado (para clonar repositorios).

• Flutter instalado y configurado. Sigue la guía oficial para tu SO: https://flutter.dev/docs/get-started/install

  • Verifica con: flutter --version y flutter doctor.

• Node.js (recomendado LTS) y npm o pnpm.

  • Verifica con: node -v y npm -v.

• Editor (VS Code recomendado) y emuladores/dispositivos si vas a ejecutar en móvil/desktop.

---

🗂 Estructura típica del proyecto

project-root/
├─ frontend/         # app Flutter
│  ├─ lib/
│  ├─ pubspec.yaml
│  └─ ...
├─ backend/          # API en Node.js (Express por ejemplo)
│  ├─ src/
│  ├─ package.json
│  └─ .env
└─ README.md

Ajusta rutas y nombres según tu proyecto real.

---

🔧 Backend (Node.js) — pasos para levantarlo localmente

Ejemplo asumiendo Express + dotenv + nodemon en desarrollo.

1. Abre una terminal y ve a la carpeta del backend:

cd project-root/backend

2. Instala dependencias:

npm install
# o si usás pnpm: pnpm install

3. Crea un archivo .env con las variables necesarias (ejemplo):

PORT=4000
DATABASE_URL=mongodb://localhost:27017/tu-db
JWT_SECRET=secreto_super_seguro

4. (Opcional) comandos útiles en package.json:

{
  "scripts": {
    "start": "node src/index.js",
    "dev": "nodemon --watch src --exec node src/index.js"
  }
}

5. Ejecuta en modo desarrollo:

npm run dev

El servidor debería quedar escuchando en http://localhost:4000 (o el puerto que hayas configurado).

Ejemplo mínimo de CORS en Express

// src/index.js (simplificado)
const express = require('express');
const cors = require('cors');
require('dotenv').config();

const app = express();
app.use(cors({ origin: '*' })); // para desarrollo. En producción especifica orígenes.
app.use(express.json());

app.get('/ping', (req, res) => res.json({ ok: true }));

const port = process.env.PORT || 4000;
app.listen(port, () => console.log(`Server on ${port}`));

Importante: origin: '*' está bien en desarrollo, pero en producción usa una lista controlada de orígenes.

---

🖥️ Frontend (Flutter) — pasos para ejecutar

1. Abre otra terminal y ve a la carpeta del frontend:

cd project-root/frontend

2. Instala dependencias de Dart/Flutter:

flutter pub get

3. Configura la URL de la API en el código Flutter. Puedes usar const o archivos de configuración por build flavor. Ejemplo simple usando un archivo lib/config.dart:

// lib/config.dart
const String API_BASE = 'http://10.0.2.2:4000'; // emulador Android usa 10.0.2.2 para localhost

• En un emulador Android: usa 10.0.2.2 para apuntar al localhost de tu máquina.
• En un emulador iOS / dispositivo físico: usa http://localhost:4000 si el dispositivo comparte red, o la IP local de tu PC (ej. http://192.168.1.45:4000).

4. Ejecuta la app Flutter en el emulador/dispositivo:

flutter run -d <device_id>
# por ejemplo: flutter run -d windows  (para escritorio Windows)
# o flutter run (abre selector de dispositivos)

5. Si tu app consume APIs, prueba primero con curl o Postman para confirmar que el backend responde.

Ejemplo de petición HTTP en Flutter (package:http)

import 'package:http/http.dart' as http;

Future<void> fetchItems() async {
  final resp = await http.get(Uri.parse('\$API_BASE/items'));
  if (resp.statusCode == 200) {
    // parsear JSON
  } else {
    throw Exception('Error: \${resp.statusCode}');
  }
}

---

🔁 Ejecutar frontend y backend simultáneamente

Opciones:

• Abrir 2 terminales: una en backend/ (npm run dev) y otra en frontend/ (flutter run).
• Usar una terminal con pestañas (terminator, iTerm, Windows Terminal).
• Scripts de orchestración (ejemplo con concurrently) — útil si querés ejecutar ambos con un solo comando (ideal en equipos):

# desde project-root/
# instala globally o como dependencia dev
npm install -D concurrently

# package.json en project-root (ejemplo)
{
  "scripts": {
    "dev": "concurrently \"npm:dev-backend\" \"npm:dev-frontend\"",
    "dev-backend": "cd backend && npm run dev",
    "dev-frontend": "cd frontend && flutter run"
  }
}

Nota: flutter run necesita interacción con dispositivos; concurrently puede ser conveniente pero no siempre ideal para Flutter.

---

📦 Compilar para producción

Backend

• Usa PM2, Docker o un servicio PaaS (Heroku, Railway, Render, Vercel serverless functions, etc.).

Ejemplo con PM2:

npm install -g pm2
pm run start # o pm2 start dist/index.js --name my-backend

Frontend Flutter

• Para web: flutter build web → subí la carpeta build/web a tu servidor estático o CDN.
• Para móvil: genera los builds (flutter build apk, flutter build ios) y publica en Play Store/App Store.
• Para desktop: flutter build windows|linux|macos y distribuye el ejecutable.

Cuando sirvas la app desde un dominio distinto al backend, configura CORS y/o usa un reverse proxy (Nginx) para evitar problemas de CORS y manejar HTTPS.

---

🐳 Alternativa: Docker (rápido para reproducir entornos)

• Backend: Dockerfile que expone el puerto y usa variables de entorno.
• Frontend web: build container que sirva build/web con Nginx.

Esto facilita desplegar en servidores y CI.

---

🛠 Troubleshooting — problemas comunes

• Backend no responde desde el emulador Android: recuerda usar 10.0.2.2 en vez de localhost.
• CORS: si el navegador muestra errores de CORS, revisá la configuración de cors() en Express y la URL del Origin.
• Variables de entorno no cargan: asegurate de requerir dotenv.config() antes de usar process.env.
• Flutter no detecta dispositivo: ejecutá flutter devices y flutter doctor.
• Certificados HTTPS en local: para APIs con HTTPS en desarrollo podés usar mkcert y configurar el emulador/dispositivo para confiar en el certificado.

---

✅ Checklist rápido

• Node.js y npm instalados
• Flutter instalado y flutter doctor sin errores críticos
• Dependencias instaladas (npm install, flutter pub get)
• .env con variables necesarias
• Backend corriendo (npm run dev)
• Frontend apuntando a la URL correcta de la API
• Probar endpoints con Postman/curl antes de consumir desde Flutter

---

🔗 Recursos útiles

• Flutter: https://flutter.dev
• Node.js: https://nodejs.org
• Express: https://expressjs.com
• CORS middleware: https://www.npmjs.com/package/cors

---

Si querés, puedo:

• Incluir ejemplos específicos con tu estructura real de carpetas.
• Generar Dockerfiles para frontend/backend.
• Crear scripts package.json listos para usar.

¡Avisame qué preferís!