Documentación > FoxServer > Manejo de Rutas

Manejo de Rutas en Aplicaciones Web con FoxServer

Versión: 2.0 Actualizado: Mayo 2025

Contenido

Aplicaciones con Prefijo de Ruta

Cuando despliegas una aplicación web usando FoxServer con un prefijo de ruta (por ejemplo, /foxserver/), es crucial gestionar correctamente las rutas para evitar problemas de carga de recursos.

Problema Común

Si utilizas rutas absolutas (que comienzan con /) en tu HTML, CSS o JavaScript, el navegador intentará cargar estos recursos desde la raíz del dominio, ignorando el prefijo configurado en FoxServer.

Ejemplo de problema con rutas absolutas:

  • URL de la página: http://tudominio.com/foxserver/index.html
  • Ruta absoluta en HTML: <img src="/img/logo.png">
  • URL resultante (incorrecta): http://tudominio.com/img/logo.png ❌

Soluciones Recomendadas

1. Usar Rutas Relativas

La solución más sencilla es utilizar rutas relativas (sin / inicial) en todos tus recursos:

<!-- Incorrecto (ruta absoluta) -->
<link rel="stylesheet" href="/css/main.css">
<img src="/img/logo.png">

<!-- Correcto (ruta relativa) -->
<link rel="stylesheet" href="css/main.css">
<img src="img/logo.png">

Para enlaces a la página principal, usa . en lugar de /:

<!-- Incorrecto -->
<a href="/">Inicio</a>

<!-- Correcto -->
<a href=".">Inicio</a>

2. Utilizar la Etiqueta Base

Puedes añadir una etiqueta <base> en el <head> de tu documento HTML para establecer la URL base para todas las rutas relativas:

<head>
    <base href="/foxserver/">
    <!-- Resto del head -->
</head>
¡Importante! Cuando uses la etiqueta <base>, todas las rutas en el documento deben ser relativas (sin / inicial) para que funcionen correctamente.

3. Usar Variables en Plantillas

Si generas HTML dinámicamente con plantillas VFP, define una variable para el prefijo:

<!-- En tu plantilla VFP -->
<% LOCAL cBaseUrl = "/foxserver/" %>
<link rel="stylesheet" href="<%= cBaseUrl %>css/main.css">
<img src="<%= cBaseUrl %>img/logo.png">

Lista de Verificación para Proyectos Web

✅ Estructura de Archivos

  • Organiza tus recursos en carpetas (css/, js/, img/, etc.)
  • Mantén una estructura coherente para facilitar las rutas relativas

✅ Enlaces HTML

  • Usa rutas relativas para recursos internos
  • Para enlaces a la página principal, usa . en lugar de /
  • Para enlaces a secciones, usa rutas relativas (ej: docs/, about.html)

✅ Recursos Externos

  • Mantén las URLs completas para recursos externos (CDN, APIs, etc.)
  • Ejemplo: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css

✅ CSS

  • Asegúrate de que las rutas a imágenes y fuentes dentro de CSS también sean relativas
  • Ejemplo: background-image: url('../img/background.jpg');

✅ JavaScript

  • Usa rutas relativas para cargar recursos mediante JavaScript
  • Considera definir una variable base para rutas: const BASE_URL = './';

Ejemplos de Escenarios Comunes

Sitio Web Simple

Para un sitio web simple con estructura básica:

/foxserver/
  ├── index.html
  ├── about.html
  ├── css/
  │   └── main.css
  └── img/
      └── logo.png

En index.html:

<!DOCTYPE html>
<html>
<head>
    <base href="/foxserver/">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <img src="img/logo.png">
    <a href=".">Inicio</a>
    <a href="about.html">Acerca de</a>
</body>
</html>

Aplicación Web con Subdirectorios

Para una aplicación web con múltiples secciones:

/foxserver/
  ├── index.html
  ├── css/
  │   └── main.css
  ├── docs/
  │   ├── index.html
  │   └── api.html
  └── img/
      └── logo.png

En docs/index.html:

<!DOCTYPE html>
<html>
<head>
    <base href="/foxserver/">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <img src="img/logo.png">
    <a href=".">Inicio</a>
    <a href="docs/">Documentación</a>
    <a href="docs/api.html">API</a>
</body>
</html>

Solución de Problemas Comunes

Problema Causa Solución
Recursos no se cargan Rutas absolutas con prefijo Cambiar a rutas relativas o usar <base>
Enlaces rotos Navegación incorrecta con prefijo Usar . para inicio y rutas relativas para secciones
Estilos no se aplican CSS no se carga por ruta incorrecta Verificar rutas en etiquetas <link>
Imágenes no aparecen Rutas de imágenes incorrectas Comprobar atributos src en etiquetas <img>

Recomendaciones Finales

  1. Consistencia: Elige un enfoque (rutas relativas o etiqueta <base>) y úsalo en todo el proyecto
  2. Pruebas: Verifica tu sitio con diferentes configuraciones de prefijo
  3. Automatización: Para proyectos grandes, considera herramientas de construcción que manejen las rutas automáticamente
← Configuración
Referencia API →
↑